@guardian/ophan-tracker-js 2.1.1 → 2.1.2-next.0

package/assets/core.js

@@ -1,282 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,53 +0,0 @@
-let heatmapFired = false;
-
-const init =  () => {
-	const addHeatmap =  () => {
-		let heatmapParam;
-		if (
-			typeof localStorage !== 'undefined' &&
-			localStorage !== null &&
-			!heatmapFired
-		) {
-			heatmapFired = true;
-			heatmapParam = window.location.search.replace(
-				/^(?:.*[&\?]heatmap(?:\=([^&]*))?)?.*$/,
-				'$1',
-			);
-
-			if (heatmapParam === 'experimental') {
-				return (document.body.appendChild(
-					document.createElement('script'),
-				).src = '//dashboard.ophan.co.uk/assets/js/react/heatphan/index.js');
-			}
-
-			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,
-};

package/assets/holidays.js

@@ -1,11 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-import core from './core.js';
-import './transmit.js';
-import './click-path-capture.js';
-import './perf.js';
-import './campaign.js';
-
-const reportStatus = (platform, status) => {
-	return core.init(platform, status);
-};
-
-export default {
-	reportStatus,
-};

package/assets/iframe-tracking.js

@@ -1,88 +0,0 @@
-import clickCapture from './click-path-capture.js';
-
-const validIframeDomains = [
-	'.theguardian.com',
-	'.dev-theguardian.com',
-	'.thegulocal.com', // NB - leading dot is essential here to avoid matching on non-Guardian-owned domains
-];
-
-/**
- * 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) => originDomain.endsWith(domain))
-	) {
-		if (messageEvent.data.type === 'ophan-iframe-click-event') {
-			const eventObject = messageEvent.data.value;
-			const iFrame = document.getElementById(messageEvent.data.iframeId);
-			recordIframeClickEvent(iFrame, eventObject);
-		} else if (messageEvent.data.type === 'ophan-iframe-component-event') {
-			const eventObject = messageEvent.data.value;
-			recordIframeComponentEvent(eventObject);
-		}
-	}
-};
-
-/**
- * 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 {
-		const originURL = new URL(eventOrigin);
-		return originURL.host;
-	} catch (error) {
-		if (error instanceof TypeError) {
-			// We failed to parse origin as an URL, we should ignore the event
-			return null;
-		} else {
-			throw error;
-		}
-	}
-};
-
-/**
- * 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) ||
-			clickEvent.clickLinkNames;
-	}
-	window.guardian.ophan.record(clickEvent);
-};
-
-/**
- * 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'
-	);
-};
-
-/**
- * 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);

package/assets/interactive.js

@@ -1,17 +0,0 @@
-import core from './core.js';
-import transmit from './transmit.js';
-import attention from './attention.js';
-import './click-path-capture.js';
-
-if (window.guardian?.ophan) {
-	guardian.ophan;
-} else {
-	core.init('embed');
-	window.guardian = guardian || {};
-	guardian.ophan = {
-		setEventEmitter: attention.setEventEmitter,
-		trackComponentAttention: attention.initComponent,
-		record: transmit.sendMore,
-		viewId: transmit.viewId,
-	};
-}

package/assets/jobs-courses.js

@@ -1,11 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-// 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('manage-my-account');
-
-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);
-	}
-};
-
-const exports = {
-	sendInitialEvent,
-	record: transmit.sendMore,
-	viewId: transmit.viewId,
-};
-
-window.guardian = window.guardian || {};
-window.guardian.ophan = exports;
-
-export default exports;

package/assets/membership.js

@@ -1,25 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-// 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

@@ -1,40 +0,0 @@
-// 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;