Skip to content

G
gitlab-ce
Commit ac6027fb authored by Axel García's avatar Axel García
Browse files
Options

Drop support for data-track-event 

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/70234
parent 44cf50ef
Hide whitespace changes
Inline Side-by-side
Showing with 30 additions and 48 deletions
app/assets/javascripts/tracking/constants.js
View file @ ac6027fb
......@@ -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
View file @ ac6027fb
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
View file @ ac6027fb
......@@ -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
View file @ ac6027fb
......@@ -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
View file @ ac6027fb
......@@ -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
View file @ ac6027fb
......@@ -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|
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7