Merge branch 'rk/fix-snowplow-design-tracking' into 'master'

Changed Event Structure for Design Tracking

See merge request gitlab-org/gitlab!36061

app/assets/javascripts/design_management/utils/tracking.js

 import Tracking from '~/tracking';
 
-function assembleDesignPayload(payloadArr) {
-  return {
-    value: {
-      'internal-object-refrerer': payloadArr[0],
-      'design-collection-owner': payloadArr[1],
-      'design-version-number': payloadArr[2],
-      'design-is-current-version': payloadArr[3],
-    },
-  };
-}
-
 // Tracking Constants
+const DESIGN_TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0';
 const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+const DESIGN_TRACKING_EVENT_NAME = 'view_design';
 
 // eslint-disable-next-line import/prefer-default-export
 export function trackDesignDetailView(
@@ -21,8 +12,16 @@ export function trackDesignDetailView(
   designVersion = 1,
   latestVersion = false,
 ) {
-  Tracking.event(DESIGN_TRACKING_PAGE_NAME, 'design_viewed', {
-    label: 'design_viewed',
-    ...assembleDesignPayload([referer, owner, designVersion, latestVersion]),
+  Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENT_NAME, {
+    label: DESIGN_TRACKING_EVENT_NAME,
+    context: {
+      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
+      data: {
+        'design-version-number': designVersion,
+        'design-is-current-version': latestVersion,
+        'internal-object-referrer': referer,
+        'design-collection-owner': owner,
+      },
+    },
   });
 }

app/assets/javascripts/design_management_new/utils/tracking.js

 import Tracking from '~/tracking';
 
-function assembleDesignPayload(payloadArr) {
-  return {
-    value: {
-      'internal-object-refrerer': payloadArr[0],
-      'design-collection-owner': payloadArr[1],
-      'design-version-number': payloadArr[2],
-      'design-is-current-version': payloadArr[3],
-    },
-  };
-}
-
 // Tracking Constants
+const DESIGN_TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0';
 const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
+const DESIGN_TRACKING_EVENT_NAME = 'view_design';
 
 // eslint-disable-next-line import/prefer-default-export
 export function trackDesignDetailView(
@@ -21,8 +12,16 @@ export function trackDesignDetailView(
   designVersion = 1,
   latestVersion = false,
 ) {
-  Tracking.event(DESIGN_TRACKING_PAGE_NAME, 'design_viewed', {
-    label: 'design_viewed',
-    ...assembleDesignPayload([referer, owner, designVersion, latestVersion]),
+  Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENT_NAME, {
+    label: DESIGN_TRACKING_EVENT_NAME,
+    context: {
+      schema: DESIGN_TRACKING_CONTEXT_SCHEMA,
+      data: {
+        'design-version-number': designVersion,
+        'design-is-current-version': latestVersion,
+        'internal-object-referrer': referer,
+        'design-collection-owner': owner,
+      },
+    },
   });
 }

spec/frontend/design_management/utils/tracking_spec.js

@@ -8,7 +8,7 @@ function getTrackingSpy(key) {
 describe('Tracking Events', () => {
   describe('trackDesignDetailView', () => {
     const eventKey = 'projects:issues:design';
-    const eventName = 'design_viewed';
+    const eventName = 'view_design';
 
     it('trackDesignDetailView fires a tracking event when called', () => {
       const trackingSpy = getTrackingSpy(eventKey);
@@ -20,11 +20,14 @@ describe('Tracking Events', () => {
         eventName,
         expect.objectContaining({
           label: eventName,
-          value: {
-            'internal-object-refrerer': '',
-            'design-collection-owner': '',
+          context: {
+            schema: expect.any(String),
+            data: {
               'design-version-number': 1,
               'design-is-current-version': false,
+              'internal-object-referrer': '',
+              'design-collection-owner': '',
+            },
           },
         }),
       );
@@ -40,11 +43,14 @@ describe('Tracking Events', () => {
         eventName,
         expect.objectContaining({
           label: eventName,
-          value: {
-            'internal-object-refrerer': 'from-a-test',
-            'design-collection-owner': 'test',
+          context: {
+            schema: expect.any(String),
+            data: {
               'design-version-number': 100,
               'design-is-current-version': true,
+              'internal-object-referrer': 'from-a-test',
+              'design-collection-owner': 'test',
+            },
           },
         }),
       );

spec/frontend/design_management_new/utils/tracking_spec.js

@@ -8,7 +8,7 @@ function getTrackingSpy(key) {
 describe('Tracking Events', () => {
   describe('trackDesignDetailView', () => {
     const eventKey = 'projects:issues:design';
-    const eventName = 'design_viewed';
+    const eventName = 'view_design';
 
     it('trackDesignDetailView fires a tracking event when called', () => {
       const trackingSpy = getTrackingSpy(eventKey);
@@ -20,11 +20,14 @@ describe('Tracking Events', () => {
         eventName,
         expect.objectContaining({
           label: eventName,
-          value: {
-            'internal-object-refrerer': '',
-            'design-collection-owner': '',
+          context: {
+            schema: expect.any(String),
+            data: {
               'design-version-number': 1,
               'design-is-current-version': false,
+              'internal-object-referrer': '',
+              'design-collection-owner': '',
+            },
           },
         }),
       );
@@ -40,11 +43,14 @@ describe('Tracking Events', () => {
         eventName,
         expect.objectContaining({
           label: eventName,
-          value: {
-            'internal-object-refrerer': 'from-a-test',
-            'design-collection-owner': 'test',
+          context: {
+            schema: expect.any(String),
+            data: {
               'design-version-number': 100,
               'design-is-current-version': true,
+              'internal-object-referrer': 'from-a-test',
+              'design-collection-owner': 'test',
+            },
           },
         }),
       );