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

package/assets/core.js

@@ -0,0 +1,282 @@
+let init,
+	sendInitialEvent,
+	storeDataToSendOnNextEvent,
+	hasProp = {}.hasOwnProperty;
+
+import transmit from './transmit.js';
+
+import visibility from './visibility.js';
+
+import adblockDetection from './adblock-detection.js';
+
+const VERSION = 17;
+
+let doc = window.document;
+
+const canStoreEventsInLocalStorage =
+	window.localStorage != null && typeof JSON !== 'undefined' && JSON !== null;
+
+let platform = null;
+
+const MaximumComponentNameLength = 50;
+
+init = function (servingPlatform, httpStatus) {
+	platform = servingPlatform;
+	if (visibility.state() !== 'prerender') {
+		return sendInitialEvent(httpStatus);
+	} else {
+		if (visibility.changeEvent) {
+			return doc.addEventListener(
+				visibility.changeEvent,
+				function () {
+					if (visibility.state() === 'visible') {
+						return sendInitialEvent(httpStatus);
+					}
+				},
+				false,
+			);
+		}
+	}
+};
+
+/**
+ * Retrieves the value of a specified query parameter from the current page's URL.
+ * Using an old-fashioned way of finding a query param rather than using searchParams
+ * as we don't control which environments the CDN distribution is being used in and so don't know if it's supported.
+ * @param {string} paramName - The name of the query parameter to retrieve.
+ * @returns {string | undefined} The value of the query parameter, or undefined if not found.
+ */
+const getQueryParameterValue = (paramName) => {
+	const queryString = window.location.search.substring(1);
+	const queryParams = queryString.split('&');
+
+	for (const param of queryParams) {
+		const [key, value] = param.split('=');
+		if (key === paramName) {
+			return decodeURIComponent(value);
+		}
+	}
+};
+
+/**
+ * Retrieves the referrer URL from the given referrer or a fallback query parameter.
+ * If an authentication flow takes place on page load, the referrer is lost.
+ * So, if no referrer, fall back to query param holding the value of the referrer before the auth flow began.
+ * See https://github.com/guardian/support-frontend/blob/main/support-frontend/app/controllers/AuthCodeFlowController.scala#L105
+ * for an example use. * @param {string} referrer - The document referrer.
+ * @param {string} referrer - The document referrer.
+ * @returns {string} The referrer URL or the fallback query parameter value.
+ */
+const getReferrer = (referrer) => {
+	return referrer || getQueryParameterValue('pre-auth-ref') || '';
+};
+
+/**
+ * Retrieves the type of navigation that occurred to arrive at the current page, using the Performance API.
+ * Returns null if the navigation type is not available.
+ * @returns {string | null} The navigation type (e.g., 'navigate', 'reload', 'back_forward'), or null if not available.
+ */
+const getNavigationType = () => {
+	if (window.performance?.getEntriesByType) {
+		const entries = window.performance.getEntriesByType('navigation');
+		if (entries.length > 0) {
+			return entries[0].type;
+		}
+	}
+	return null;
+};
+
+sendInitialEvent = function (
+	httpStatus,
+	url = location.href,
+	referrer = window.document.referrer,
+) {
+	const navigationType = getNavigationType();
+	// send initial event
+	const event = {
+		v: VERSION,
+		platform: platform,
+		url: url,
+		ref: getReferrer(referrer),
+		visibilityState: visibility.state(),
+		isModernBrowser:
+			typeof guardian !== 'undefined' && guardian !== null
+				? guardian.isModernBrowser
+				: void 0,
+		httpStatus: httpStatus,
+		tz: new Date().getTimezoneOffset(),
+	};
+	if (navigationType != null) {
+		// Add navigation type as metadata to the event if it's not null
+		event.navigationType = navigationType;
+	}
+	appendContentType(event);
+	appendDataFromLocalStorageToEvent(event);
+	transmit.sendInitial(event);
+	return adblockDetection.run().then(function (adBlockerEnabled) {
+		// `adUnitWasHidden` is the query param used
+		// by the previous adblock detection, hence reusing it here.
+		return transmit.sendMore({
+			adUnitWasHidden: adBlockerEnabled,
+		});
+	});
+};
+
+const onLoadCaptures = [];
+
+/**
+ * Registers a data capture function to be called when the document is fully loaded.
+ * The result of this function is then sent to the tracker backend service.
+ * If the document is already loaded, this is done immediately.
+ *
+ * @param {() => Record<string, unknown>} dataCapture - A function that returns an object containing performance metrics such as page load time, network latency, etc.
+ * Refer to the `perf.js` file where this function is used for more info.
+ */
+const onLoadCapture = (dataCapture) => {
+	if (document.readyState === 'complete') {
+		const msg = { ...dataCapture() };
+		transmit.sendMore(msg);
+	} else {
+		onLoadCaptures.push(dataCapture);
+	}
+};
+
+/**
+ * Processes all registered data capture functions, merges their outputs and sends it to the tracker backend service.
+ * If on a 'next-gen' platform, additional component data is appended to the event via the `appendComponentDataToEvent` function.
+ */
+const processCaptures = () => {
+	const msg = {};
+
+	for (const capture of onLoadCaptures) {
+		const captureData = capture();
+
+		for (const key in captureData) {
+			if (captureData.hasOwnProperty(key)) {
+				msg[key] = captureData[key];
+			}
+		}
+	}
+
+	if (platform === 'next-gen') {
+		appendComponentDataToEvent(msg);
+	}
+	transmit.sendMore(msg);
+};
+
+window.addEventListener?.('load', processCaptures, false);
+
+/**
+ * Appends data from local storage to a given event object.
+ * Specifically targets data stored under the 'ophan_follow' key in localStorage.
+ * After appending the data to the event, it removes the data from localStorage.
+ * @param {Record<string, unknown>} event - The event object to which the local storage data will be appended.
+ */
+const appendDataFromLocalStorageToEvent = (event) => {
+	if (canStoreEventsInLocalStorage) {
+		const localStorageItems = JSON.parse(
+			window.localStorage.getItem('ophan_follow'),
+		);
+		if (localStorageItems != null) {
+			for (const key in localStorageItems) {
+				if (localStorageItems.hasOwnProperty(key)) {
+					event[key] = localStorageItems[key];
+				}
+			}
+		}
+		window.localStorage.removeItem('ophan_follow');
+	}
+};
+
+/**
+ * Trims component names to a maximum length to ensure they are URL safe.
+ * If a component name exceeds the maximum length, it is truncated and appended with an ellipsis.
+ * @param {string[]} componentNames - An array of component names.
+ * @returns {string[]} An array of trimmed component names.
+ */
+const trimComponentNamesToUrlSafeLength = (componentNames) => {
+	return componentNames.map((componentName) =>
+		componentName.length > MaximumComponentNameLength
+			? componentName.substring(0, MaximumComponentNameLength).concat('…')
+			: componentName,
+	);
+};
+
+/**
+ * Appends data about rendered components to an event object.
+ * Extracts component names from elements with a 'data-component' attribute, trims them for URL safety, ensures uniqueness, and adds them to the event.
+ * @param {Object} event - The event object to which component data will be appended.
+ */
+const appendComponentDataToEvent = (event) => {
+	const componentElements = document.querySelectorAll('[data-component]');
+	const componentNames = Array.prototype.slice.call(componentElements).map((el) =>
+		el.getAttribute('data-component')
+	);
+
+	if (componentNames.length > 0) {
+		const trimmedComponentNames =
+			trimComponentNamesToUrlSafeLength(componentNames);
+		// uniquify
+		const uniqueComponents = new Set(trimmedComponentNames);
+		event.renderedComponents = [...uniqueComponents];
+	}
+};
+
+
+storeDataToSendOnNextEvent = function (newData) {
+	let existingData, key, value;
+	if (canStoreEventsInLocalStorage) {
+		existingData =
+			JSON.parse(window.localStorage.getItem('ophan_follow')) || {};
+		for (key in newData) {
+			if (!hasProp.call(newData, key)) continue;
+			value = newData[key];
+			existingData[key] = value;
+		}
+		return window.localStorage.setItem(
+			'ophan_follow',
+			JSON.stringify(existingData),
+		);
+	}
+};
+
+/**
+ * Determines the 'content type' based on the platform and guardian object.
+ * @param {Record<string, unknown>} event - The event object that will be updated with contentType.
+ * @param {string} platform - The current platform ('next-gen', 'embed' or other).
+ * @param {Record<string, unknown>} guardian - The guardian object.
+ */
+const appendContentType = (event, platform, guardian) => {
+	const contentType =
+		platform === 'next-gen' || platform === 'embed'
+			? guardian?.config?.page?.contentType
+			: guardian?.page?.contentTypes;
+
+	if (contentType) {
+		event.contentType = contentType.toLowerCase();
+	}
+};
+
+export default {
+	init: init,
+	storeDataToSendOnNextEvent: storeDataToSendOnNextEvent,
+	onLoadCapture: onLoadCapture,
+	servingPlatform: function () {
+		return platform;
+	},
+	viewId: transmit.viewId,
+	sendInitialEvent: sendInitialEvent,
+};
+
+/**
+ * Exports for testing purposes.
+ */
+export const _testExports = {
+	appendComponentDataToEvent,
+	trimComponentNamesToUrlSafeLength,
+	getQueryParameterValue,
+	onLoadCaptures,
+	onLoadCapture,
+	processCaptures,
+	appendContentType,
+};

package/assets/embed.js

@@ -0,0 +1,11 @@
+// Generated by CoffeeScript 2.7.0
+import core from './core.js';
+
+import transmit from './transmit.js';
+
+core.init('embed');
+
+export default {
+	record: transmit.sendMore,
+	viewId: transmit.viewId,
+};

package/assets/fb-instant.js

@@ -0,0 +1,10 @@
+// Generated by CoffeeScript 2.7.0
+import core from './core.js';
+
+import transmit from './transmit.js';
+
+core.init('facebook-instant-article');
+
+export default {
+	viewId: transmit.viewId,
+};

package/assets/heatmap.js

@@ -0,0 +1,47 @@
+// Generated by CoffeeScript 2.7.0
+var heatmapFired, init;
+
+heatmapFired = false;
+
+init = function () {
+	var addHeatmap;
+	addHeatmap = function () {
+		var heatmapParam;
+		if (
+			typeof localStorage !== 'undefined' &&
+			localStorage !== null &&
+			!heatmapFired
+		) {
+			heatmapFired = true;
+			heatmapParam = window.location.search.replace(
+				/^(?:.*[&\?]heatmap(?:\=([^&]*))?)?.*$/,
+				'$1',
+			);
+			if (heatmapParam === 'true' || heatmapParam === 'false') {
+				localStorage['ophan_heatmap'] = heatmapParam;
+			}
+			if (localStorage['ophan_heatmap'] === 'true' || heatmapParam === 'show') {
+				return (document.body.appendChild(
+					document.createElement('script'),
+				).src = '//dashboard.ophan.co.uk/assets/js/heatmap-bookmarklet.js');
+			}
+		}
+	};
+	if (document.readyState === 'complete') {
+		return addHeatmap();
+	} else {
+		return typeof window.addEventListener === 'function'
+			? window.addEventListener(
+					'load',
+					function () {
+						return addHeatmap();
+					},
+					false,
+				)
+			: void 0;
+	}
+};
+
+export default {
+	init: init,
+};

package/assets/holidays.js

@@ -0,0 +1,11 @@
+// Generated by CoffeeScript 2.7.0
+import core from './core.js';
+
+import transmit from './transmit.js';
+
+core.init('holidays');
+
+export default {
+	record: transmit.sendMore,
+	viewId: transmit.viewId,
+};

package/assets/http-status.js

@@ -0,0 +1,20 @@
+// Generated by CoffeeScript 2.7.0
+var reportStatus;
+
+import core from './core.js';
+
+import './transmit.js';
+
+import './click-path-capture.js';
+
+import './perf.js';
+
+import './campaign.js';
+
+reportStatus = function (platform, status) {
+	return core.init(platform, status);
+};
+
+export default {
+	reportStatus: reportStatus,
+};

package/assets/iframe-tracking.js

@@ -0,0 +1,82 @@
+// Generated by CoffeeScript 2.7.0
+var componentEventIsValid,
+	handleIframeMessage,
+	recordIframeClickEvent,
+	recordIframeComponentEvent,
+	retrieveOriginDomain,
+	validIframeDomains;
+
+import clickCapture from './click-path-capture.js';
+
+validIframeDomains = [
+	'.theguardian.com',
+	'.dev-theguardian.com',
+	'.thegulocal.com', // NB - leading dot is essential here to avoid matching on non-Guardian-owned domains
+];
+
+handleIframeMessage = function (messageEvent) {
+	var eventObject, iFrame, originDomain;
+	originDomain = retrieveOriginDomain(messageEvent.origin);
+	if (
+		originDomain &&
+		validIframeDomains.some((domain) => {
+			return originDomain.endsWith(domain);
+		})
+	) {
+		if (messageEvent.data.type === 'ophan-iframe-click-event') {
+			eventObject = messageEvent.data.value;
+			iFrame = document.getElementById(messageEvent.data.iframeId);
+			recordIframeClickEvent(iFrame, eventObject);
+		} else if (messageEvent.data.type === 'ophan-iframe-component-event') {
+			eventObject = messageEvent.data.value;
+			recordIframeComponentEvent(eventObject);
+		}
+	}
+};
+
+retrieveOriginDomain = function (eventOrigin) {
+	var e, originURL;
+	try {
+		originURL = new URL(eventOrigin);
+		return originURL.host;
+	} catch (error) {
+		e = error;
+		if (e instanceof TypeError) {
+			// We failed to parse origin as an URL, we should ignore the event
+			return null;
+		} else {
+			throw e;
+		}
+	}
+};
+
+recordIframeClickEvent = function (iFrame, clickEvent) {
+	if (iFrame) {
+		clickEvent.clickLinkNames =
+			clickCapture.getDataLinkNames(iFrame, clickEvent.clickLinkNames) ||
+			clickEvent.clickLinkNames;
+	}
+	window.guardian.ophan.record(clickEvent);
+};
+
+componentEventIsValid = function (eventObject) {
+	if (!eventObject || typeof eventObject !== 'object') {
+		return false;
+	}
+	if (
+		!eventObject.componentEvent ||
+		typeof eventObject.componentEvent !== 'object'
+	) {
+		return false;
+	}
+	return true;
+};
+
+recordIframeComponentEvent = function (eventObject) {
+	if (!componentEventIsValid(eventObject)) {
+		return;
+	}
+	window.guardian.ophan.record(eventObject);
+};
+
+window.addEventListener('message', handleIframeMessage, false);

package/assets/interactive.js

@@ -0,0 +1,25 @@
+// Generated by CoffeeScript 2.7.0
+var ref;
+
+import core from './core.js';
+
+import transmit from './transmit.js';
+
+import attention from './attention.js';
+
+import './click-path-capture.js';
+
+if (((ref = window.guardian) != null ? ref.ophan : void 0) != null) {
+	window.guardian.ophan;
+} else {
+	core.init('embed');
+	if (window.guardian == null) {
+		window.guardian = {};
+	}
+	window.guardian.ophan = {
+		setEventEmitter: attention.setEventEmitter,
+		trackComponentAttention: attention.initComponent,
+		record: transmit.sendMore,
+		viewId: transmit.viewId,
+	};
+}

package/assets/jobs-courses.js

@@ -0,0 +1,11 @@
+// Generated by CoffeeScript 2.7.0
+import core from './core.js';
+
+import transmit from './transmit.js';
+
+core.init('jobs-courses');
+
+export default {
+	record: transmit.sendMore,
+	viewId: transmit.viewId,
+};

package/assets/jobs.js

@@ -0,0 +1,11 @@
+// Generated by CoffeeScript 2.7.0
+import core from './core.js';
+
+import transmit from './transmit.js';
+
+core.init('jobs');
+
+export default {
+	record: transmit.sendMore,
+	viewId: transmit.viewId,
+};

package/assets/manage-my-account.js

@@ -0,0 +1,50 @@
+// Generated by CoffeeScript 2.7.0
+var exports, sendInitialEvent;
+
+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('manage-my-account');
+
+if (window.addEventListener != null) {
+	attention.init(visibility);
+}
+
+sendInitialEvent = function (
+	url = location.href,
+	referrer = window.document.referrer,
+) {
+	var e;
+	try {
+		transmit.bumpViewId();
+		return core.sendInitialEvent(null, url, referrer);
+	} catch (error) {
+		e = error;
+		return console.log(e);
+	}
+};
+
+exports = {
+	sendInitialEvent: sendInitialEvent,
+	record: transmit.sendMore,
+	viewId: transmit.viewId,
+};
+
+if (window.guardian == null) {
+	window.guardian = {};
+}
+
+window.guardian.ophan = exports;
+
+export default exports;

package/assets/membership.js

@@ -0,0 +1,25 @@
+// 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('membership');
+
+if (window.addEventListener != null) {
+	attention.init(visibility);
+}
+
+export default {
+	record: transmit.sendMore,
+	viewId: transmit.viewId,
+};

package/assets/ng.js

@@ -0,0 +1,41 @@
+// Generated by CoffeeScript 2.7.0
+var ng, 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';
+
+// 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
+ng =
+	((ref = window.guardian) != null ? ref.ophan : void 0) != null
+		? window.guardian.ophan
+		: (core.init('next-gen'),
+			privatebrowsing.init(),
+			heatmap.init(),
+			window.addEventListener != null ? attention.init(visibility) : void 0,
+			window.guardian != null ? window.guardian : (window.guardian = {}),
+			(window.guardian.ophan = {
+				setEventEmitter: attention.setEventEmitter,
+				trackComponentAttention: attention.initComponent,
+				record: transmit.sendMore,
+				viewId: transmit.viewId,
+				pageViewId: transmit.viewId,
+			}));
+
+export default ng;

package/assets/perf.js

@@ -0,0 +1,43 @@
+// Generated by CoffeeScript 2.7.0
+var perf, sendTimingData;
+
+import core from './core.js';
+
+perf =
+	window.performance ||
+	window.msPerformance ||
+	window.webkitPerformance ||
+	window.mozPerformance;
+
+sendTimingData = function () {
+	var t;
+	t = perf != null ? perf.timing : void 0;
+	if (t != null) {
+		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;