fix: track clicks on elements nested inside trackable elements

Author: Sam Grace

cypress/integration/basic_spec.js

@@ -28,4 +28,9 @@ describe('Festicket Analytics', () => {
       payload: 'payload',
     });
   });
+
+  it('should track clicks on elements that are children of track-able elements', () => {
+    cy.get('[data-cy=nested-span]').click();
+    cy.get('@track').should('be.called');
+  });
 });

src/closest-polyfill.js

@@ -0,0 +1,21 @@
+/**
+ * Element.closest polyfill
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+ */
+
+if (!Element.prototype.matches)
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function closest(s) {
+    let el = this;
+    if (!document.documentElement.contains(el)) return null;
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}

src/index.js

@@ -1,3 +1,4 @@
+import './closest-polyfill';
 import loadScript from './load-script';
 
 // Lower case the first character of any string
@@ -48,12 +49,16 @@ function aliasFactory(key) {
 // Handle click events
 async function eventHandle(track, key, e) {
   // Only track elements with data-analytics=true
-  if (!e.target.dataset.analytics) {
+  // Use `Element.closest` because the clicked element may be a child
+  // of an element with data-analytics=true on it.
+  const target = e.target.closest('[data-analytics=true]');
+
+  if (!target) {
     return;
   }
 
   // Strip data-analytics=true
-  const { analytics, analyticsEvent, ...data } = e.target.dataset;
+  const { analytics, analyticsEvent, ...data } = target.dataset;
 
   // Map through the data props and only use data-analytics-* as the data payload
   const payloadData = Object.keys(data).reduce((result, propName) => {
@@ -67,7 +72,7 @@ async function eventHandle(track, key, e) {
   }, {});
 
   // construct our event payload with { elementId: element.id }
-  const elementData = e.target.id ? { elementId: e.target.id } : {};
+  const elementData = target.id ? { elementId: target.id } : {};
 
   // Actually track our event
   await track(analyticsEvent, { ...payloadData, ...elementData });

test/index.html

@@ -22,6 +22,9 @@
     >
       This should fire analytics with data
     </button>
+    <a data-analytics="true">
+      <span data-cy="nested-span">Clicking here should fire analytics</span>
+    </a>
   </body>
   <script src="http://localhost:8080/runner.js"></script>
 </html>