Use document-level listener

snowplow · Nov 24, 2023 · 9440fa3 · 9440fa3
1 parent 5db40c9
commit 9440fa3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/plugins/browser-plugin-button-click-tracking/src/api.ts b/plugins/browser-plugin-button-click-tracking/src/api.ts
@@ -117,18 +117,12 @@ export function addListenersToButtonElements(
   context?: DynamicContext,
   document = window.document
 ) {
-  const addListener = (button: HTMLButtonElement | HTMLInputElement) => {
-    button.addEventListener('click', () => {
-      clickHandler(trackerId, button, context);
-    });
-  };
-
-  // Add listeners to <button> elements
-  Array.from(document.getElementsByTagName('button')).filter(filter).forEach(addListener);
-
-  // Add listeners to <input type="button"> elements
-  Array.from(document.getElementsByTagName('input'))
-    .filter((input) => input.type === 'button')
-    .filter(filter)
-    .forEach(addListener);
+  document.addEventListener('click', (event) => {
+    const elem = event.target as HTMLElement;
+    if (elem.tagName === 'BUTTON' || (elem.tagName === 'INPUT' && (elem as HTMLInputElement).type === 'button')) {
+      if (filter(elem)) {
+        clickHandler(trackerId, elem as HTMLButtonElement | HTMLInputElement, context);
+      }
+    }
+  });
 }
diff --git a/trackers/javascript-tracker/test/integration/buttonClick.test.ts b/trackers/javascript-tracker/test/integration/buttonClick.test.ts
@@ -59,28 +59,43 @@ describe('Snowplow Micro integration', () => {
       await (await $(`#button${i}`)).click();
       await browser.pause(50);
     }
+    // Dynamic button
+    await (await $('#addDynamic')).click();
+    await browser.pause(500);
+    await (await $('#button7')).click();
+
     await browser.pause(5000); // Time for requests to get written
 
     await loadUrlAndWait('/button-click-tracking.html?eventMethod=post');
     for (let i = 1; i < nButtons; i++) {
       await (await $(`#button${i}`)).click();
       await browser.pause(50);
     }
+    // Dynamic button
+    await (await $('#addDynamic')).click();
+    await browser.pause(500);
+    await (await $('#button7')).click();
+
     await browser.pause(6000); // Time for requests to get written
 
     await loadUrlAndWait('/button-click-tracking.html?eventMethod=beacon');
     for (let i = 1; i < nButtons; i++) {
       await (await $(`#button${i}`)).click();
       await browser.pause(50);
     }
+    // Dynamic button
+    await (await $('#addDynamic')).click();
+    await browser.pause(500);
+    await (await $('#button7')).click();
+
     await browser.pause(6000); // Time for requests to get written
 
     log = await browser.call(async () => await fetchResults());
   });
 
   eventMethods.forEach((method) => {
     it('should have received all events', () => {
-      expect(log.length).toEqual(18);
+      expect(log.length).toEqual(24);
     });
 
     it('should get button1', () => {
@@ -90,7 +105,6 @@ describe('Snowplow Micro integration', () => {
 
     it('should get button2', () => {
       const ev = makeEvent({ id: 'button2', label: 'TestButtonWithClass', classes: ['test-class'] }, method);
-      console.log(JSON.stringify(log.filter((e) => e.event.unstruct_event.data.data.label === 'TestButtonWithClass')));
       logContainsButtonClick(ev);
     });
 
@@ -116,5 +130,12 @@ describe('Snowplow Micro integration', () => {
       const ev = makeEvent({ id: 'button6', label: 'TestInputButton' }, method);
       logContainsButtonClick(ev);
     });
+
+    it('should get button7 after it is added dynamically', async () => {
+      const ev = makeEvent({ id: 'button7', label: 'TestDynamicButton-' + method }, method);
+      // get event from log
+      console.log(log.filter((e) => e.event.unstruct_event.data.data.label === 'TestDynamicButton-' + method));
+      logContainsButtonClick(ev);
+    });
   });
 });
diff --git a/trackers/javascript-tracker/test/pages/button-click-tracking.html b/trackers/javascript-tracker/test/pages/button-click-tracking.html
@@ -30,12 +30,25 @@
     <!-- Test to ensure input buttons work -->
     <input id="button6" type="button" value="TestInputButton" />
 
+    <!-- A button that adds a new button dynamically -->
+    <button id="addDynamic" onclick="addDynamicButton()">AddButton</button>
+
     <script>
       var collector_endpoint = document.cookie.split('container=')[1].split(';')[0];
       var testIdentifier = document.cookie.split('testIdentifier=')[1].split(';')[0].trim();
       document.body.className += ' loaded';
     </script>
 
+    <script>
+      function addDynamicButton() {
+        // Add a new dynamic button
+        const newButton = document.createElement('button');
+        newButton.id = 'button7';
+        newButton.innerText = 'TestDynamicButton-' + parseQuery().eventMethod;
+        document.body.appendChild(newButton);
+      }
+    </script>
+
     <script>
       (function (p, l, o, w, i, n, g) {
         if (!p[i]) {
@@ -57,6 +70,7 @@
 
       snowplow('newTracker', 'sp', collector_endpoint, {
         appId: 'button-click-tracking-' + testIdentifier,
+        method: parseQuery().eventMethod,
       });
       snowplow(function () {
         document.getElementById('init').innerText = 'true';