Drop support for data-track-event

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/70234

app/assets/javascripts/tracking/constants.js

@@ -22,9 +22,6 @@ export const DEFAULT_SNOWPLOW_OPTIONS = {
 export const ACTION_ATTR_SELECTOR = '[data-track-action]';
 export const LOAD_ACTION_ATTR_SELECTOR = '[data-track-action="render"]';
 
-export const DEPRECATED_EVENT_ATTR_SELECTOR = '[data-track-event]';
-export const DEPRECATED_LOAD_EVENT_ATTR_SELECTOR = '[data-track-event="render"]';
-
 export const URLS_CACHE_STORAGE_KEY = 'gl-snowplow-pseudonymized-urls';
 
 export const REFERRER_TTL = 24 * 60 * 60 * 1000;

app/assets/javascripts/tracking/tracking.js

-import { LOAD_ACTION_ATTR_SELECTOR, DEPRECATED_LOAD_EVENT_ATTR_SELECTOR } from './constants';
+import { LOAD_ACTION_ATTR_SELECTOR } from './constants';
 import { dispatchSnowplowEvent } from './dispatch_snowplow_event';
 import getStandardContext from './get_standard_context';
 import {
@@ -105,9 +105,7 @@ export default class Tracking {
       return [];
     }
 
-    const loadEvents = parent.querySelectorAll(
-      `${LOAD_ACTION_ATTR_SELECTOR}, ${DEPRECATED_LOAD_EVENT_ATTR_SELECTOR}`,
-    );
+    const loadEvents = parent.querySelectorAll(LOAD_ACTION_ATTR_SELECTOR);
 
     loadEvents.forEach((element) => {
       const { action, data } = createEventPayload(element);

app/assets/javascripts/tracking/utils.js

@@ -4,8 +4,6 @@ import { getExperimentData } from '~/experimentation/utils';
 import {
   ACTION_ATTR_SELECTOR,
   LOAD_ACTION_ATTR_SELECTOR,
-  DEPRECATED_EVENT_ATTR_SELECTOR,
-  DEPRECATED_LOAD_EVENT_ATTR_SELECTOR,
   URLS_CACHE_STORAGE_KEY,
   REFERRER_TTL,
 } from './constants';
@@ -27,7 +25,6 @@ export const addExperimentContext = (opts) => {
 export const createEventPayload = (el, { suffix = '' } = {}) => {
   const {
     trackAction,
-    trackEvent,
     trackValue,
     trackExtra,
     trackExperiment,
@@ -36,7 +33,7 @@ export const createEventPayload = (el, { suffix = '' } = {}) => {
     trackProperty,
   } = el?.dataset || {};
 
-  const action = (trackAction || trackEvent) + (suffix || '');
+  const action = `${trackAction}${suffix || ''}`;
   let value = trackValue || el.value || undefined;
 
   if (el.type === 'checkbox' && !el.checked) {
@@ -74,8 +71,7 @@ export const createEventPayload = (el, { suffix = '' } = {}) => {
 
 export const eventHandler = (e, func, opts = {}) => {
   const actionSelector = `${ACTION_ATTR_SELECTOR}:not(${LOAD_ACTION_ATTR_SELECTOR})`;
-  const deprecatedEventSelector = `${DEPRECATED_EVENT_ATTR_SELECTOR}:not(${DEPRECATED_LOAD_EVENT_ATTR_SELECTOR})`;
-  const el = e.target.closest(`${actionSelector}, ${deprecatedEventSelector}`);
+  const el = e.target.closest(actionSelector);
 
   if (!el) {
     return;

spec/frontend/tracking_spec.js

@@ -409,31 +409,27 @@ describe('Tracking', () => {
     });
   });
 
-  describe.each`
-    term
-    ${'event'}
-    ${'action'}
-  `('tracking interface events with data-track-$term', ({ term }) => {
+  describe('tracking interface events with data-track-action', () => {
     let eventSpy;
 
     beforeEach(() => {
       eventSpy = jest.spyOn(Tracking, 'event');
       Tracking.bindDocument('_category_'); // only happens once
       setHTMLFixture(`
-        <input data-track-${term}="click_input1" data-track-label="_label_" value=0 />
-        <input data-track-${term}="click_input2" data-track-value=0 value=0/>
-        <input type="checkbox" data-track-${term}="toggle_checkbox" value=1 checked/>
-        <input class="dropdown" data-track-${term}="toggle_dropdown"/>
-        <div data-track-${term}="nested_event"><span class="nested"></span></div>
+        <input data-track-action="click_input1" data-track-label="_label_" value=0 />
+        <input data-track-action="click_input2" data-track-value=0 value=0/>
+        <input type="checkbox" data-track-action="toggle_checkbox" value=1 checked/>
+        <input class="dropdown" data-track-action="toggle_dropdown"/>
+        <div data-track-action="nested_event"><span class="nested"></span></div>
         <input data-track-bogus="click_bogusinput" data-track-label="_label_" value="_value_"/>
-        <input data-track-${term}="click_input3" data-track-experiment="example" value="_value_"/>
-        <input data-track-${term}="event_with_extra" data-track-extra='{ "foo": "bar" }' />
-        <input data-track-${term}="event_with_invalid_extra" data-track-extra="invalid_json" />
+        <input data-track-action="click_input3" data-track-experiment="example" value="_value_"/>
+        <input data-track-action="event_with_extra" data-track-extra='{ "foo": "bar" }' />
+        <input data-track-action="event_with_invalid_extra" data-track-extra="invalid_json" />
       `);
     });
 
-    it(`binds to clicks on elements matching [data-track-${term}]`, () => {
-      document.querySelector(`[data-track-${term}="click_input1"]`).click();
+    it(`binds to clicks on elements matching [data-track-action]`, () => {
+      document.querySelector(`[data-track-action="click_input1"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', {
         label: '_label_',
@@ -441,14 +437,14 @@ describe('Tracking', () => {
       });
     });
 
-    it(`does not bind to clicks on elements without [data-track-${term}]`, () => {
+    it(`does not bind to clicks on elements without [data-track-action]`, () => {
       document.querySelector('[data-track-bogus="click_bogusinput"]').click();
 
       expect(eventSpy).not.toHaveBeenCalled();
     });
 
     it('allows value override with the data-track-value attribute', () => {
-      document.querySelector(`[data-track-${term}="click_input2"]`).click();
+      document.querySelector(`[data-track-action="click_input2"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', {
         value: '0',
@@ -456,7 +452,7 @@ describe('Tracking', () => {
     });
 
     it('handles checkbox values correctly', () => {
-      const checkbox = document.querySelector(`[data-track-${term}="toggle_checkbox"]`);
+      const checkbox = document.querySelector(`[data-track-action="toggle_checkbox"]`);
 
       checkbox.click(); // unchecking
 
@@ -472,7 +468,7 @@ describe('Tracking', () => {
     });
 
     it('handles bootstrap dropdowns', () => {
-      const dropdown = document.querySelector(`[data-track-${term}="toggle_dropdown"]`);
+      const dropdown = document.querySelector(`[data-track-action="toggle_dropdown"]`);
 
       dropdown.dispatchEvent(new Event('show.bs.dropdown', { bubbles: true }));
 
@@ -497,7 +493,7 @@ describe('Tracking', () => {
       };
       getExperimentData.mockReturnValue(mockExperimentData);
 
-      document.querySelector(`[data-track-${term}="click_input3"]`).click();
+      document.querySelector(`[data-track-action="click_input3"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input3', {
         value: '_value_',
@@ -506,7 +502,7 @@ describe('Tracking', () => {
     });
 
     it('supports extra data as JSON', () => {
-      document.querySelector(`[data-track-${term}="event_with_extra"]`).click();
+      document.querySelector(`[data-track-action="event_with_extra"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'event_with_extra', {
         extra: { foo: 'bar' },
@@ -514,34 +510,30 @@ describe('Tracking', () => {
     });
 
     it('ignores extra if provided JSON is invalid', () => {
-      document.querySelector(`[data-track-${term}="event_with_invalid_extra"]`).click();
+      document.querySelector(`[data-track-action="event_with_invalid_extra"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'event_with_invalid_extra', {});
     });
   });
 
-  describe.each`
-    term
-    ${'event'}
-    ${'action'}
-  `('tracking page loaded events with -$term', ({ term }) => {
+  describe('tracking page loaded events with -action', () => {
     let eventSpy;
 
     beforeEach(() => {
       eventSpy = jest.spyOn(Tracking, 'event');
       setHTMLFixture(`
-        <div data-track-${term}="click_link" data-track-label="all_nested_links">
-          <input data-track-${term}="render" data-track-label="label1" value=1 data-track-property="_property_"/>
-          <span data-track-${term}="render" data-track-label="label2" data-track-value=1>
+        <div data-track-action="click_link" data-track-label="all_nested_links">
+          <input data-track-action="render" data-track-label="label1" value=1 data-track-property="_property_"/>
+          <span data-track-action="render" data-track-label="label2" data-track-value=1>
             <a href="#" id="link">Something</a>
           </span>
-          <input data-track-${term}="_render_bogus_" data-track-label="label3" value="_value_" data-track-property="_property_"/>
+          <input data-track-action="_render_bogus_" data-track-label="label3" value="_value_" data-track-property="_property_"/>
         </div>
       `);
       Tracking.trackLoadEvents('_category_'); // only happens once
     });
 
-    it(`sends tracking events when [data-track-${term}="render"] is on an element`, () => {
+    it(`sends tracking events when [data-track-action="render"] is on an element`, () => {
       expect(eventSpy.mock.calls).toEqual([
         [
           '_category_',
@@ -576,7 +568,7 @@ describe('Tracking', () => {
         eventSpy.mockClear();
       });
 
-      it(`avoids using ancestor [data-track-${term}="render"] tracking configurations`, () => {
+      it(`avoids using ancestor [data-track-action="render"] tracking configurations`, () => {
         link.dispatchEvent(new Event(event, { bubbles: true }));
 
         expect(eventSpy).not.toHaveBeenCalledWith(

spec/tooling/danger/product_intelligence_spec.rb

@@ -74,7 +74,7 @@ RSpec.describe Tooling::Danger::ProductIntelligence do
 
     context 'with snowplow files changed' do
       context 'when vue file changed' do
-        let(:changed_lines) { ['+data-track-event'] }
+        let(:changed_lines) { ['+data-track-action'] }
 
         it { is_expected.to match_array(['components/welcome.vue']) }
       end

tooling/danger/product_intelligence.rb

@@ -66,7 +66,6 @@ module Tooling
         js_patterns = Regexp.union(
           'Tracking.event',
           /\btrack\(/,
-          'data-track-event',
           'data-track-action'
         )
         all_changed_files.select do |file|