Merge branch 'add-cta-tracking-attributes-to-hand_raise_lead_button' into 'master'

Forward tracking attributes to HandRaiseLeadButton Vue component

See merge request gitlab-org/gitlab!80123

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue

@@ -56,7 +56,7 @@ export default {
     GlModal: GlModalDirective,
   },
   mixins: [Tracking.mixin()],
-  inject: ['user', 'small'],
+  inject: ['user', 'small', 'ctaTracking'],
   data() {
     return {
       isLoading: false,
@@ -222,6 +222,11 @@ export default {
       :variant="small ? 'confirm' : 'default'"
       :size="small ? 'small' : 'medium'"
       :class="{ 'gl-mb-3 gl-w-full': small }"
+      :data-track-action="ctaTracking.action"
+      :data-track-label="ctaTracking.label"
+      :data-track-property="ctaTracking.property"
+      :data-track-value="ctaTracking.value"
+      :data-track-experiment="ctaTracking.experiment"
     >
       <span :class="{ 'gl-font-sm': small }">{{ $options.i18n.buttonText }}</span>
     </gl-button>

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/init_hand_raise_lead_button.js

@@ -3,7 +3,19 @@ import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/
 import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
 
 export const initHandRaiseLeadButton = (el) => {
-  const { namespaceId, userName, firstName, lastName, companyName, glmContent } = el.dataset;
+  const {
+    namespaceId,
+    userName,
+    firstName,
+    lastName,
+    companyName,
+    glmContent,
+    trackAction,
+    trackLabel,
+    trackProperty,
+    trackValue,
+    trackExperiment,
+  } = el.dataset;
 
   return new Vue({
     el,
@@ -18,6 +30,13 @@ export const initHandRaiseLeadButton = (el) => {
         companyName,
         glmContent,
       },
+      ctaTracking: {
+        action: trackAction,
+        label: trackLabel,
+        property: trackProperty,
+        value: trackValue,
+        experiment: trackExperiment,
+      },
     },
     render(createElement) {
       return createElement(HandRaiseLeadButton);

ee/spec/frontend/hand_raise_leads/components/hand_raise_lead_button_spec.js

@@ -21,10 +21,10 @@ describe('HandRaiseLeadButton', () => {
   let wrapper;
   let trackingSpy;
 
-  const createComponent = (small = false) => {
+  const createComponent = (providers = {}) => {
     return shallowMountExtended(HandRaiseLeadButton, {
       provide: {
-        small,
+        small: false,
         user: {
           namespaceId: '1',
           userName: 'joe',
@@ -33,6 +33,8 @@ describe('HandRaiseLeadButton', () => {
           companyName: 'ACME',
           glmContent: 'some-content',
         },
+        ctaTracking: {},
+        ...providers,
       },
     });
   };
@@ -119,7 +121,7 @@ describe('HandRaiseLeadButton', () => {
 
     describe('small button', () => {
       it('has small confirm button and the "Contact sales" text on the button', () => {
-        wrapper = createComponent(true);
+        wrapper = createComponent({ small: true });
         const button = findButton();
 
         expect(button.props('variant')).toBe('confirm');
@@ -129,6 +131,80 @@ describe('HandRaiseLeadButton', () => {
     });
   });
 
+  describe('when provided with CTA tracking options', () => {
+    const action = 'click_button';
+    const label = 'contact sales';
+    const experiment = 'some_experiment';
+
+    describe('when provided with all of the CTA tracking options', () => {
+      const property = 'a thing';
+      const value = '123';
+
+      beforeEach(() => {
+        wrapper = createComponent({
+          ctaTracking: { action, label, property, value, experiment },
+        });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      it('sets up tracking on the CTA button', () => {
+        const button = findButton();
+
+        expect(button.attributes()).toMatchObject({
+          'data-track-action': action,
+          'data-track-label': label,
+          'data-track-property': property,
+          'data-track-value': value,
+          'data-track-experiment': experiment,
+        });
+
+        button.trigger('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith('_category_', action, { label, property, value });
+      });
+    });
+
+    describe('when provided with some of the CTA tracking options', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          ctaTracking: { action, label, experiment },
+        });
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      it('sets up tracking on the CTA button', () => {
+        const button = findButton();
+
+        expect(button.attributes()).toMatchObject({
+          'data-track-action': action,
+          'data-track-label': label,
+          'data-track-experiment': experiment,
+        });
+
+        button.trigger('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith('_category_', action, { label });
+      });
+    });
+
+    describe('when provided with none of the CTA tracking options', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      it('does not set up tracking on the CTA button', () => {
+        const button = findButton();
+
+        expect(button.attributes()).not.toMatchObject({ 'data-track-action': action });
+
+        button.trigger('click');
+
+        expect(trackingSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
   describe('submit button', () => {
     beforeEach(() => {
       wrapper = createComponent();

ee/spec/frontend/vue_shared/discover/card_security_discover_app_spec.js

@@ -35,6 +35,7 @@ describe('Card security discover app', () => {
           lastName: 'Doe',
           companyName: 'ACME',
         },
+        ctaTracking: {},
       },
     });
   };