Add metric when training material is loaded

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/348593

app/assets/javascripts/security_configuration/constants.js

@@ -3,3 +3,4 @@ export const TRACK_TOGGLE_TRAINING_PROVIDER_LABEL = 'update_security_training_pr
 export const TRACK_CLICK_TRAINING_LINK = 'click_security_training_link';
 export const TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION = 'click_link';
 export const TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL = 'security_training_provider';
+export const TRACK_TRAINING_LOADED_ACTION = 'security_training_link_loaded';

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue

@@ -6,7 +6,10 @@ import securityTrainingProvidersQuery from '~/security_configuration/graphql/sec
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import axios from '~/lib/utils/axios_utils';
 import Tracking from '~/tracking';
-import { TRACK_CLICK_TRAINING_LINK } from '~/security_configuration/constants';
+import {
+  TRACK_CLICK_TRAINING_LINK,
+  TRACK_TRAINING_LOADED_ACTION,
+} from '~/security_configuration/constants';
 import { SUPPORTED_IDENTIFIER_TYPES } from '../constants';
 
 export const i18n = {
@@ -115,6 +118,7 @@ export default {
         const {
           data: { url },
         } = await axios.get(path, { params });
+        this.triggerMetric(TRACK_TRAINING_LOADED_ACTION);
         this.training = { name, url };
       } catch {
         this.hasError = true;
@@ -123,10 +127,13 @@ export default {
       }
     },
     clickTrainingLink() {
+      this.triggerMetric(TRACK_CLICK_TRAINING_LINK);
+    },
+    triggerMetric(action) {
       const { name } = this.supportedIdentifier;
       const { id } = mockProvider;
 
-      this.track(TRACK_CLICK_TRAINING_LINK, {
+      this.track(action, {
         label: `vendor_${id}`,
         property: name,
       });

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -14,7 +14,10 @@ import VulnerabilityTraining, {
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { SUPPORTED_IDENTIFIER_TYPES } from 'ee/vulnerabilities/constants';
-import { TRACK_CLICK_TRAINING_LINK } from '~/security_configuration/constants';
+import {
+  TRACK_CLICK_TRAINING_LINK,
+  TRACK_TRAINING_LOADED_ACTION,
+} from '~/security_configuration/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
@@ -204,21 +207,38 @@ describe('VulnerabilityTraining component', () => {
   describe('metrics', () => {
     let trackingSpy;
 
+    beforeEach(async () => {
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      await mockTrainingSuccess();
+      createComponent();
+      await waitForQueryToBeLoaded();
+    });
+
     afterEach(() => {
       unmockTracking();
     });
 
+    const expectedTrackingOptions = {
+      property: defaultProps.identifiers[0].name,
+      label: `vendor_${mockProvider.id}`,
+    };
+
+    it('tracks when the training link gets loaded', () => {
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        TRACK_TRAINING_LOADED_ACTION,
+        expectedTrackingOptions,
+      );
+    });
+
     it('tracks when a training link gets clicked', async () => {
-      await mockTrainingSuccess();
-      createComponent();
-      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-      await waitForQueryToBeLoaded();
       await findTrainingItemLink().vm.$emit('click');
 
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, TRACK_CLICK_TRAINING_LINK, {
-        property: defaultProps.identifiers[0].name,
-        label: `vendor_${mockProvider.id}`,
-      });
+      expect(trackingSpy).toHaveBeenCalledWith(
+        undefined,
+        TRACK_CLICK_TRAINING_LINK,
+        expectedTrackingOptions,
+      );
     });
   });