@guardian/ophan-tracker-js 2.1.0 → 2.1.1-next.1

package/dist/assets/ng.js

@@ -0,0 +1,53 @@
+// Generated by CoffeeScript 2.7.0
+var ref;
+import core from './core.js';
+import transmit from './transmit.js';
+import attention from './attention.js';
+import visibility from './visibility.js';
+import privatebrowsing from './privatebrowsing.js';
+import heatmap from './heatmap.js';
+import './click-path-capture.js';
+import './perf.js';
+import './iframe-tracking.js';
+export * from '../types/abtest';
+export * from '../types/acquisition';
+export * from '../types/subscription';
+export * from '../types/interaction';
+export * from '../types/inpageclick';
+export * from '../types/printproduct';
+export * from '../types/product';
+export * from '../types/platform';
+export * from '../types/media';
+export * from '../types/consent';
+export * from '../types/component-type';
+export * from '../types/component-event';
+export * from '../types/event';
+// TODO:
+// pageViewId is used for Google Analytics on frontend, membership and some of the jobs sites.
+// If we can migrate these to use viewId instead then pageViewId can safely be removed
+/** @typedef {import("../types/event.ts").EventPayload} EventPayload */
+/** @type {{record: (event: EventPayload, callback?: Function) => void, pageViewId: string, viewId: string, trackComponentAttention: (name: string, el: HTMLElement, visibilityThreshold: number) => void, setEventEmitter: (event: Object) => void}} */
+let ng;
+if (window.guardian && window.guardian.ophan) {
+    ng = window.guardian.ophan;
+}
+else {
+    core.init('next-gen');
+    privatebrowsing.init();
+    heatmap.init();
+    if (window.addEventListener) {
+        attention.init(visibility);
+    }
+    if (!window.guardian) {
+        window.guardian = {};
+    }
+    window.guardian.ophan = {
+        setEventEmitter: attention.setEventEmitter,
+        trackComponentAttention: attention.initComponent,
+        record: transmit.sendMore,
+        viewId: transmit.viewId,
+        pageViewId: transmit.viewId
+    };
+    ng = window.guardian.ophan;
+}
+export default ng;

package/dist/assets/perf.d.ts

@@ -0,0 +1,3 @@
+export default perf;
+declare const perf: Performance;
+//# sourceMappingURL=perf.d.ts.map

package/dist/assets/perf.js

@@ -0,0 +1,36 @@
+// Generated by CoffeeScript 2.7.0
+import core from './core.js';
+const perf = window.performance ||
+    window.msPerformance ||
+    window.webkitPerformance ||
+    window.mozPerformance;
+const sendTimingData = () => {
+    const t = perf?.timing;
+    if (t) {
+        return {
+            performance: {
+                // Time required for domain lookup.
+                dns: t.domainLookupEnd - t.domainLookupStart,
+                // Time to establish a connection to server.
+                connection: t.connectEnd - t.connectStart,
+                // From connection established to first byte of data.
+                firstByte: t.responseStart - t.connectEnd,
+                // First byte to last byte, or closed, including if from cache.
+                lastByte: t.responseEnd - t.responseStart,
+                // From last byte of doc to start of domContentLoaded
+                domContentLoadedEvent: t.domContentLoadedEventStart - t.responseEnd,
+                // domcontentLoaded to start of load event.
+                loadEvent: t.loadEventStart - t.domContentLoadedEventStart,
+                // click, back/forward, etc...
+                navType: perf.navigation.type,
+                // No. of redirects on current domain.
+                redirectCount: perf.navigation.redirectCount,
+            },
+        };
+    }
+    else {
+        return {};
+    }
+};
+core.onLoadCapture(sendTimingData);
+export default perf;

package/dist/assets/privatebrowsing.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export function init(): void;
+    export { privateBrowsingMode };
+}
+export default _default;
+declare function privateBrowsingMode(callback: any): void;
+//# sourceMappingURL=privatebrowsing.d.ts.map

package/dist/assets/privatebrowsing.js

@@ -0,0 +1,66 @@
+import transmit from './transmit.js';
+/*
+    TO-DO:
+    This function could probably be simplified with an async function.
+    It basically returns a `boolean`, but uses a callback to do so... I can only guess it’s because of [`requestFileSystem`’s signature](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestFileSystem).
+ */
+const privateBrowsingMode = (callback) => {
+    const reportNormalMode = () => callback(false);
+    const reportPrivateMode = () => callback(true);
+    const tryLocalStorage = () => {
+        try {
+            if (localStorage.length) {
+                reportNormalMode();
+            }
+            else {
+                localStorage.x = 1;
+                localStorage.removeItem('x');
+                reportNormalMode();
+            }
+        }
+        catch (error) {
+            reportPrivateMode();
+        }
+    };
+    const tryIndexedDB = () => {
+        try {
+            const db = indexedDB.open('test');
+            db.onsuccess = reportNormalMode;
+            db.onerror = reportPrivateMode;
+        }
+        catch (error) {
+            reportPrivateMode();
+        }
+    };
+    // Blink
+    if (window.webkitRequestFileSystem) {
+        window.webkitRequestFileSystem(window.TEMPORARY, 1, reportNormalMode, reportPrivateMode);
+        // Firefox
+    }
+    else if ('MozAppearance' in document.documentElement.style) {
+        tryIndexedDB();
+        // Safari
+    }
+    else if (/constructor/i.test(window.HTMLElement)) {
+        tryLocalStorage();
+    }
+    else if (!window.indexedDB &&
+        (window.PointerEvent || window.MSPointerEvent)) {
+        reportPrivateMode();
+    }
+    else {
+        // Rest
+        reportNormalMode();
+    }
+};
+export default {
+    init() {
+        privateBrowsingMode((value) => {
+            const report = {
+                inPrivateBrowsingMode: value,
+            };
+            transmit.sendMore(report);
+        });
+    },
+    privateBrowsingMode,
+};

package/dist/assets/r2.d.ts

@@ -0,0 +1,5 @@
+declare namespace _default {
+    let viewId: any;
+}
+export default _default;
+//# sourceMappingURL=r2.d.ts.map

package/{assets → dist/assets}/r2.js

@@ -1,24 +1,15 @@
 // Generated by CoffeeScript 2.7.0
 import core from './core.js';
-
 import transmit from './transmit.js';
-
 import attention from './attention.js';
-
 import visibility from './visibility.js';
-
 import './click-path-capture.js';
-
 import './perf.js';
-
 import './campaign.js';
-
 core.init('r2');
-
 if (window.addEventListener != null) {
-	attention.init(visibility);
+    attention.init(visibility);
 }
-
 export default {
-	viewId: transmit.viewId,
+    viewId: transmit.viewId,
 };

package/dist/assets/smart-news.d.ts

@@ -0,0 +1,6 @@
+declare namespace _default {
+    let record: (obj: import("../types/event.js").EventPayload, f?: Function | undefined) => void;
+    let viewId: any;
+}
+export default _default;
+//# sourceMappingURL=smart-news.d.ts.map

package/{assets → dist/assets}/smart-news.js

@@ -1,19 +1,13 @@
 // Generated by CoffeeScript 2.7.0
 import core from './core.js';
-
 import transmit from './transmit.js';
-
 import attention from './attention.js';
-
 import visibility from './visibility.js';
-
 core.init('smart-news');
-
 if (window.addEventListener != null) {
-	attention.init(visibility);
+    attention.init(visibility);
 }
-
 export default {
-	record: transmit.sendMore,
-	viewId: transmit.viewId,
+    record: transmit.sendMore,
+    viewId: transmit.viewId,
 };

package/dist/assets/support.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    export { init };
+    export { sendInitialEvent };
+    export let record: (obj: import("../types/event.js").EventPayload, f?: Function | undefined) => void;
+    export let viewId: any;
+}
+export default _default;
+declare function init(): void;
+declare function sendInitialEvent(url?: string, referrer?: string): void;
+//# sourceMappingURL=support.d.ts.map

package/dist/assets/support.js

@@ -0,0 +1,28 @@
+import core from './core.js';
+import transmit from './transmit.js';
+import attention from './attention.js';
+import visibility from './visibility.js';
+import './click-path-capture.js';
+import './perf.js';
+import './campaign.js';
+const init = () => {
+    core.init('support');
+    if (window.addEventListener) {
+        attention.init(visibility);
+    }
+};
+const sendInitialEvent = (url = location.href, referrer = document.referrer) => {
+    try {
+        transmit.bumpViewId();
+        core.sendInitialEvent(null, url, referrer);
+    }
+    catch (error) {
+        console.log(error);
+    }
+};
+export default {
+    init,
+    sendInitialEvent,
+    record: transmit.sendMore,
+    viewId: transmit.viewId,
+};

package/dist/assets/tests/click-path-capture.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=click-path-capture.test.d.ts.map

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

@@ -0,0 +1,44 @@
+import clickPathCapture, { validAncestorAnchorElement, getContainingComponent } from '../click-path-capture.js';
+const { getDataLinkNames } = clickPathCapture;
+describe('click-path-capture.js', () => {
+    beforeAll(() => {
+        document.body.innerHTML = `
+            <div data-component="component1">
+                <a href="#" data-link-name="link1">
+                    <span id="testElement1"></span>
+                </a>
+            </div>
+            <div id="testElement2" data-component="component2"></div>
+        `;
+    });
+    describe('validAncestorAnchorElement', () => {
+        test('should return the ancestor anchor element', () => {
+            const element = document.getElementById('testElement1');
+            expect(validAncestorAnchorElement(element)).toBe(element.closest('a'));
+        });
+        test('should return null when no anchor ancestor is present', () => {
+            const element = document.getElementById('testElement2');
+            expect(validAncestorAnchorElement(element)).toBeNull();
+        });
+    });
+    describe('getContainingComponent', () => {
+        test('should find the parent element with data-component attribute', () => {
+            const element = document.getElementById('testElement1');
+            expect(getContainingComponent(element)).toBe('component1');
+        });
+        test('should return null if no data-component parent is found', () => {
+            const element = document.createElement('div');
+            expect(getContainingComponent(element)).toBeNull();
+        });
+    });
+    describe('getDataLinkNames', () => {
+        test('should collect data-link-name attributes from ancestors', () => {
+            const element = document.getElementById('testElement1');
+            expect(getDataLinkNames(element)).toEqual(['link1']);
+        });
+        test('should return an empty array when no data-link-name attributes are present', () => {
+            const element = document.getElementById('testElement2');
+            expect(getDataLinkNames(element)).toEqual([]);
+        });
+    });
+});

package/dist/assets/tests/components.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=components.test.d.ts.map

package/dist/assets/tests/components.test.js

@@ -0,0 +1,47 @@
+import { default as testExports } from '../components.js';
+import { components } from "../components.js";
+const { startMonitoring, stopMonitoring, getAttentionTimes } = testExports;
+describe('components.js', () => {
+    beforeEach(() => {
+        components.length = 0;
+        components.push({
+            name: 'comp1',
+            isVisible: jest.fn().mockReturnValue(true),
+            makeActive: jest.fn(),
+            makeInactive: jest.fn(),
+            hadAttentionSinceLastGet: jest.fn().mockReturnValue(true),
+            getAttentionTime: jest.fn().mockReturnValue(123),
+        });
+        components.push({
+            name: 'comp2',
+            isVisible: jest.fn().mockReturnValue(true),
+            makeActive: jest.fn(),
+            makeInactive: jest.fn(),
+            hadAttentionSinceLastGet: jest.fn().mockReturnValue(true),
+            getAttentionTime: jest.fn().mockReturnValue(123),
+        });
+    });
+    test('startMonitoring activates visible components', () => {
+        components[0].isVisible.mockReturnValue(true);
+        components[1].isVisible.mockReturnValue(false);
+        const results = startMonitoring();
+        expect(components[0].makeActive).toHaveBeenCalled();
+        expect(components[1].makeActive).not.toHaveBeenCalled();
+        expect(results).toHaveLength(1);
+    });
+    test('stopMonitoring deactivates all components', () => {
+        const results = stopMonitoring();
+        components.forEach((component) => {
+            expect(component.makeInactive).toHaveBeenCalled();
+        });
+        expect(results).toHaveLength(components.length);
+    });
+    test('getAttentionTimes returns attention times for components with attention', () => {
+        components[0].hadAttentionSinceLastGet.mockReturnValue(true);
+        components[0].getAttentionTime.mockReturnValue(123);
+        components[1].hadAttentionSinceLastGet.mockReturnValue(false);
+        const attentionTimes = getAttentionTimes();
+        expect(attentionTimes).toEqual({ comp1: 123 });
+        expect(components[1].getAttentionTime).not.toHaveBeenCalled();
+    });
+});

package/dist/assets/tests/core.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=core.test.d.ts.map

package/dist/assets/tests/core.test.js

@@ -0,0 +1,161 @@
+import { _testExports } from '../core.js';
+import transmit from '../transmit.js';
+const mockSendMore = jest.fn();
+transmit.sendMore = mockSendMore;
+const { getQueryParameterValue, appendComponentDataToEvent, trimComponentNamesToUrlSafeLength, onLoadCapture, onLoadCaptures, processCaptures, appendContentType, } = _testExports;
+describe('appendComponentDataToEvent', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should append unique, trimmed component names to event', () => {
+        document.querySelectorAll = jest.fn().mockReturnValue([
+            {
+                getAttribute: () => 'longComponentNameThatExceedsLimit................................................',
+            },
+            { getAttribute: () => 'shortName' },
+            {
+                getAttribute: () => 'longComponentNameThatExceedsLimit................................................',
+            },
+        ]);
+        const event = {};
+        appendComponentDataToEvent(event);
+        expect(document.querySelectorAll).toHaveBeenCalledWith('[data-component]');
+        const expectedTrimmedNames = [
+            'longComponentNameThatExceedsLimit.................…',
+            'shortName',
+        ];
+        expect(event.renderedComponents).toEqual(expectedTrimmedNames);
+    });
+    it('should not modify event if no components are found', () => {
+        document.querySelectorAll = jest.fn().mockReturnValue([]);
+        const event = {};
+        appendComponentDataToEvent(event);
+        expect(event).not.toHaveProperty('renderedComponents');
+    });
+    it('should correctly trim component names exceeding maximum length', () => {
+        const componentNames = [
+            'veryLongComponentName................................................',
+            'shortName',
+        ];
+        const trimmedNames = trimComponentNamesToUrlSafeLength(componentNames);
+        expect(trimmedNames).toEqual([
+            'veryLongComponentName.............................…',
+            'shortName',
+        ]);
+    });
+});
+describe('getQueryParameterValue', () => {
+    const originalLocation = window.location;
+    beforeEach(() => {
+        delete window.location;
+        window.location = { search: '' };
+    });
+    afterEach(() => {
+        window.location = originalLocation;
+    });
+    it('should return the value of a given query parameter', () => {
+        window.location.search = '?param1=value1&param2=value2';
+        const value = getQueryParameterValue('param1');
+        expect(value).toBe('value1');
+    });
+    it('should return undefined if the parameter is not found', () => {
+        window.location.search = '?param1=value1&param2=value2';
+        const value = getQueryParameterValue('param3');
+        expect(value).toBeUndefined();
+    });
+    it('should correctly decode URI-encoded values', () => {
+        window.location.search = '?param=encoded%20value';
+        const value = getQueryParameterValue('param');
+        expect(value).toBe('encoded value');
+    });
+    it('should handle cases where the query string is empty', () => {
+        window.location.search = '';
+        const value = getQueryParameterValue('param');
+        expect(value).toBeUndefined();
+    });
+});
+describe('onLoadCapture', () => {
+    beforeEach(() => {
+        Object.defineProperty(document, 'readyState', {
+            configurable: true,
+            get() {
+                return this._readyState;
+            },
+            set(value) {
+                this._readyState = value;
+            },
+        });
+        document.readyState = 'loading';
+        onLoadCaptures.length = 0;
+        jest.clearAllMocks();
+    });
+    it('should add dataCapture to onLoadCaptures if document is not ready', () => {
+        const dataCapture = jest.fn();
+        onLoadCapture(dataCapture);
+        expect(onLoadCaptures).toContain(dataCapture);
+    });
+    it('should call dataCapture and sendMore if document is ready', () => {
+        document.readyState = 'complete';
+        const dataCapture = jest.fn().mockReturnValue({
+            performance: {
+                dns: 50,
+                connection: 100,
+                firstByte: 200,
+                lastByte: 300,
+                domContentLoadedEvent: 400,
+                loadEvent: 500,
+                navType: 1,
+                redirectCount: 2
+            }
+        });
+        onLoadCapture(dataCapture);
+        expect(dataCapture).toHaveBeenCalled();
+        expect(transmit.sendMore).toHaveBeenCalledWith({
+            performance: {
+                dns: 50,
+                connection: 100,
+                firstByte: 200,
+                lastByte: 300,
+                domContentLoadedEvent: 400,
+                loadEvent: 500,
+                navType: 1,
+                redirectCount: 2
+            }
+        });
+    });
+});
+describe('processCaptures', () => {
+    beforeEach(() => {
+        onLoadCaptures.length = 0;
+        jest.clearAllMocks();
+    });
+    it('should call all dataCaptures and merge their output into the sendMore function', () => {
+        onLoadCaptures.push(() => ({ performance: { domContentLoadedEvent: 400, loadEvent: 500 } }));
+        processCaptures();
+        expect(transmit.sendMore).toHaveBeenCalledWith({
+            performance: {
+                domContentLoadedEvent: 400,
+                loadEvent: 500
+            }
+        });
+    });
+});
+describe('appendContentType', () => {
+    it('should set the lowercase content type for next-gen platform', () => {
+        const event = {};
+        const guardian = { config: { page: { contentType: 'Article' } } };
+        appendContentType(event, 'next-gen', guardian);
+        expect(event.contentType).toBe('article');
+    });
+    it('should set the lowercase content type for other platforms', () => {
+        const event = {};
+        const guardian = { page: { contentTypes: 'LiveBlog' } };
+        appendContentType(event, 'other', guardian);
+        expect(event.contentType).toBe('liveblog');
+    });
+    it('should not set content type if it is not available', () => {
+        const event = {};
+        appendContentType(event, 'next-gen', {});
+        expect(event.contentType).toBeUndefined();
+    });
+});

package/dist/assets/tests/heatmap.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=heatmap.test.d.ts.map

package/dist/assets/tests/heatmap.test.js

@@ -0,0 +1,45 @@
+"use strict";
+describe('Heatmap init', () => {
+    beforeEach(() => {
+        jest.resetModules();
+    });
+    it('should load the heatmap based on a query param', () => {
+        const heatmap = require('../heatmap.js');
+        const scriptSrc = '//dashboard.ophan.co.uk/assets/js/heatmap-bookmarklet.js';
+        Object.defineProperty(window, 'location', {
+            value: new URL('https://www.theguardian.com/uk?heatmap=show'),
+            writable: true,
+        });
+        heatmap.init();
+        const scripts = document.getElementsByTagName("script");
+        let heatmapScript = Array.from(scripts).find(item => item.src.endsWith(scriptSrc));
+        expect(heatmapScript).not.toBeNull();
+    });
+    it('should load the heatmap script once', () => {
+        const heatmap = require('../heatmap.js');
+        const scriptSrc = '//dashboard.ophan.co.uk/assets/js/react/heatphan/index.js';
+        Object.defineProperty(window, 'location', {
+            value: new URL('https://www.theguardian.com/uk?heatmap=experimental'),
+            writable: true,
+        });
+        for (let i = 0; i < 10; i++) {
+            heatmap.init();
+        }
+        const scripts = document.getElementsByTagName("script");
+        let heatmapScript = Array.from(scripts).filter(item => item.src.endsWith(scriptSrc));
+        expect(heatmapScript.length).toBe(1);
+        expect(heatmapScript[0]).not.toBeNull();
+    });
+    it('should load heatphan based on a query param', () => {
+        const heatmap = require('../heatmap.js');
+        const scriptSrc = '//dashboard.ophan.co.uk/assets/js/react/heatphan/index.js';
+        Object.defineProperty(window, 'location', {
+            value: new URL('https://www.theguardian.com/uk?heatmap=experimental'),
+            writable: true,
+        });
+        heatmap.init();
+        const scripts = document.getElementsByTagName("script");
+        let heatmapScript = Array.from(scripts).find(item => item.src.endsWith(scriptSrc));
+        expect(heatmapScript).not.toBeNull();
+    });
+});

package/dist/assets/tests/transmit.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=transmit.test.d.ts.map