Merge branch 'nicolasdular/track-ci-template-usage' into 'master'

Track clicked templates for pipeline empty state experiment

See merge request gitlab-org/gitlab!58808

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue

 <script>
 import { GlButton, GlCard, GlSprintf } from '@gitlab/ui';
+import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
 import { HELLO_WORLD_TEMPLATE_KEY } from '../../constants';
@@ -10,6 +11,7 @@ export default {
     GlCard,
     GlSprintf,
   },
+  HELLO_WORLD_TEMPLATE_KEY,
   i18n: {
     cta: s__('Pipelines|Use template'),
     testTemplates: {
@@ -51,6 +53,14 @@ export default {
       ),
     };
   },
+  methods: {
+    trackEvent(template) {
+      const tracking = new ExperimentTracking('pipeline_empty_state_templates', {
+        label: template,
+      });
+      tracking.event('template_clicked');
+    },
+  },
 };
 </script>
 <template>
@@ -82,6 +92,7 @@ export default {
             variant="confirm"
             :href="helloWorldTemplateUrl"
             data-testid="test-template-link"
+            @click="trackEvent($options.HELLO_WORLD_TEMPLATE_KEY)"
           >
             {{ $options.i18n.cta }}
           </gl-button>
@@ -121,6 +132,7 @@ export default {
             variant="confirm"
             :href="template.link"
             data-testid="template-link"
+            @click="trackEvent(template.name)"
           >
             {{ $options.i18n.cta }}
           </gl-button>

spec/frontend/pipelines/pipelines_ci_templates_spec.js

 import { shallowMount } from '@vue/test-utils';
+import ExperimentTracking from '~/experimentation/experiment_tracking';
 import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
 
 const addCiYmlPath = "/-/new/master?commit_message='Add%20.gitlab-ci.yml'";
@@ -8,6 +9,8 @@ const suggestedCiTemplates = [
   { name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
 ];
 
+jest.mock('~/experimentation/experiment_tracking');
+
 describe('Pipelines CI Templates', () => {
   let wrapper;
 
@@ -81,4 +84,28 @@ describe('Pipelines CI Templates', () => {
       );
     });
   });
+
+  describe('tracking', () => {
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    it('sends an event when template is clicked', () => {
+      findTemplateLinks().at(0).vm.$emit('click');
+
+      expect(ExperimentTracking).toHaveBeenCalledWith('pipeline_empty_state_templates', {
+        label: 'Android',
+      });
+      expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('template_clicked');
+    });
+
+    it('sends an event when Hello-World template is clicked', () => {
+      findTestTemplateLinks().at(0).vm.$emit('click');
+
+      expect(ExperimentTracking).toHaveBeenCalledWith('pipeline_empty_state_templates', {
+        label: 'Hello-World',
+      });
+      expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('template_clicked');
+    });
+  });
 });