Merge branch 'ankit.panchal/410518' into 'master'

Add Gitlab Internal Events to Frontend to unify RedisHLL/Snowplow

See merge request !123901



Merged-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
Approved-by: Niko Belokolodov <nbelokolodov@gitlab.com>
Approved-by: Diana Zubova <dzubova@gitlab.com>
Approved-by: Sebastian Rehm <srehm@gitlab.com>
Approved-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
Reviewed-by: Ankit Panchal <apanchal@gitlab.com>
Co-authored-by: Ankit Panchal <apanchal@gitlab.com>

app/assets/javascripts/tracking/constants.js

@@ -25,3 +25,7 @@ export const URLS_CACHE_STORAGE_KEY = 'gl-snowplow-pseudonymized-urls';
 export const REFERRER_TTL = 24 * 60 * 60 * 1000;
 
 export const GOOGLE_ANALYTICS_ID_COOKIE_NAME = '_ga';
+
+export const GITLAB_INTERNAL_EVENT_CATEGORY = 'InternalEventTracking';
+
+export const SERVICE_PING_SCHEMA = 'iglu:com.gitlab/gitlab_service_ping/jsonschema/1-0-0';

app/assets/javascripts/tracking/index.js

@@ -2,8 +2,10 @@ import { getAllExperimentContexts } from '~/experimentation/utils';
 import { DEFAULT_SNOWPLOW_OPTIONS } from './constants';
 import getStandardContext from './get_standard_context';
 import Tracking from './tracking';
+import InternalEvents from './internal_events';
 
 export { Tracking as default };
+export { InternalEvents };
 
 /**
  * Tracker initialization as defined in:

app/assets/javascripts/tracking/internal_events.js

+import API from '~/api';
+
+import Tracking from './tracking';
+import { GITLAB_INTERNAL_EVENT_CATEGORY, SERVICE_PING_SCHEMA } from './constants';
+
+const InternalEvents = {
+  /**
+   * Returns an implementation of this class in the form of
+   * a Vue mixin.
+   *
+   * @param {Object} opts - default options for all events
+   * @returns {Object}
+   */
+  mixin(opts = {}) {
+    return {
+      mixins: [Tracking.mixin(opts)],
+      methods: {
+        track_event(event) {
+          API.trackRedisHllUserEvent(event);
+          this.track(event, {
+            context: {
+              schema: SERVICE_PING_SCHEMA,
+              data: {
+                event_name: event,
+                data_source: 'redis_hll',
+              },
+            },
+            category: GITLAB_INTERNAL_EVENT_CATEGORY,
+          });
+        },
+      },
+    };
+  },
+};
+
+export default InternalEvents;

ee/app/assets/javascripts/analytics/devops_reports/devops_adoption/components/devops_adoption_app.vue

@@ -2,10 +2,9 @@
 import { GlAlert, GlTabs, GlTab } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import DevopsScore from '~/analytics/devops_reports/components/devops_score.vue';
-import API from '~/api';
 import dateformat from '~/lib/dateformat';
 import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
-import Tracking from '~/tracking';
+import { InternalEvents } from '~/tracking';
 import {
   I18N_GROUPS_QUERY_ERROR,
   I18N_ENABLED_NAMESPACE_QUERY_ERROR,
@@ -39,7 +38,7 @@ export default {
     GlTabs,
     GlTab,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [InternalEvents.mixin()],
   inject: {
     isGroup: {
       default: false,
@@ -262,33 +261,17 @@ export default {
     },
     trackDevopsScoreTabClick() {
       if (!this.devopsScoreTabClicked) {
-        API.trackRedisHllUserEvent(this.$options.trackDevopsScoreTabClickEvent);
-        this.trackSnowplowEvent(this.$options.trackDevopsScoreTabClickEvent);
-
+        this.track_event(this.$options.trackDevopsScoreTabClickEvent);
         this.devopsScoreTabClicked = true;
       }
     },
     trackDevopsTabClick() {
       if (!this.adoptionTabClicked) {
-        API.trackRedisHllUserEvent(this.$options.trackDevopsTabClickEvent);
-        this.trackSnowplowEvent(this.$options.trackDevopsTabClickEvent);
-
+        this.track_event(this.$options.trackDevopsTabClickEvent);
         this.adoptionTabClicked = true;
       }
     },
 
-    trackSnowplowEvent(event) {
-      this.track('click_tab', {
-        label: 'redis_hll_counters.analytics.analytics_total_unique_counts_monthly',
-        context: {
-          schema: 'iglu:com.gitlab/gitlab_service_ping/jsonschema/1-0-0',
-          data: {
-            event_name: event,
-            data_source: 'redis_hll',
-          },
-        },
-      });
-    },
     trackCardSelected(card) {
       const index = this.$options.devopsAdoptionTableConfiguration.findIndex(
         ({ key }) => card.key === key,

ee/spec/frontend/analytics/devops_reports/devops_adoption/components/devops_adoption_app_spec.js

@@ -24,6 +24,7 @@ import { mockTracking } from 'helpers/tracking_helper';
 import DevopsScore from '~/analytics/devops_reports/components/devops_score.vue';
 import API from '~/api';
 import { groupNodes, devopsAdoptionNamespaceData } from '../mock_data';
+import { GITLAB_INTERNAL_EVENT_CATEGORY } from '../../../../../../../app/assets/javascripts/tracking/constants';
 
 jest.mock('ee/analytics/devops_reports/devops_adoption/utils/cache_updates', () => ({
   addEnabledNamespacesToCache: jest.fn(),
@@ -374,8 +375,8 @@ describe('DevopsAdoptionApp', () => {
           wrapper.findByTestId(testId).vm.$emit('click');
 
           expect(API.trackRedisHllUserEvent).toHaveBeenCalledWith(event);
-          expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', {
-            label: 'redis_hll_counters.analytics.analytics_total_unique_counts_monthly',
+          expect(trackingSpy).toHaveBeenCalledWith(GITLAB_INTERNAL_EVENT_CATEGORY, event, {
+            category: GITLAB_INTERNAL_EVENT_CATEGORY,
             context: {
               schema: 'iglu:com.gitlab/gitlab_service_ping/jsonschema/1-0-0',
               data: {