Track events on requirements page

- Navigation changes
- Filter events

ee/app/assets/javascripts/requirements/components/requirements_root.vue

@@ -4,6 +4,7 @@ import { __, sprintf } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import Api from '~/api';
 import createFlash, { FLASH_TYPES } from '~/flash';
+import Tracking from '~/tracking';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
 
@@ -45,7 +46,7 @@ export default {
     RequirementEditForm: RequirementForm,
     ImportRequirementsModal,
   },
-  mixins: [glFeatureFlagsMixin()],
+  mixins: [glFeatureFlagsMixin(), Tracking.mixin()],
   props: {
     projectPath: {
       type: String,
@@ -559,6 +560,12 @@ export default {
       this.prevPageCursor = '';
       this.nextPageCursor = '';
 
+      if (textSearch || authors.length) {
+        this.track('filter', {
+          property: JSON.stringify(filters),
+        });
+      }
+
       this.updateUrl();
     },
     handleSortRequirements(sortBy) {
@@ -571,8 +578,9 @@ export default {
     },
     handlePageChange(page) {
       const { startCursor, endCursor } = this.requirements.pageInfo;
+      const toNext = page > this.currentPage;
 
-      if (page > this.currentPage) {
+      if (toNext) {
         this.prevPageCursor = '';
         this.nextPageCursor = endCursor;
       } else {
@@ -580,6 +588,8 @@ export default {
         this.nextPageCursor = '';
       }
 
+      this.track('click_navigation', { label: toNext ? 'next' : 'prev' });
+
       this.currentPage = page;
 
       this.updateUrl();

ee/changelogs/unreleased/fe-track-interaction-with-requirements.yml

+---
+title: Track events on requirements page frontend
+merge_request: 49656
+author:
+type: other

ee/spec/frontend/requirements/components/requirements_root_spec.js

@@ -11,6 +11,7 @@ import createRequirement from 'ee/requirements/queries/createRequirement.mutatio
 import updateRequirement from 'ee/requirements/queries/updateRequirement.mutation.graphql';
 
 import { TEST_HOST } from 'helpers/test_constants';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import createFlash from '~/flash';
 import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
@@ -79,13 +80,17 @@ const createComponent = ({
 
 describe('RequirementsRoot', () => {
   let wrapper;
+  let trackingSpy;
 
   beforeEach(() => {
     wrapper = createComponent();
+    trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+    trackingSpy.mockImplementation(() => {});
   });
 
   afterEach(() => {
     wrapper.destroy();
+    unmockTracking();
   });
 
   describe('computed', () => {
@@ -783,6 +788,13 @@ describe('RequirementsRoot', () => {
         expect(global.window.location.href).toBe(
           `${TEST_HOST}/?page=1&state=opened&search=foo&sort=created_desc&author_username%5B%5D=root&author_username%5B%5D=john.doe`,
         );
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'filter', {
+          property: JSON.stringify([
+            { type: 'author_username', value: { data: 'root' } },
+            { type: 'author_username', value: { data: 'john.doe' } },
+            'foo',
+          ]),
+        });
       });
 
       it('updates props `textSearch` and `authorUsernames` with empty values when passed filters param is empty', () => {
@@ -795,6 +807,7 @@ describe('RequirementsRoot', () => {
 
         expect(wrapper.vm.authorUsernames).toEqual([]);
         expect(wrapper.vm.textSearch).toBe('');
+        expect(trackingSpy).not.toHaveBeenCalled();
       });
     });
 
@@ -830,6 +843,9 @@ describe('RequirementsRoot', () => {
         expect(global.window.location.href).toBe(
           `${TEST_HOST}/?page=2&state=opened&sort=created_desc&next=${mockPageInfo.endCursor}`,
         );
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_navigation', {
+          label: 'next',
+        });
       });
 
       it('sets data prop `nextPageCursor` to empty string and `prevPageCursor` to `requirements.pageInfo.startCursor` when provided page param is less than currentPage', () => {
@@ -849,6 +865,9 @@ describe('RequirementsRoot', () => {
         expect(global.window.location.href).toBe(
           `${TEST_HOST}/?page=1&state=opened&sort=created_desc&prev=${mockPageInfo.startCursor}`,
         );
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_navigation', {
+          label: 'prev',
+        });
       });
     });
   });