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

package/assets/adblock-detection.js

@@ -1,24 +1,19 @@
-// Generated by CoffeeScript 2.7.0
 import abd from './vendor/adBlockDetectionLib.js';
 
 export default {
-	run: function () {
-		return new Promise(function (resolve, reject) {
-			var e;
+	run() {
+		return new Promise((resolve, reject) => {
 			if (abd.init) {
 				try {
-					return abd.init({
-						complete: function (v) {
-							return resolve(v);
-						},
+					abd.init({
+						complete: resolve,
 					});
 				} catch (error) {
-					e = error;
-					return reject(e);
+					reject(error);
 				}
 			} else {
-				return reject(new Error('Failed to initialise adblock detection'));
+				reject(new Error('Failed to initialise adblock detection'));
 			}
 		});
 	},
-};
+};

package/assets/attention.js

@@ -1,21 +1,4 @@
 // Generated by CoffeeScript 2.7.0
-var ATTENTIONDECAY,
-	EVENTS,
-	REPORTINGINTERVAL,
-	cancelDecayTimer,
-	decayTimerId,
-	incrementTotalAttentionTimeByUnrecordedAmount,
-	initAttention,
-	initComponent,
-	makeActive,
-	makeInactive,
-	reportedTotalAttentionMs,
-	reporter,
-	setEventEmitter,
-	totalAttentionMs,
-	unrecordedAttentionStarted,
-	videoPlaying;
-
 import transmit from './transmit.js';
 
 import components from './components.js';
@@ -32,10 +15,10 @@ import components from './components.js';
 //  a page where the above conditions have held true."
 
 // our definition of "within a certain timeout" above:
-ATTENTIONDECAY = 5000;
+const ATTENTIONDECAY = 5000;
 
 // our definition of "the user has interacted with the page"
-EVENTS = [
+const EVENTS = [
 	'focus',
 	'click',
 	'scroll',
@@ -49,90 +32,82 @@ EVENTS = [
 	'keydown',
 ];
 
-REPORTINGINTERVAL = 10000;
+const REPORTINGINTERVAL = 10000;
 
 // total attention time so far on this page
-totalAttentionMs = 0;
+let totalAttentionMs = 0;
 
 // the time elapsed since the time origin (https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin)
 // when the most recent period of attention (that is, attention
 // which we haven't yet added to totalAttentionMs) began.
 // null if we don't have attention.
-unrecordedAttentionStarted = null;
+let unrecordedAttentionStarted = null;
 
 // the attention time we last reported to ophan
-reportedTotalAttentionMs = null; // setting null here forces a first report of attention time, even if it's only 0ms
+let reportedTotalAttentionMs = null; // setting null here forces a first report of attention time, even if it's only 0ms
 
 // the decay timer if we've set one
-decayTimerId = null;
+let decayTimerId = null;
 
 // is video currently playing?
-videoPlaying = false;
+let videoPlaying = false;
 
-cancelDecayTimer = function () {
+const cancelDecayTimer = () => {
 	if (decayTimerId != null) {
 		window.clearTimeout(decayTimerId);
 	}
-	return (decayTimerId = null);
+	decayTimerId = null;
 };
 
-makeActive = function () {
-	// mark when the latest period of attention began,
-	// if we're not already in an attention period
+const makeActive = () => {
 	if (unrecordedAttentionStarted == null) {
 		unrecordedAttentionStarted = performance.now();
 	}
 	components.startMonitoring();
-	// start decay timer
 	cancelDecayTimer();
-	return (decayTimerId = window.setTimeout(function () {
+	decayTimerId = window.setTimeout(() => {
 		if (!videoPlaying) {
-			return makeInactive();
+			makeInactive();
 		}
-	}, ATTENTIONDECAY));
+	}, ATTENTIONDECAY);
 };
 
-incrementTotalAttentionTimeByUnrecordedAmount = function () {
-	var now, unrecordedMs;
+const incrementTotalAttentionTimeByUnrecordedAmount = () => {
 	if (unrecordedAttentionStarted != null) {
-		now = performance.now();
-		// the Math.min here is to deal with occasions where we don't get an event indicating that the user
-		// has become inactive - this can happen e.g. due to users suspending their phone. Never send
-		// crazy big values!
-		unrecordedMs = Math.min(
+		const now = performance.now();
+		const unrecordedMs = Math.min(
 			now - unrecordedAttentionStarted,
 			REPORTINGINTERVAL,
 		);
 		totalAttentionMs += unrecordedMs;
-		return (unrecordedAttentionStarted = now);
+		unrecordedAttentionStarted = now;
 	}
 };
 
-makeInactive = function () {
+const makeInactive = () => {
 	cancelDecayTimer();
 	components.stopMonitoring();
 	incrementTotalAttentionTimeByUnrecordedAmount();
-	return (unrecordedAttentionStarted = null);
+	unrecordedAttentionStarted = null;
 };
 
-reporter = function () {
-	var componentAttentionTimes, report;
+const reporter = () => {
 	incrementTotalAttentionTimeByUnrecordedAmount();
 	if (totalAttentionMs !== reportedTotalAttentionMs) {
-		report = {
+		const report = {
 			attentionMs: Math.round(totalAttentionMs),
 		};
-		componentAttentionTimes = components.getAttentionTimes();
+		const componentAttentionTimes = components.getAttentionTimes();
 		if (Object.keys(componentAttentionTimes).length) {
 			report.componentAttentionMs = componentAttentionTimes;
 		}
 		transmit.sendMore(report);
-		return (reportedTotalAttentionMs = totalAttentionMs);
+		reportedTotalAttentionMs = totalAttentionMs;
 	}
 };
 
-initComponent = function (name, el, visibilityThreshold = 0.5) {
-	return components.registerComponent(
+const initComponent = (name, el, visibilityThreshold = 0.5) => {
+	components.registerComponent(
 		name,
 		el,
 		visibilityThreshold,
@@ -140,48 +115,46 @@ initComponent = function (name, el, visibilityThreshold = 0.5) {
 	);
 };
 
-initAttention = function (visibility) {
-	var event, i, len;
-	for (i = 0, len = EVENTS.length; i < len; i++) {
-		event = EVENTS[i];
-		// user interaction tracking
+const initAttention = (visibility) => {
+	EVENTS.forEach((event) => {
 		window.addEventListener(event, makeActive);
-	}
-	// focus tracking
+	});
+
 	document.addEventListener(
 		visibility.changeEvent,
-		function () {
+		() => {
 			if (visibility.state() === 'visible') {
-				return makeActive();
+				makeActive();
 			} else {
-				return makeInactive();
+				makeInactive();
 			}
 		},
 		false,
 	);
-	// video tracking
-	document.addEventListener('videoPlaying', function () {
+
+	document.addEventListener('videoPlaying', () => {
 		videoPlaying = true;
-		return makeActive();
+		makeActive();
 	});
-	document.addEventListener('videoEnded', function () {
+	document.addEventListener('videoEnded', () => {
 		videoPlaying = false;
-		return makeInactive();
+		makeInactive();
 	});
-	document.addEventListener('videoPause', function () {
+	document.addEventListener('videoPause', () => {
 		videoPlaying = false;
-		return makeInactive();
+		makeInactive();
 	});
+
 	window.setTimeout(reporter, 100);
-	return window.setInterval(reporter, REPORTINGINTERVAL);
+	window.setInterval(reporter, REPORTINGINTERVAL);
 };
 
-setEventEmitter = function (emitter) {
-	return components.setEventEmitter(emitter);
+const setEventEmitter = (emitter) => {
+	components.setEventEmitter(emitter);
 };
 
 export default {
 	init: initAttention,
 	initComponent: initComponent,
 	setEventEmitter: setEventEmitter,
-};
+};

package/assets/campaign.js

@@ -1,40 +1,25 @@
 // Generated by CoffeeScript 2.7.0
-var ref, ref1, start;
-
 import transmit from './transmit.js';
-
 import perf from './perf.js';
 
-start =
-	(ref =
-		perf != null
-			? (ref1 = perf.timing) != null
-				? ref1.domComplete
-				: void 0
-			: void 0) != null
-		? ref
-		: performance.now();
+const start = perf?.timing?.domComplete ?? performance.now();
 
 // DFP ads
 if (typeof googletag !== 'undefined' && googletag !== null) {
-	googletag.cmd.push(function () {
-		return googletag
-			.pubads()
-			.addEventListener('slotRenderEnded', function (event) {
-				var slotId;
-				slotId = event.slot.getSlotId().getDomId();
-				return transmit.sendMore({
-					ads: [
-						{
-							slot: slotId,
-							campaignId: event.isEmpty ? '__empty__' : event.lineItemId,
-							creativeId: event.creativeId,
-							// overall time to render an ad
-							timeToRenderEnded: Math.round(performance.now() - start),
-							adServer: 'DFP',
-						},
-					],
-				});
+	googletag.cmd.push(() => {
+		googletag.pubads().addEventListener('slotRenderEnded', (event) => {
+			const slotId = event.slot.getSlotId().getDomId();
+			transmit.sendMore({
+				ads: [
+					{
+						slot: slotId,
+						campaignId: event.isEmpty ? '__empty__' : event.lineItemId,
+						creativeId: event.creativeId,
+						timeToRenderEnded: Math.round(performance.now() - start),
+						adServer: 'DFP',
+					},
+				],
 			});
+		});
 	});
-}
+}

package/assets/click-path-capture.js

@@ -1,81 +1,54 @@
-// Generated by CoffeeScript 2.7.0
-var getContainingComponent, getDataLinkNames, validAncestorAnchorElement;
-
 import ophan from './core.js';
 
 import transmit from './transmit.js';
 
-validAncestorAnchorElement = function (el) {
-	var elementType, ref;
-	elementType =
-		el != null
-			? (ref = el.nodeName) != null
-				? ref.toLowerCase()
-				: void 0
-			: void 0;
-	if (elementType === 'a') {
-		return el;
-	} else if (elementType == null || elementType === 'body') {
-		return null;
-	} else {
-		return validAncestorAnchorElement(el.parentNode);
-	}
+/**
+ * Finds the closest ancestor anchor (`<a>`) element of the given element.
+ *
+ * @param {Element} el - The element to start searching from.
+ * @returns {Element|null} The closest ancestor anchor element or null if none found.
+ */
+export const validAncestorAnchorElement = (el) => {
+	if (!el || el.nodeName?.toLowerCase() === 'body') return null;
+	return el.nodeName.toLowerCase() === 'a'
+		? el
+		: validAncestorAnchorElement(el.parentNode);
 };
 
-getContainingComponent = function (el) {
-	var elementType, ref;
-	elementType =
-		el != null
-			? (ref = el.nodeName) != null
-				? ref.toLowerCase()
-				: void 0
-			: void 0;
-	if (elementType == null || elementType === 'body') {
-		return null;
-	} else {
-		return (
-			(typeof el.getAttribute === 'function'
-				? el.getAttribute('data-component')
-				: void 0) || getContainingComponent(el.parentNode)
-		);
-	}
+/**
+ * Retrieves the value of the `data-component` attribute from the closest ancestor.
+ *
+ * @param {Element} el - The element to start searching from.
+ * @returns {string|null} The `data-component` attribute value or null if not found.
+ */
+export const getContainingComponent = (el) => {
+	if (!el || el.nodeName?.toLowerCase() === 'body') return null;
+	return (
+		el.getAttribute('data-component') || getContainingComponent(el.parentNode)
+	);
 };
 
-getDataLinkNames = function (el, dataLinkNames = []) {
-	var isBody, isDocument, walkTree;
-	isBody = function (elem) {
-		var ref;
-		return (
-			(elem != null
-				? (ref = elem.nodeName) != null
-					? ref.toLowerCase()
-					: void 0
-				: void 0) === document.body.nodeName.toLowerCase()
-		);
-	};
-	isDocument = function (elem) {
-		return elem === document;
-	};
-	walkTree = function (elem, dataLinkNames) {
-		var dataLinkName;
-		if (elem != null && !isBody(elem) && !isDocument(elem)) {
-			dataLinkName = elem.getAttribute('data-link-name');
-			if (dataLinkName != null) {
-				dataLinkNames.push(dataLinkName);
-			}
-			return walkTree(elem.parentNode, dataLinkNames);
-		} else {
-			return dataLinkNames;
-		}
-	};
-	return walkTree(el, dataLinkNames.slice());
+/**
+ * Collects all `data-link-name` attribute values from the ancestor elements.
+ *
+ * @param {Element} el - The element to start searching from.
+ * @param {string[]} dataLinkNames - Initial array of data link names (optional).
+ * @returns {string[]} Array of `data-link-name` values.
+ */
+const getDataLinkNames = (el, dataLinkNames = []) => {
+	if (!el || el === document.body || el === document) return dataLinkNames;
+
+	const dataLinkName = el.getAttribute('data-link-name');
+	if (dataLinkName) dataLinkNames.push(dataLinkName);
+
+	return getDataLinkNames(el.parentNode, dataLinkNames);
 };
 
 if (typeof document.addEventListener === 'function') {
 	document.addEventListener(
 		'click',
 		function (e) {
-			var anchorTarget, info;
+			let anchorTarget, info;
 			anchorTarget = validAncestorAnchorElement(e.target);
 			info = {
 				from: [location.protocol, '//', location.host, location.pathname].join(
@@ -104,4 +77,4 @@ if (typeof document.addEventListener === 'function') {
 
 export default {
 	getDataLinkNames: getDataLinkNames,
-};
+};

package/assets/components.js

@@ -3,6 +3,16 @@
  */
 const components = [];
 
+
+
+
+
+
+
+
+
+
+
 /**
  * theguardian.com uses a custom scroll event for performance reasons.
  * We pass in the event emitter so that we can listen to this custom scroll event.
@@ -196,14 +206,4 @@ export default {
 			new Component(name, el, visibilityThreshold, reportingInterval),
 		);
 	},
-};
-
-/**
- * Exports for testing purposes.
- */
-export const _testExports = {
-	startMonitoring,
-	stopMonitoring,
-	getAttentionTimes,
-	components,
 };

package/assets/http-status.js

@@ -1,20 +1,13 @@
-// 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) {
+const reportStatus = (platform, status) => {
 	return core.init(platform, status);
 };
 
 export default {
-	reportStatus: reportStatus,
-};
+	reportStatus,
+};

package/assets/iframe-tracking.js

@@ -1,56 +1,57 @@
-// Generated by CoffeeScript 2.7.0
-var componentEventIsValid,
-	handleIframeMessage,
-	recordIframeClickEvent,
-	recordIframeComponentEvent,
-	retrieveOriginDomain,
-	validIframeDomains;
-
 import clickCapture from './click-path-capture.js';
 
-validIframeDomains = [
+const 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);
+/**
+ * Handles messages received from iframes, recording events as necessary.
+ * @param {MessageEvent} messageEvent - The message event received from an iframe.
+ */
+const handleIframeMessage = (messageEvent) => {
+	const originDomain = retrieveOriginDomain(messageEvent.origin);
 	if (
 		originDomain &&
-		validIframeDomains.some((domain) => {
-			return originDomain.endsWith(domain);
-		})
+		validIframeDomains.some((domain) => originDomain.endsWith(domain))
 	) {
 		if (messageEvent.data.type === 'ophan-iframe-click-event') {
-			eventObject = messageEvent.data.value;
-			iFrame = document.getElementById(messageEvent.data.iframeId);
+			const eventObject = messageEvent.data.value;
+			const iFrame = document.getElementById(messageEvent.data.iframeId);
 			recordIframeClickEvent(iFrame, eventObject);
 		} else if (messageEvent.data.type === 'ophan-iframe-component-event') {
-			eventObject = messageEvent.data.value;
+			const eventObject = messageEvent.data.value;
 			recordIframeComponentEvent(eventObject);
 		}
 	}
 };
 
-retrieveOriginDomain = function (eventOrigin) {
-	var e, originURL;
+/**
+ * Retrieves the domain from an event's origin URL.
+ * @param {string} eventOrigin - The origin URL of the event.
+ * @returns {(string|null)} The domain of the origin URL or null if it cannot be parsed.
+ */
+const retrieveOriginDomain = (eventOrigin) => {
 	try {
-		originURL = new URL(eventOrigin);
+		const originURL = new URL(eventOrigin);
 		return originURL.host;
 	} catch (error) {
-		e = error;
-		if (e instanceof TypeError) {
+		if (error instanceof TypeError) {
 			// We failed to parse origin as an URL, we should ignore the event
 			return null;
 		} else {
-			throw e;
+			throw error;
 		}
 	}
 };
 
-recordIframeClickEvent = function (iFrame, clickEvent) {
+/**
+ * Records a click event occurring within an iframe.
+ * @param {HTMLElement} iFrame - The iframe element where the click event occurred.
+ * @param {Object} clickEvent - The click event object to record.
+ */
+const recordIframeClickEvent = (iFrame, clickEvent) => {
 	if (iFrame) {
 		clickEvent.clickLinkNames =
 			clickCapture.getDataLinkNames(iFrame, clickEvent.clickLinkNames) ||
@@ -59,24 +60,29 @@ recordIframeClickEvent = function (iFrame, clickEvent) {
 	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;
+/**
+ * Validates if an event object is a valid component event.
+ * @param {Object} eventObject - The event object to validate.
+ * @returns {boolean} True if the event object is valid, false otherwise.
+ */
+const componentEventIsValid = (eventObject) => {
+	return (
+		eventObject &&
+		typeof eventObject === 'object' &&
+		eventObject.componentEvent &&
+		typeof eventObject.componentEvent === 'object'
+	);
 };
 
-recordIframeComponentEvent = function (eventObject) {
+/**
+ * Records a component event from an iframe.
+ * @param {Object} eventObject - The component event object to record.
+ */
+const recordIframeComponentEvent = (eventObject) => {
 	if (!componentEventIsValid(eventObject)) {
 		return;
 	}
 	window.guardian.ophan.record(eventObject);
 };
 
-window.addEventListener('message', handleIframeMessage, false);
+window.addEventListener('message', handleIframeMessage, false);

package/assets/interactive.js

@@ -1,25 +1,17 @@
-// 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;
+if (window.guardian?.ophan) {
+	guardian.ophan;
 } else {
 	core.init('embed');
-	if (window.guardian == null) {
-		window.guardian = {};
-	}
-	window.guardian.ophan = {
+	window.guardian = guardian || {};
+	guardian.ophan = {
 		setEventEmitter: attention.setEventEmitter,
 		trackComponentAttention: attention.initComponent,
 		record: transmit.sendMore,
 		viewId: transmit.viewId,
 	};
-}
+}

package/assets/manage-my-account.js

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

package/assets/perf.js

@@ -1,18 +1,15 @@
 // Generated by CoffeeScript 2.7.0
-var perf, sendTimingData;
-
 import core from './core.js';
 
-perf =
+const perf =
 	window.performance ||
 	window.msPerformance ||
 	window.webkitPerformance ||
 	window.mozPerformance;
 
-sendTimingData = function () {
-	var t;
-	t = perf != null ? perf.timing : void 0;
-	if (t != null) {
+const sendTimingData = () => {
+	const t = perf?.timing;
+	if (t) {
 		return {
 			performance: {
 				// Time required for domain lookup.
@@ -40,4 +37,4 @@ sendTimingData = function () {
 
 core.onLoadCapture(sendTimingData);
 
-export default perf;
+export default perf;

package/assets/privatebrowsing.js

@@ -1,48 +1,41 @@
-// Generated by CoffeeScript 2.7.0
-// Check if a visitor is using private browsing mode (true or false)
-// User agent checking and browser mode checking based on: https://gist.github.com/cou929/7973956#gistcomment-1769682
-var privateBrowsingMode;
-
 import transmit from './transmit.js';
 
-privateBrowsingMode = function (callback) {
-	var reportNormalMode, reportPrivateMode, tryIndexedDB, tryLocalStorage;
-	reportNormalMode = function () {
-		return callback(false);
-	};
-	reportPrivateMode = function () {
-		return callback(true);
-	};
-	tryLocalStorage = function () {
-		var error;
+/*
+	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) {
-				return reportNormalMode();
+				reportNormalMode();
 			} else {
 				localStorage.x = 1;
 				localStorage.removeItem('x');
-				return reportNormalMode();
+				reportNormalMode();
 			}
-		} catch (error1) {
-			error = error1;
-			return reportPrivateMode();
+		} catch (error) {
+			reportPrivateMode();
 		}
 	};
-	tryIndexedDB = function () {
-		var db, error;
+
+	const tryIndexedDB = () => {
 		try {
-			db = indexedDB.open('test');
+			const db = indexedDB.open('test');
 			db.onsuccess = reportNormalMode;
-			return (db.onerror = reportPrivateMode);
-		} catch (error1) {
-			error = error1;
-			return reportPrivateMode();
+			db.onerror = reportPrivateMode;
+		} catch (error) {
+			reportPrivateMode();
 		}
 	};
 
 	// Blink
 	if (window.webkitRequestFileSystem) {
-		return window.webkitRequestFileSystem(
+		window.webkitRequestFileSystem(
 			window.TEMPORARY,
 			1,
 			reportNormalMode,
@@ -50,30 +43,29 @@ privateBrowsingMode = function (callback) {
 		);
 		// Firefox
 	} else if ('MozAppearance' in document.documentElement.style) {
-		return tryIndexedDB();
+		tryIndexedDB();
 		// Safari
 	} else if (/constructor/i.test(window.HTMLElement)) {
-		return tryLocalStorage();
+		tryLocalStorage();
 	} else if (
 		!window.indexedDB &&
 		(window.PointerEvent || window.MSPointerEvent)
 	) {
-		return reportPrivateMode();
+		reportPrivateMode();
 	} else {
 		// Rest
-		return reportNormalMode();
+		reportNormalMode();
 	}
 };
 
 export default {
-	init: function () {
-		return privateBrowsingMode(function (value) {
-			var report;
-			report = {
+	init() {
+		privateBrowsingMode((value) => {
+			const report = {
 				inPrivateBrowsingMode: value,
 			};
-			return transmit.sendMore(report);
+			transmit.sendMore(report);
 		});
 	},
-	privateBrowsingMode: privateBrowsingMode,
-};
+	privateBrowsingMode,
+};

package/assets/support.js

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

package/assets/transmit.js

@@ -1,64 +1,47 @@
-// Generated by CoffeeScript 2.7.0
-var buildQueryString,
-	bumpViewId,
-	generatePageViewId,
-	isDefined,
-	ophanRemoteHost,
-	ref,
-	ref1,
-	ref2,
-	send,
-	sendInitial,
-	sendMore,
-	smartEncode,
-	viewId,
-	hasProp = {}.hasOwnProperty;
-
-ophanRemoteHost =
-	(typeof window !== 'undefined' && window !== null
-		? window.ophanRemoteHost
-		: void 0) || 'https://ophan.theguardian.com';
-
-generatePageViewId = function () {
-	return (
-		new Date().getTime().toString(36) +
-		'xxxxxxxxxxxx'.replace(/x/g, function () {
-			return Math.floor(Math.random() * 36).toString(36);
-		})
-	);
+const ophanRemoteHost = window?.ophanRemoteHost || '//ophan.theguardian.com';
+
+/**
+ * @returns {string}
+ */
+const generatePageViewId = () => {
+	return `${new Date().getTime().toString(36)}${'xxxxxxxxxxxx'.replace(
+		/x/g,
+		() => Math.floor(Math.random() * 36).toString(36),
+	)}`;
 };
 
 //  guardian.config.ophan.pageViewId is now pregenerated in
 //  the Guardian Frontend Project (https://github.com/guardian/frontend)
 //  frontend/common/app/templates/inlineJS/blocking/config.scala.js
 //  If you're going to change the generation method, please update that one too
-viewId =
-	(ref =
-		typeof guardian !== 'undefined' && guardian !== null
-			? (ref1 = guardian.config) != null
-				? (ref2 = ref1.ophan) != null
-					? ref2.pageViewId
-					: void 0
-				: void 0
-			: void 0) != null
-		? ref
-		: generatePageViewId();
-
-bumpViewId = function () {
-	return (viewId = generatePageViewId());
+let viewId;
+if (typeof guardian !== 'undefined') {
+	viewId = guardian.config?.ophan?.pageViewId ?? generatePageViewId();
+} else {
+	viewId = generatePageViewId();
+}
+
+const bumpViewId = () => {
+	viewId = generatePageViewId();
 };
 
-// send the initial event associated with this page view
-// store the resulting page view id
-// this must only ever be called *once* subsequent calls will
-// be ignored
-sendInitial = function (obj) {
-	return send(ophanRemoteHost + `/img/1?${buildQueryString(obj)}`);
+/**
+ * send the initial event associated with this page view
+ * store the resulting page view id
+ * this must only ever be called *once* subsequent calls will
+ * be ignored
+ * @param {Object} obj - The data to be sent.
+ */
+const sendInitial = (obj) => {
+	send(`${ophanRemoteHost}/img/1?${buildQueryString(obj)}`);
 };
 
-// send more data - if initial hasn't been sent, queue up and wait for the
-// initial send to occur
-smartEncode = function (value) {
+/**
+ * Encodes a value for URL transmission.
+ * @param {(string|number)} value - The value to encode.
+ * @returns {string} The encoded value.
+ */
+const smartEncode = (value) => {
 	if (typeof value === 'string' || typeof value === 'number') {
 		return encodeURIComponent(value);
 	} else {
@@ -66,85 +49,95 @@ smartEncode = function (value) {
 	}
 };
 
-sendMore = function (obj, f) {
-	var prop, url, value, values;
-	if (!JSON) {
-		return;
-	}
-	values = (function () {
-		var results;
-		results = [];
-		for (prop in obj) {
-			if (!hasProp.call(obj, prop)) continue;
-			value = obj[prop];
-			if (isDefined(value)) {
-				results.push(`${encodeURIComponent(prop)}=${smartEncode(value)}`);
-			}
+/**
+ * Used for sending additional events after the initial PageView event has been sent, such as attention events.
+ * @param {Object} obj - The data object to be sent.
+ * @param {Function} [f] - An optional callback function. This is used by consumers of this library.
+ */
+const sendMore = (obj, f) => {
+	if (!JSON) return;
+
+	const values = [];
+	for (const prop in obj) {
+		if (obj.hasOwnProperty(prop) && isDefined(obj[prop])) {
+			values.push(`${encodeURIComponent(prop)}=${smartEncode(obj[prop])}`);
 		}
-		return results;
-	})();
-	if (!values.length) {
+	}
+
+	if (values.length === 0) {
 		return;
 	}
-	url = `${ophanRemoteHost}/img/2?viewId=${viewId}&${values.join('&')}`;
-	return send(url, f);
+
+	const url = `${ophanRemoteHost}/img/2?viewId=${viewId}&${values.join('&')}`;
+	send(url, f);
 };
 
-isDefined = function (v) {
+/**
+ * Checks if a value is defined and not null.
+ * @param {*} v - The value to check.
+ * @returns {boolean} True if the value is defined, false otherwise.
+ */
+const isDefined = (v) => {
 	if (Array.isArray(v)) {
-		return v.length;
+		return !!v.length;
 	} else {
 		return v != null;
 	}
 };
 
-buildQueryString = function (obj) {
-	var prop, value, values;
+/**
+ * Builds a query string from an object.
+ * @param {Object} obj - The object to convert to a query string.
+ * @returns {string} The resulting query string.
+ */
+const buildQueryString = (obj) => {
 	obj.viewId = viewId;
-	values = (function () {
-		var results;
-		results = [];
-		for (prop in obj) {
-			if (!hasProp.call(obj, prop)) continue;
-			value = obj[prop];
-			if (value != null) {
-				results.push(
-					`${encodeURIComponent(prop)}=${encodeURIComponent(value)}`,
-				);
-			}
+
+	const values = [];
+	for (const prop in obj) {
+		if (obj.hasOwnProperty(prop) && obj[prop] != null) {
+			values.push(`${encodeURIComponent(prop)}=${encodeURIComponent(obj[prop])}`);
 		}
-		return results;
-	})();
+	}
+
 	return values.join('&');
 };
 
-send = function (url, f) {
-	var checker, fetchOptions, image;
+/**
+ * Sends data to a specified URL, i.e.: the Ophan Tracker backend service.
+ * @param {string} url - The URL to send data to.
+ * @param {() => void} [f] - An optional callback function.
+ */
+const send = (url, f) => {
 	if (typeof fetch === 'function') {
-		fetchOptions = {
-			method: 'GET',
-			keepalive: true,
-		};
-		return fetch(url, fetchOptions).then(function () {
-			return typeof f === 'function' ? f() : void 0;
-		});
+		return fetch(url, { method: 'GET', mode: 'no-cors', keepalive: true, credentials: "include" }).then(() => f?.());
 	} else {
-		image = new Image();
-		checker = setInterval(function () {
+		const image = new Image();
+		const checker = setInterval(() => {
 			if (image.complete) {
 				if (typeof f === 'function') {
 					f();
 				}
-				return clearInterval(checker);
+				clearInterval(checker);
 			}
 		}, 10);
-		return (image.src = url);
+		image.src = url;
 	}
 };
 
 export default {
-	sendInitial: sendInitial,
-	sendMore: sendMore,
-	viewId: viewId,
-	bumpViewId: bumpViewId,
+	sendInitial,
+	sendMore,
+	viewId,
+	bumpViewId,
 };
+
+/**
+ * Exports for testing purposes.
+ */
+export const _testExports = {
+	generatePageViewId,
+	smartEncode,
+	isDefined,
+	buildQueryString,
+};

package/assets/visibility.js

@@ -1,20 +1,23 @@
-// Generated by CoffeeScript 2.7.0
 export default {
-	state: function () {
-		return (
-			document.visibilityState ||
-			document.webkitVisibilityState ||
-			document.mozVisibilityState ||
-			document.msVisibilityState
-		);
-	},
-	changeEvent: document.visibilityState
-		? 'visibilitychange'
-		: document.webkitVisibilityState
-			? 'webkitvisibilitychange'
-			: document.mozVisibilityState
-				? 'mozvisibilitychange'
-				: document.msVisibilityState
-					? 'msvisibilitychange'
-					: void 0,
+	state: () =>
+		document.visibilityState ||
+		document.webkitVisibilityState ||
+		document.mozVisibilityState ||
+		document.msVisibilityState,
+
+	changeEvent: getChangeEvent(),
+
 };
+
+function getChangeEvent() {
+	if (document.visibilityState) {
+		return 'visibilitychange';
+	} else if (document.webkitVisibilityState) {
+		return 'webkitvisibilitychange';
+	} else if (document.mozVisibilityState) {
+		return 'mozvisibilitychange';
+	} else if (document.msVisibilityState) {
+		return 'msvisibilitychange';
+	}
+	return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/ophan-tracker-js",
-	"version": "2.1.0-next.1",
+	"version": "2.1.0-next.2",
 	"type": "module",
 	"engines": {
 		"node": ">=16"

package/readme.md

@@ -10,7 +10,7 @@ $ npm install ophan-tracker-js
 
 ## Contribute
 
-#### Proxy tracker-ts:
+#### Proxy tracker-js:
 
 1. Install dependencies
 
@@ -19,28 +19,22 @@ $ npm install ophan-tracker-js
     .../ophan/tracker-js $ npm install
     ```
 
-2. In one terminal window:
-
-    ```
-    .../ophan/tracker-js $ npm run coffee-to-esm:watch
-    ```
-
-3. In another terminal window:
+2. In another terminal window:
 
     ```
     .../ophan/tracker-js $ lighttpd -f lighttpd.conf -D
     ```
 
-4. Install FoxyProxy (https://getfoxyproxy.org/downloads/) in your browser and create a rule that forces j.ophan.co.uk 
+3. Install FoxyProxy (https://getfoxyproxy.org/downloads/) in your browser and create a rule that forces j.ophan.co.uk 
 to localhost 8000. (For me FoxyProxy needed a few switches on and off before it decided to start talking to lighttpd.)
 
-5. In another terminal window, start a server that is [running the Guardian frontend](https://github.com/guardian/frontend/blob/main/docs/01-start-here/01-installation-steps.md)
+4. In another terminal window, start a server that is [running the Guardian frontend](https://github.com/guardian/frontend/blob/main/docs/01-start-here/01-installation-steps.md)
 
-6. Navigate to where you are running the Guardian locally (e.g. https://localhost:9000/uk)
+5. Navigate to where you are running the Guardian locally (e.g. https://localhost:9000/uk)
 
-7. Ensure FoxyProxy is enabled
+6. Ensure FoxyProxy is enabled
 
-8. Develop with pleasure
+7. Develop with pleasure
 
 ## Publish
 
@@ -62,8 +56,14 @@ We use `changesets` for automated publishing of the NPM package:
    
 3. When the PR is merged, the [`changesets` github action](https://github.com/changesets/action) will create a new PR, [example here](https://github.com/guardian/ophan/pull/5626). On merging this generated PR, the action will publish to NPM. (This checks the subdirectory correctly.)
 
-_Note:_ This seems like an unnecessary extra step and another PR to merge. This action is useful for multi-package repos, and packages with more frequent changes where it consolidates changes from multiple PR's into a single release. This therefore does not apply to us, but we've had issues publishing straight to NPM via the initial action on merge to main.
-
 ##### S3 Bucket
 
 * [https://j.ophan.co.uk/](https://j.ophan.co.uk/jobs.js) - CDN/S3, [deployed through RiffRaff](https://riffraff.gutools.co.uk/deployment/history?projectName=ophan%3A%3Aophan-tracker-js&page=1) and used by some Guardian sites like https://jobs.theguardian.com/. An advantage of this approach is that sites using it immediately get Tracker JS updates, without developer intervention.
+
+##### Rollup
+
+The generated files from Rollup are only used for publishing to the CDN to use SystemJS / AMD
+
+##### Example Usage
+
+You can see example usage of the library on theguardian.com [here](https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/client/ophan/ophan.ts)