@guardian/ophan-tracker-js 2.2.4 → 2.2.5

package/NPM-dist/click-path-capture.js

@@ -41,28 +41,43 @@ const getDataLinkNames = (el, dataLinkNames = []) => {
 };
 if (typeof document.addEventListener === 'function') {
     document.addEventListener('click', function (e) {
-        let anchorTarget, info;
-        anchorTarget = validAncestorAnchorElement(e.target);
-        if (!anchorTarget) {
-            // If no anchor element was clicked, exit early.
+        let target = e.target;
+        let info;
+        // For anchors, use validAncestorAnchorElement
+        const anchorTarget = validAncestorAnchorElement(target);
+        const nonTrackableElements = [
+            'div',
+            'span',
+            'p',
+            'section',
+            'article',
+            'main',
+            'header',
+            'footer',
+            'nav',
+        ];
+        if (nonTrackableElements.includes(target.tagName.toLowerCase()) &&
+            !anchorTarget) {
             return;
         }
+        // If it's an anchor, use anchorTarget, otherwise use the original target
+        const trackingTarget = anchorTarget || target;
         info = {
             from: [location.protocol, '//', location.host, location.pathname].join(''),
-            to: anchorTarget ? anchorTarget.href : void 0,
-            referringComponent: getContainingComponent(e.target),
-            referringDataLinkNames: getDataLinkNames(e.target),
+            to: trackingTarget.href || undefined,
+            referringComponent: getContainingComponent(trackingTarget),
+            referringDataLinkNames: getDataLinkNames(trackingTarget),
             refPlatform: ophan.servingPlatform(),
             refViewId: ophan.viewId,
         };
-        if (info.referringDataLinkNames != null) {
+        if (info.referringDataLinkNames && info.referringDataLinkNames.length > 0) {
             transmit.sendMore({
                 clickComponent: info.referringComponent,
                 clickLinkNames: info.referringDataLinkNames,
             });
         }
-        if (anchorTarget != null) {
-            // then we may be about to navigate away from this page, so store to send on next request
+        if (anchorTarget) {
+            // If it's an anchor, we may be about to navigate away from this page, so store to send on next request
             return ophan.storeDataToSendOnNextEvent(info);
         }
     }, false);

package/NPM-dist/tests/click-path-capture.test.js

@@ -1,4 +1,4 @@
-import clickPathCapture, { getContainingComponent, validAncestorAnchorElement } from '../click-path-capture.js';
+import clickPathCapture, { getContainingComponent, validAncestorAnchorElement, } from '../click-path-capture.js';
 import ophan from '../core.js';
 import transmit from '../transmit.js';
 const { getDataLinkNames } = clickPathCapture;
@@ -11,6 +11,8 @@ describe('click-path-capture.js', () => {
                         <span id="testElement1"></span>
                     </a>
                     <span id="nonLinkElement">Non-link element</span>
+                    <button id="testButton" data-link-name="buttonLink" data-component="buttonComponent">Click Me</button>
+                    <label id="testLabel" data-link-name="labelLink" data-component="labelComponent">Label Text</label>
                 </div>
             </div>
             <div id="testElement2" data-component="component2"></div>
@@ -46,7 +48,7 @@ describe('click-path-capture.js', () => {
                 </div>
             `;
             const element = document.getElementById('testElement1');
-            expect(getContainingComponent(element)).toBe("nested-component");
+            expect(getContainingComponent(element)).toBe('nested-component');
         });
     });
     describe('getDataLinkNames', () => {
@@ -62,8 +64,13 @@ describe('click-path-capture.js', () => {
     describe('click event handling', () => {
         let transmitSendMoreSpy, ophanStoreDataToSendOnNextEventSpy;
         beforeEach(() => {
-            transmitSendMoreSpy = jest.spyOn(transmit, 'sendMore').mockImplementation(() => { });
-            ophanStoreDataToSendOnNextEventSpy = jest.spyOn(ophan, 'storeDataToSendOnNextEvent').mockImplementation(() => { });
+            jest.clearAllMocks();
+            transmitSendMoreSpy = jest
+                .spyOn(transmit, 'sendMore')
+                .mockImplementation(() => { });
+            ophanStoreDataToSendOnNextEventSpy = jest
+                .spyOn(ophan, 'storeDataToSendOnNextEvent')
+                .mockImplementation(() => { });
         });
         afterEach(() => {
             jest.clearAllMocks();
@@ -71,9 +78,36 @@ describe('click-path-capture.js', () => {
         test('should send request and store data when a link is clicked', () => {
             const element = document.getElementById('testElement1');
             element.click();
-            expect(transmitSendMoreSpy).toHaveBeenCalled();
+            expect(transmitSendMoreSpy).toHaveBeenCalledWith({
+                clickComponent: 'component1',
+                clickLinkNames: ['link1'],
+            });
             expect(ophanStoreDataToSendOnNextEventSpy).toHaveBeenCalled();
         });
+        test('should send request but not store data when a button is clicked', () => {
+            const element = document.getElementById('testButton');
+            element.click();
+            expect(transmitSendMoreSpy).toHaveBeenCalledWith({
+                clickComponent: 'buttonComponent',
+                clickLinkNames: ['buttonLink'],
+            });
+            expect(ophanStoreDataToSendOnNextEventSpy).not.toHaveBeenCalled();
+        });
+        test('should send request but not store data when a label is clicked', () => {
+            const element = document.getElementById('testLabel');
+            element.click();
+            expect(transmitSendMoreSpy).toHaveBeenCalledWith({
+                clickComponent: 'labelComponent',
+                clickLinkNames: ['labelLink'],
+            });
+            expect(ophanStoreDataToSendOnNextEventSpy).not.toHaveBeenCalled();
+        });
+        test('should not send request when a non-trackable element is clicked', () => {
+            const element = document.getElementById('nonLinkElement');
+            element.click();
+            expect(transmitSendMoreSpy).not.toHaveBeenCalled();
+            expect(ophanStoreDataToSendOnNextEventSpy).not.toHaveBeenCalled();
+        });
         test('should not send request when a non-link element within a container is clicked', () => {
             const element = document.getElementById('testElement4');
             element.click();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/ophan-tracker-js",
-	"version": "2.2.4",
+	"version": "2.2.5",
 	"type": "module",
 	"engines": {
 		"node": ">=16"