Add product analytics onboarding to shared listing
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 builtinAudience
andBehaviour
dashboards.
- When state is not
- 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 |
---|---|
![]() |
![]() |
Setup in progress
Before (state didn't exist) | After |
---|---|
![]() |
![]() |
Setup complete
No visual changes.
Before | After |
---|---|
![]() |
![]() |
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.
- Follow these instructions to setup Product Analytics in GDK.
- Create a new project.
- In the new project, view the Analytics > Dashboards at
http://localhost:3000/gitlab-org/[PROJECT]/-/analytics/dashboards/
. - Click on the Product Analytics
Set up
button. - Validate that you can go through the Project Analytics onboarding process.
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #388629 (closed)