@guardian/ophan-tracker-js 2.2.4 → 2.2.6

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/NPM-dist/types/types/event.d.ts

@@ -1,12 +1,12 @@
-import type { Consent } from './consent.js';
+import type { AbTestInfo } from './abtest.js';
+import type { Acquisition } from './acquisition.js';
 import type { ComponentEvent } from './component-event.js';
+import type { Consent } from './consent.js';
 import type { InPageClick } from './inpageclick.js';
-import type { AbTestInfo } from './abtest.js';
+import { Interaction } from './interaction.js';
 import type { AudioEvent, VideoEvent } from './media.js';
-import type { TMembershipTier, TSubscriptionType } from './subscription.js';
 import type { TPlatform } from './platform.js';
-import type { Acquisition } from './acquisition.js';
-import { Interaction } from './interaction.js';
+import type { TMembershipTier, TSubscriptionType } from './subscription.js';
 /**
  * Details about a page view - only populated for _PAGE_VIEW
  * event types
@@ -26,7 +26,7 @@ interface PageView {
     totalDaysVisited?: number;
     /** Calculated average days between recent visits */
     averageDaysBetweenRecentVisits?: number;
-    /** Is this browser a regular visitor to the Guardian */
+    /** No longer used in Ophan. Replaced by Frequency */
     regular?: boolean;
     subscriptionType?: TSubscriptionType;
     membershipTier?: TMembershipTier;

package/NPM-dist/types/types/product.d.ts

@@ -50,4 +50,4 @@ export type Product =
 /**
  * Supporter plus tier.
  */
- | "SUPPORTER_PLUS";
+ | "GUARDIAN_PATRON" | "SUPPORTER_PLUS";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/ophan-tracker-js",
-	"version": "2.2.4",
+	"version": "2.2.6",
 	"type": "module",
 	"engines": {
 		"node": ">=16"
@@ -11,6 +11,23 @@
 	],
 	"main": "NPM-dist/ng.js",
 	"types": "NPM-dist/types/ng.d.ts",
+	"exports": {
+		".": {
+			"import": "./NPM-dist/ng.js",
+			"types": "./NPM-dist/types/ng.d.ts"
+		},
+		"./MMA": {
+			"import": "./NPM-dist/manage-my-account.js",
+			"types": "./NPM-dist/types/manage-my-account.d.ts"
+		}
+	},
+	"typesVersions": {
+		"*": {
+			"MMA": [
+				"NPM-dist/types/manage-my-account.d.ts"
+			]
+		}
+	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.22.10",
 		"@babel/preset-typescript": "^7.24.7",

package/NPM-dist/types/types/utmparameters.d.ts

@@ -1,26 +0,0 @@
-/**
- * A set of UTM parameters
- * https://en.wikipedia.org/wiki/UTM_parameters
- */
-interface UtmParameters {
-    /**
-     * Identifies which site sent the traffic
-     */
-    utmSource?: string;
-    /**
-     * Identifies what type of link was used, such as cost per click or email.
-     */
-    utmMedium?: string;
-    /**
-     * Identifies a specific product promotion or strategic campaign.
-     */
-    utmCampaign?: string;
-    /**
-     * Identifies search terms.
-     */
-    utmTerm?: string;
-    /**
-     * Identifies what specifically was clicked to bring the user to the site, such as a banner ad or a text link. It is often used for A/B testing and content-targeted ads.
-     */
-    utmContent?: string;
-}

package/NPM-dist/types/utmparameters.js

@@ -1 +0,0 @@
-"use strict";