Send gitlab_experiment context with paid feature callout events

- Mainly opting into the use of the `experiment` key in the `options`
  for `Trackin.mixin(options)`
- Also looking ahead to a related commit which pulls a lot of the shared
  strings & numbers into a constants.js file for this experiment/feature
- Converted data-track-... attributes into `@click` callbacks for ease-
  of-use with the `Tracking.mixin()` options by means of `this.track()`

ee/app/assets/javascripts/paid_feature_callouts/components/paid_feature_callout_badge.vue

@@ -6,6 +6,7 @@ import { __, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 
 const RESIZE_EVENT_DEBOUNCE_MS = 150;
+const trackingMixin = Tracking.mixin({ experiment: 'highlight_paid_features_during_active_trial' });
 
 export default {
   components: {
@@ -15,7 +16,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [trackingMixin],
   props: {
     featureName: {
       type: String,
@@ -29,6 +30,9 @@ export default {
       specific: __('The %{featureName} feature is part of your GitLab Ultimate trial.'),
     },
   },
+  trackingEvents: {
+    displayBadge: { action: 'display_badge', label: 'feature_highlight_badge' },
+  },
   data() {
     return {
       tooltipDisabled: false,
@@ -57,10 +61,8 @@ export default {
       this.updateTooltipDisabledState();
     },
     trackBadgeDisplayedForExperiment() {
-      this.track('display_badge', {
-        label: 'feature_highlight_badge',
-        property: 'experiment:highlight_paid_features_during_active_trial',
-      });
+      const { action, ...options } = this.$options.trackingEvents.displayBadge;
+      this.track(action, options);
     },
     updateTooltipDisabledState() {
       this.tooltipDisabled = bp.getBreakpointSize() !== 'xs';

ee/app/assets/javascripts/paid_feature_callouts/components/paid_feature_callout_popover.vue

@@ -6,18 +6,15 @@ import { __, n__, s__, sprintf } from '~/locale';
 import Tracking from '~/tracking';
 
 const RESIZE_EVENT_DEBOUNCE_MS = 150;
+const CLICK_BUTTON = 'click_button';
+const trackingMixin = Tracking.mixin({ experiment: 'highlight_paid_features_during_active_trial' });
 
 export default {
-  tracking: {
-    action: 'click_button',
-    labels: { upgrade: 'upgrade_to_ultimate', compare: 'compare_all_plans' },
-    property: 'experiment:highlight_paid_features_during_active_trial',
-  },
   components: {
     GlButton,
     GlPopover,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [trackingMixin],
   props: {
     containerId: {
       type: String,
@@ -71,6 +68,11 @@ export default {
   i18n: {
     compareAllButtonTitle: s__('BillingPlans|Compare all plans'),
   },
+  trackingEvents: {
+    popoverShown: { action: 'popover_shown', label: 'feature_highlight_popover' },
+    upgradeBtnClick: { action: CLICK_BUTTON, label: 'upgrade_to_premium' },
+    compareBtnClick: { action: CLICK_BUTTON, label: 'compare_all_plans' },
+  },
   computed: {
     popoverTitle() {
       const i18nPopoverTitle = n__(
@@ -116,15 +118,21 @@ export default {
     onResize() {
       this.updateDisabledState();
     },
-    onShown() {
-      this.track('popover_shown', {
-        label: `feature_highlight_popover:${this.featureName}`,
-        property: this.$options.tracking.property,
-      });
-    },
     updateDisabledState() {
       this.disabled = bp.getBreakpointSize() === 'xs';
     },
+    onShown() {
+      const { action, ...options } = this.$options.trackingEvents.popoverShown;
+      this.track(action, options);
+    },
+    onUpgradeBtnClick() {
+      const { action, ...options } = this.$options.trackingEvents.upgradeBtnClick;
+      this.track(action, options);
+    },
+    onCompareBtnClick() {
+      const { action, ...options } = this.$options.trackingEvents.compareBtnClick;
+      this.track(action, options);
+    },
   },
 };
 </script>
@@ -163,9 +171,7 @@ export default {
         class="gl-mb-0"
         block
         data-testid="upgradeBtn"
-        :data-track-action="$options.tracking.action"
-        :data-track-label="$options.tracking.labels.upgrade"
-        :data-track-property="$options.tracking.property"
+        @click="onUpgradeBtnClick"
       >
         <span class="gl-font-sm">{{ upgradeButtonTitle }}</span>
       </gl-button>
@@ -178,9 +184,7 @@ export default {
         class="gl-mb-0"
         block
         data-testid="compareBtn"
-        :data-track-action="$options.tracking.action"
-        :data-track-label="$options.tracking.labels.compare"
-        :data-track-property="$options.tracking.property"
+        @click="onCompareBtnClick"
       >
         <span class="gl-font-sm">{{ $options.i18n.compareAllButtonTitle }}</span>
       </gl-button>

ee/spec/frontend/paid_feature_callouts/paid_feature_callout_badge_spec.js

@@ -69,10 +69,11 @@ describe('PaidFeatureCalloutBadge component', () => {
     });
 
     it('tracks that the badge has been displayed when mounted', () => {
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'display_badge', {
-        label: 'feature_highlight_badge',
-        property: 'experiment:highlight_paid_features_during_active_trial',
-      });
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        'display_badge',
+        expect.objectContaining({ label: 'feature_highlight_badge' }),
+      );
     });
   });
 

ee/spec/frontend/paid_feature_callouts/paid_feature_callout_popover_spec.js

@@ -3,15 +3,13 @@ import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { shallowMount } from '@vue/test-utils';
 
 import PaidFeatureCalloutPopover from 'ee/paid_feature_callouts/components/paid_feature_callout_popover.vue';
-import { mockTracking } from 'helpers/tracking_helper';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('PaidFeatureCalloutPopover', () => {
   let trackingSpy;
   let wrapper;
 
-  const trackingExperimentKey = 'experiment:highlight_paid_features_during_active_trial';
-
   const findGlPopover = () => wrapper.findComponent(GlPopover);
 
   const defaultProps = {
@@ -36,10 +34,12 @@ describe('PaidFeatureCalloutPopover', () => {
   };
 
   beforeEach(() => {
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
     wrapper = createComponent();
   });
 
   afterEach(() => {
+    unmockTracking();
     wrapper.destroy();
   });
 
@@ -135,50 +135,68 @@ describe('PaidFeatureCalloutPopover', () => {
       variant: 'confirm',
       size: 'small',
       block: '',
-      'data-track-action': 'click_button',
-      'data-track-property': trackingExperimentKey,
     };
 
-    const findUpgradeBtn = () => wrapper.findByTestId('upgradeBtn');
-    const findCompareBtn = () => wrapper.findByTestId('compareBtn');
+    describe('upgrade plan button', () => {
+      const findUpgradeBtn = () => wrapper.findByTestId('upgradeBtn');
 
-    it('correctly renders an Upgrade button', () => {
-      const upgradeBtn = findUpgradeBtn();
+      it('correctly renders an Upgrade button', () => {
+        const upgradeBtn = findUpgradeBtn();
 
-      expect(upgradeBtn.text()).toEqual('Upgrade to GitLab Amazing');
-      expect(upgradeBtn.attributes()).toMatchObject({
-        ...sharedAttrs,
-        href: '/-/subscriptions/new?namespace_id=123&plan_id=abc456',
-        category: 'primary',
-        'data-track-label': 'upgrade_to_ultimate',
+        expect(upgradeBtn.text()).toEqual('Upgrade to GitLab Amazing');
+        expect(upgradeBtn.attributes()).toMatchObject({
+          ...sharedAttrs,
+          href: '/-/subscriptions/new?namespace_id=123&plan_id=abc456',
+          category: 'primary',
+        });
+      });
+
+      it('tracks on click', () => {
+        findUpgradeBtn().vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(
+          undefined,
+          'click_button',
+          expect.objectContaining({ label: 'upgrade_to_premium' }),
+        );
       });
     });
 
-    it('correctly renders a Compare button', () => {
-      const compareBtn = findCompareBtn();
+    describe('compare plans button', () => {
+      const findCompareBtn = () => wrapper.findByTestId('compareBtn');
+
+      it('correctly renders a Compare button', () => {
+        const compareBtn = findCompareBtn();
 
-      expect(compareBtn.text()).toEqual('Compare all plans');
-      expect(compareBtn.attributes()).toMatchObject({
-        ...sharedAttrs,
-        href: '/group/test-group/-/billings',
-        category: 'secondary',
-        'data-track-label': 'compare_all_plans',
+        expect(compareBtn.text()).toEqual('Compare all plans');
+        expect(compareBtn.attributes()).toMatchObject({
+          ...sharedAttrs,
+          href: '/group/test-group/-/billings',
+          category: 'secondary',
+        });
+      });
+
+      it('tracks on click', () => {
+        findCompareBtn().vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(
+          undefined,
+          'click_button',
+          expect.objectContaining({ label: 'compare_all_plans' }),
+        );
       });
     });
   });
 
   describe('onShown', () => {
-    beforeEach(() => {
-      trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
-      wrapper = createComponent();
+    it('tracks that the popover has been shown', () => {
       findGlPopover().vm.$emit('shown');
-    });
 
-    it('tracks that the popover has been shown', () => {
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'popover_shown', {
-        label: 'feature_highlight_popover:some feature',
-        property: trackingExperimentKey,
-      });
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        'popover_shown',
+        expect.objectContaining({ label: 'feature_highlight_popover' }),
+      );
     });
   });