Support clicks on child elements in button click tracking (close snowplow#1280)

PR snowplow#1281 --------- Co-authored-by: Jethro Nederhof <jethro.nederhof@snowplowanalytics.com>

Author: matus-tomlein

common/changes/@snowplow/browser-plugin-button-click-tracking/issue-button_click_with_children_2024-01-10-09-46.json

@@ -0,0 +1,10 @@
+{
+ "changes": [
+ {
+ "packageName": "@snowplow/browser-plugin-button-click-tracking",
+ "comment": "Support clicks on child elements in button click tracking (#1280)",
+ "type": "none"
+ }
+ ],
+ "packageName": "@snowplow/browser-plugin-button-click-tracking"
+}

common/changes/@snowplow/javascript-tracker/issue-button_click_with_children_2024-01-10-09-46.json

@@ -0,0 +1,10 @@
+{
+ "changes": [
+ {
+ "packageName": "@snowplow/javascript-tracker",
+ "comment": "Support clicks on child elements in button click tracking (#1280)",
+ "type": "none"
+ }
+ ],
+ "packageName": "@snowplow/javascript-tracker"
+}

plugins/browser-plugin-button-click-tracking/src/api.ts

@@ -97,12 +97,18 @@ export function disableButtonClickTracking() {
  * @param context - The dynamic context which will be evaluated for each button click event
  */
 function eventHandler(event: MouseEvent, trackerId: string, filter: FilterFunction, context?: DynamicContext) {
- const elem = event.target as HTMLElement;
- if (elem.tagName === 'BUTTON' || (elem.tagName === 'INPUT' && (elem as HTMLInputElement).type === 'button')) {
- if (filter(elem)) {
- const buttonClickEvent = createEventFromButton(elem as HTMLButtonElement | HTMLInputElement);
- buttonClickEvent.context = resolveDynamicContext(context, buttonClickEvent);
- trackButtonClick(buttonClickEvent, [trackerId]);
+ let elem = event.target as HTMLElement | null;
+ while (elem) {
+ if (elem instanceof HTMLButtonElement || (elem instanceof HTMLInputElement && elem.type === 'button')) {
+ if (filter(elem)) {
+ const buttonClickEvent = createEventFromButton(elem);
+ buttonClickEvent.context = resolveDynamicContext(context, buttonClickEvent);
+ trackButtonClick(buttonClickEvent, [trackerId]);
+ }
+ // presume nested buttons aren't a thing
+ return;
  }
+
+ elem = elem.parentElement;
  }
 }

trackers/javascript-tracker/test/integration/buttonClick.test.ts

@@ -65,6 +65,10 @@ describe('Snowplow Micro integration', () => {
  await (await $('#button7')).click();
  await browser.pause(500);
 
+ // Nested child
+ await (await $('#button-child')).click();
+ await browser.pause(500);
+
  // Disable/enable
 
  await (await $('#disable')).click();
@@ -131,6 +135,11 @@ describe('Snowplow Micro integration', () => {
  logContainsButtonClick(ev);
  });
 
+ it('should get button when click was on a child element', async () => {
+ const ev = makeEvent({ label: 'TestChildren' }, method);
+ logContainsButtonClick(ev);
+ });
+
  it('should not get disabled-click', () => {
  const ev = makeEvent({ id: 'disabled-click', label: 'DisabledClick' }, method);
  expect(logContains(ev)).toBe(false);

trackers/javascript-tracker/test/pages/button-click-tracking.html

@@ -33,6 +33,9 @@
  <!-- A button that adds a new button dynamically -->
  <button id="addDynamic" onclick="addDynamicButton()">AddButton</button>
 
+ <!-- Ensure button tracked when children are clicked -->
+ <button><span id="button-child">TestChildren</span></button>
+
  <!-- Enable/disable testing -->
  <button id="disable" onclick="snowplow('disableButtonClickTracking')">Disable</button>
  <button id="disabled-click">DisabledClick</button>