diff --git a/app/assets/javascripts/security_configuration/components/training_provider_list.vue b/app/assets/javascripts/security_configuration/components/training_provider_list.vue index 539e2bff17c2a423f81f47f2ff3ad87a5d680115..dd470562f2d599244cbc5770e0eb1b47856d44c2 100644 --- a/app/assets/javascripts/security_configuration/components/training_provider_list.vue +++ b/app/assets/javascripts/security_configuration/components/training_provider_list.vue @@ -6,6 +6,8 @@ import { __ } from '~/locale'; import { TRACK_TOGGLE_TRAINING_PROVIDER_ACTION, TRACK_TOGGLE_TRAINING_PROVIDER_LABEL, + TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION, + TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL, } from '~/security_configuration/constants'; import dismissUserCalloutMutation from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql'; import securityTrainingProvidersQuery from '../graphql/security_training_providers.query.graphql'; @@ -137,6 +139,12 @@ export default { }, }); }, + trackProviderLearnMoreClick(providerId) { + this.track(TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION, { + label: TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL, + property: providerId, + }); + }, }, i18n, }; @@ -172,7 +180,13 @@ export default { <h3 class="gl-font-lg gl-m-0 gl-mb-2">{{ provider.name }}</h3> <p> {{ provider.description }} - <gl-link :href="provider.url" target="_blank">{{ __('Learn more.') }}</gl-link> + <gl-link + :href="provider.url" + target="_blank" + @click="trackProviderLearnMoreClick(provider.id)" + > + {{ __('Learn more.') }} + </gl-link> </p> </div> </div> diff --git a/app/assets/javascripts/security_configuration/constants.js b/app/assets/javascripts/security_configuration/constants.js index dc76436e91dbcf01a08208ad05ed0e56bff98d26..86cc3a9c2f9a65998412f1d4d680c44fcf36b664 100644 --- a/app/assets/javascripts/security_configuration/constants.js +++ b/app/assets/javascripts/security_configuration/constants.js @@ -1,2 +1,5 @@ export const TRACK_TOGGLE_TRAINING_PROVIDER_ACTION = 'toggle_security_training_provider'; export const TRACK_TOGGLE_TRAINING_PROVIDER_LABEL = 'update_security_training_provider'; + +export const TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION = 'click_link'; +export const TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL = 'security_training_provider'; diff --git a/spec/frontend/security_configuration/components/training_provider_list_spec.js b/spec/frontend/security_configuration/components/training_provider_list_spec.js index 18c9ada6bde9c189265f9e8333416f69a901629a..4d92f0cca2209625813a63bbd43dc9254820a11e 100644 --- a/spec/frontend/security_configuration/components/training_provider_list_spec.js +++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js @@ -8,6 +8,8 @@ import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { TRACK_TOGGLE_TRAINING_PROVIDER_ACTION, TRACK_TOGGLE_TRAINING_PROVIDER_LABEL, + TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION, + TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL, } from '~/security_configuration/constants'; import TrainingProviderList from '~/security_configuration/components/training_provider_list.vue'; import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql'; @@ -244,6 +246,24 @@ describe('TrainingProviderList component', () => { }, }); }); + + it(`tracks when a provider's "Learn more" link is clicked`, () => { + const firstProviderLink = findLinks().at(0); + const [{ id: firstProviderId }] = securityTrainingProviders; + + expect(trackingSpy).not.toHaveBeenCalled(); + + firstProviderLink.vm.$emit('click'); + + expect(trackingSpy).toHaveBeenCalledWith( + undefined, + TRACK_PROVIDER_LEARN_MORE_CLICK_ACTION, + { + label: TRACK_PROVIDER_LEARN_MORE_CLICK_LABEL, + property: firstProviderId, + }, + ); + }); }); });