Support both "-event" and "-action" for tracking

app/assets/javascripts/tracking.js

@@ -28,7 +28,7 @@ const DEFAULT_SNOWPLOW_OPTIONS = {
 };
 
 const createEventPayload = (el, { suffix = '' } = {}) => {
-  const action = el.dataset.trackEvent + (suffix || '');
+  const action = (el.dataset.trackAction || el.dataset.trackEvent) + (suffix || '');
   let value = el.dataset.trackValue || el.value || undefined;
   if (el.type === 'checkbox' && !el.checked) value = false;
 
@@ -52,7 +52,7 @@ const createEventPayload = (el, { suffix = '' } = {}) => {
 };
 
 const eventHandler = (e, func, opts = {}) => {
-  const el = e.target.closest('[data-track-event]');
+  const el = e.target.closest('[data-track-event], [data-track-action]');
 
   if (!el) return;
 
@@ -130,7 +130,9 @@ export default class Tracking {
   static trackLoadEvents(category = document.body.dataset.page, parent = document) {
     if (!this.enabled()) return [];
 
-    const loadEvents = parent.querySelectorAll('[data-track-event="render"]');
+    const loadEvents = parent.querySelectorAll(
+      '[data-track-action="render"], [data-track-event="render"]',
+    );
 
     loadEvents.forEach((element) => {
       const { action, data } = createEventPayload(element);

spec/frontend/tracking_spec.js

@@ -176,25 +176,29 @@ describe('Tracking', () => {
     });
   });
 
-  describe('tracking interface events', () => {
+  describe.each`
+    term
+    ${'event'}
+    ${'action'}
+  `('tracking interface events with data-track-$term', ({ term }) => {
     let eventSpy;
 
     beforeEach(() => {
       eventSpy = jest.spyOn(Tracking, 'event');
       Tracking.bindDocument('_category_'); // only happens once
       setHTMLFixture(`
-        <input data-track-event="click_input1" data-track-label="_label_" value="_value_"/>
-        <input data-track-event="click_input2" data-track-value="_value_override_" value="_value_"/>
-        <input type="checkbox" data-track-event="toggle_checkbox" value="_value_" checked/>
-        <input class="dropdown" data-track-event="toggle_dropdown"/>
-        <div data-track-event="nested_event"><span class="nested"></span></div>
-        <input data-track-eventbogus="click_bogusinput" data-track-label="_label_" value="_value_"/>
-        <input data-track-event="click_input3" data-track-experiment="example" value="_value_"/>
+        <input data-track-${term}="click_input1" data-track-label="_label_" value="_value_"/>
+        <input data-track-${term}="click_input2" data-track-value="_value_override_" value="_value_"/>
+        <input type="checkbox" data-track-${term}="toggle_checkbox" value="_value_" checked/>
+        <input class="dropdown" data-track-${term}="toggle_dropdown"/>
+        <div data-track-${term}="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_"/>
       `);
     });
 
-    it('binds to clicks on elements matching [data-track-event]', () => {
-      document.querySelector('[data-track-event="click_input1"]').click();
+    it(`binds to clicks on elements matching [data-track-${term}]`, () => {
+      document.querySelector(`[data-track-${term}="click_input1"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', {
         label: '_label_',
@@ -202,14 +206,14 @@ describe('Tracking', () => {
       });
     });
 
-    it('does not bind to clicks on elements without [data-track-event]', () => {
-      document.querySelector('[data-track-eventbogus="click_bogusinput"]').click();
+    it(`does not bind to clicks on elements without [data-track-${term}]`, () => {
+      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-event="click_input2"]').click();
+      document.querySelector(`[data-track-${term}="click_input2"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', {
         value: '_value_override_',
@@ -217,7 +221,7 @@ describe('Tracking', () => {
     });
 
     it('handles checkbox values correctly', () => {
-      const checkbox = document.querySelector('[data-track-event="toggle_checkbox"]');
+      const checkbox = document.querySelector(`[data-track-${term}="toggle_checkbox"]`);
 
       checkbox.click(); // unchecking
 
@@ -233,7 +237,7 @@ describe('Tracking', () => {
     });
 
     it('handles bootstrap dropdowns', () => {
-      const dropdown = document.querySelector('[data-track-event="toggle_dropdown"]');
+      const dropdown = document.querySelector(`[data-track-${term}="toggle_dropdown"]`);
 
       dropdown.dispatchEvent(new Event('show.bs.dropdown', { bubbles: true }));
 
@@ -258,7 +262,7 @@ describe('Tracking', () => {
       };
       getExperimentData.mockReturnValue(mockExperimentData);
 
-      document.querySelector('[data-track-event="click_input3"]').click();
+      document.querySelector(`[data-track-${term}="click_input3"]`).click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input3', {
         value: '_value_',
@@ -267,22 +271,26 @@ describe('Tracking', () => {
     });
   });
 
-  describe('tracking page loaded events', () => {
+  describe.each`
+    term
+    ${'event'}
+    ${'action'}
+  `('tracking page loaded events with -$term', ({ term }) => {
     let eventSpy;
 
     beforeEach(() => {
       eventSpy = jest.spyOn(Tracking, 'event');
       setHTMLFixture(`
-        <input data-track-event="render" data-track-label="label1" value="_value_" data-track-property="_property_"/>
-        <span data-track-event="render" data-track-label="label2" data-track-value="_value_">
+        <input data-track-${term}="render" data-track-label="label1" value="_value_" data-track-property="_property_"/>
+        <span data-track-${term}="render" data-track-label="label2" data-track-value="_value_">
           Something
         </span>
-        <input data-track-event="_render_bogus_" data-track-label="label3" value="_value_" data-track-property="_property_"/>
+        <input data-track-${term}="_render_bogus_" data-track-label="label3" value="_value_" data-track-property="_property_"/>
       `);
       Tracking.trackLoadEvents('_category_'); // only happens once
     });
 
-    it('sends tracking events when [data-track-event="render"] is on an element', () => {
+    it(`sends tracking events when [data-track-${term}="render"] is on an element`, () => {
       expect(eventSpy.mock.calls).toEqual([
         [
           '_category_',