Skip to content

Add product analytics onboarding to shared listing

Jiaan Louw requested to merge 388629-add-product-analytics-set-up-action into master

What does this MR do and why?

This MR adds the Product Analytics onboarding to the shared Analytics dashboard listing for #388629 (closed).

The following changes are made:

  • Adds a new Product Analytics feature list item with the Set up button.
  • Adds the ProductAnalyticsState component to the dashboard listing.
    • When state is not complete, renders the new Product Analytics feature item.
    • When state is complete, renders the builtin Audience and Behaviour dashboards.
  • Updates the analytics dashboard feature spec to cover product analytics onboarding.

The follow-up issue Remove product analytics specific dashboard lis... (#390551 - closed) will remove the deprecated /product_analytics code.

Note: This feature is hidden behind a default off feature flag.

Screenshots or screen recordings

Recording

Kapture_2023-04-12_at_12.11.07

Screenshots

Click to expand

Setup needed

Previously the dashboards were listed erroneously shown before the feature was set up.

Before After
image image

Setup in progress

Before (state didn't exist) After
image image

Setup complete

No visual changes.

Before After
image image

How to set up and validate locally

Note: This feature has a lot of setup steps. If you need help please ask me or I can step through these during a call with you.

  1. Follow these instructions to setup Product Analytics in GDK.
  2. Create a new project.
  3. In the new project, view the Analytics > Dashboards at http://localhost:3000/gitlab-org/[PROJECT]/-/analytics/dashboards/.
  4. Click on the Product Analytics Set up button.
  5. Validate that you can go through the Project Analytics onboarding process.
  6. To generate events, add and modify the script below using a user script manager (like tapermonkey) or in your browser console.
Click to expand
(function() {
  'use strict';

  var jsSDK = document.createElement('script');
  jsSDK.setAttribute('src','https://unpkg.com/@gitlab/application-sdk-js@0.0.5/dist/gl-sdk.min.js');

  // Injected JS to track events from GDK
  jsSDK.onload = function() {
    window.glClient = window.glSDK.glClientSDK({
      applicationId: 'YOUR_APPLICATION_ID', // Replace with your new App ID
      host: 'YOUR_COLLECTOR_HOST' // Replace with your devkit collector host
    });

    window.glClient.page();
  }

  document.head.appendChild(jsSDK);
})();

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #388629 (closed)

Edited by Jiaan Louw

Merge request reports