Track experiments with `Tracking.mixin`

* adds the related experiment context if an experiment name is passed in
  and it exists

part of:
https://gitlab.com/gitlab-org/gitlab/-/issues/285286

app/assets/javascripts/tracking.js

@@ -27,22 +27,33 @@ const DEFAULT_SNOWPLOW_OPTIONS = {
   pageUnloadTimer: 10,
 };
 
+const addExperimentContext = (opts) => {
+  const { experiment, ...options } = opts;
+  if (experiment) {
+    const data = getExperimentData(experiment);
+    if (data) {
+      const context = { schema: TRACKING_CONTEXT_SCHEMA, data };
+      return { ...options, context };
+    }
+  }
+  return options;
+};
+
 const createEventPayload = (el, { suffix = '' } = {}) => {
   const action = (el.dataset.trackAction || el.dataset.trackEvent) + (suffix || '');
   let value = el.dataset.trackValue || el.value || undefined;
   if (el.type === 'checkbox' && !el.checked) value = false;
 
-  let context = el.dataset.trackContext;
-  if (el.dataset.trackExperiment) {
-    const data = getExperimentData(el.dataset.trackExperiment);
-    if (data) context = { schema: TRACKING_CONTEXT_SCHEMA, data };
-  }
+  const context = addExperimentContext({
+    experiment: el.dataset.trackExperiment,
+    context: el.dataset.trackContext,
+  });
 
   const data = {
     label: el.dataset.trackLabel,
     property: el.dataset.trackProperty,
     value,
-    context,
+    ...context,
   };
 
   return {
@@ -150,7 +161,8 @@ export default class Tracking {
           return localCategory || opts.category;
         },
         trackingOptions() {
-          return { ...opts, ...this.tracking };
+          const options = addExperimentContext(opts);
+          return { ...options, ...this.tracking };
         },
       },
       methods: {

spec/frontend/tracking_spec.js

@@ -254,7 +254,7 @@ describe('Tracking', () => {
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'nested_event', {});
     });
 
-    it('brings in experiment data if linked to an experiment', () => {
+    it('includes experiment data if linked to an experiment', () => {
       const mockExperimentData = {
         variant: 'candidate',
         experiment: 'repo_integrations_link',
@@ -326,6 +326,30 @@ describe('Tracking', () => {
         mixin.computed.tracking = { foo: 'baz', baz: 'bar' };
         expect(mixin.computed.trackingOptions()).toEqual({ foo: 'baz', baz: 'bar' });
       });
+
+      it('includes experiment data if linked to an experiment', () => {
+        const mockExperimentData = {
+          variant: 'candidate',
+          experiment: 'darkMode',
+        };
+        getExperimentData.mockReturnValue(mockExperimentData);
+
+        const mixin = Tracking.mixin({ foo: 'bar', experiment: 'darkMode' });
+        expect(mixin.computed.trackingOptions()).toEqual({
+          foo: 'bar',
+          context: {
+            schema: TRACKING_CONTEXT_SCHEMA,
+            data: mockExperimentData,
+          },
+        });
+      });
+
+      it('does not include experiment data if experiment data does not exist', () => {
+        const mixin = Tracking.mixin({ foo: 'bar', experiment: 'lightMode' });
+        expect(mixin.computed.trackingOptions()).toEqual({
+          foo: 'bar',
+        });
+      });
     });
 
     describe('trackingCategory', () => {