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

package/assets/adblock-detection.js

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

package/assets/attention.js

@@ -0,0 +1,160 @@
+// Generated by CoffeeScript 2.7.0
+import transmit from './transmit.js';
+
+import components from './components.js';
+
+// The upworthy definition of attention minutes, from
+// http://upworthy.github.io/2014/06/implementing-attention-minutes-part-1/ :
+
+// "We consider the page to have the user’s attention if
+//  1. some activity is happening on the page. For our purposes this means:
+//     1. the page currently has focus
+//     2. and the user has interacted with the page within a certain timeout
+//  2. or a video is playing on the page
+//  Attention Minutes, then, are the total number of minutes that a user has spent on
+//  a page where the above conditions have held true."
+
+// our definition of "within a certain timeout" above:
+const ATTENTIONDECAY = 5000;
+
+// our definition of "the user has interacted with the page"
+const EVENTS = [
+	'focus',
+	'click',
+	'scroll',
+	'mousemove',
+	'touchstart',
+	'touchend',
+	'touchcancel',
+	'touchleave',
+	'touchmove',
+	'keyup',
+	'keydown',
+];
+
+const REPORTINGINTERVAL = 10000;
+
+// total attention time so far on this page
+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.
+let unrecordedAttentionStarted = null;
+
+// the attention time we last reported to ophan
+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
+let decayTimerId = null;
+
+// is video currently playing?
+let videoPlaying = false;
+
+const cancelDecayTimer = () => {
+	if (decayTimerId != null) {
+		window.clearTimeout(decayTimerId);
+	}
+	decayTimerId = null;
+};
+
+const makeActive = () => {
+	if (unrecordedAttentionStarted == null) {
+		unrecordedAttentionStarted = performance.now();
+	}
+	components.startMonitoring();
+	cancelDecayTimer();
+	decayTimerId = window.setTimeout(() => {
+		if (!videoPlaying) {
+			makeInactive();
+		}
+	}, ATTENTIONDECAY);
+};
+
+const incrementTotalAttentionTimeByUnrecordedAmount = () => {
+	if (unrecordedAttentionStarted != null) {
+		const now = performance.now();
+		const unrecordedMs = Math.min(
+			now - unrecordedAttentionStarted,
+			REPORTINGINTERVAL,
+		);
+		totalAttentionMs += unrecordedMs;
+		unrecordedAttentionStarted = now;
+	}
+};
+
+const makeInactive = () => {
+	cancelDecayTimer();
+	components.stopMonitoring();
+	incrementTotalAttentionTimeByUnrecordedAmount();
+	unrecordedAttentionStarted = null;
+};
+
+const reporter = () => {
+	incrementTotalAttentionTimeByUnrecordedAmount();
+	if (totalAttentionMs !== reportedTotalAttentionMs) {
+		const report = {
+			attentionMs: Math.round(totalAttentionMs),
+		};
+		const componentAttentionTimes = components.getAttentionTimes();
+		if (Object.keys(componentAttentionTimes).length) {
+			report.componentAttentionMs = componentAttentionTimes;
+		}
+		transmit.sendMore(report);
+		reportedTotalAttentionMs = totalAttentionMs;
+	}
+};
+
+const initComponent = (name, el, visibilityThreshold = 0.5) => {
+	components.registerComponent(
+		name,
+		el,
+		visibilityThreshold,
+		REPORTINGINTERVAL,
+	);
+};
+
+const initAttention = (visibility) => {
+	EVENTS.forEach((event) => {
+		window.addEventListener(event, makeActive);
+	});
+
+	document.addEventListener(
+		visibility.changeEvent,
+		() => {
+			if (visibility.state() === 'visible') {
+				makeActive();
+			} else {
+				makeInactive();
+			}
+		},
+		false,
+	);
+
+	document.addEventListener('videoPlaying', () => {
+		videoPlaying = true;
+		makeActive();
+	});
+	document.addEventListener('videoEnded', () => {
+		videoPlaying = false;
+		makeInactive();
+	});
+	document.addEventListener('videoPause', () => {
+		videoPlaying = false;
+		makeInactive();
+	});
+
+	window.setTimeout(reporter, 100);
+	window.setInterval(reporter, REPORTINGINTERVAL);
+};
+
+const setEventEmitter = (emitter) => {
+	components.setEventEmitter(emitter);
+};
+
+export default {
+	init: initAttention,
+	initComponent: initComponent,
+	setEventEmitter: setEventEmitter,
+};

package/assets/campaign.js

@@ -0,0 +1,25 @@
+// Generated by CoffeeScript 2.7.0
+import transmit from './transmit.js';
+import perf from './perf.js';
+
+const start = perf?.timing?.domComplete ?? performance.now();
+
+// DFP ads
+if (typeof googletag !== 'undefined' && googletag !== null) {
+	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

@@ -0,0 +1,80 @@
+import ophan from './core.js';
+
+import transmit from './transmit.js';
+
+/**
+ * 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);
+};
+
+/**
+ * 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)
+	);
+};
+
+/**
+ * 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) {
+			let anchorTarget, info;
+			anchorTarget = validAncestorAnchorElement(e.target);
+			info = {
+				from: [location.protocol, '//', location.host, location.pathname].join(
+					'',
+				),
+				to: anchorTarget ? anchorTarget.href : void 0,
+				referringComponent: getContainingComponent(e.target),
+				referringDataLinkNames: getDataLinkNames(e.target),
+				refPlatform: ophan.servingPlatform(),
+				refViewId: ophan.viewId,
+			};
+			if (info.referringDataLinkNames != null) {
+				transmit.sendMore({
+					clickComponent: info.referringComponent,
+					clickLinkNames: info.referringDataLinkNames,
+				});
+			}
+			if (anchorTarget != null) {
+				// then we may be about to navigate away from this page, so store to send on next request
+				return ophan.storeDataToSendOnNextEvent(info);
+			}
+		},
+		false,
+	);
+}
+
+export default {
+	getDataLinkNames: getDataLinkNames,
+};

package/assets/components.js

@@ -0,0 +1,209 @@
+/**
+ * @type {Component[]}
+ */
+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.
+ * If not on theguardian.com, we default to the native scroll event
+ * @type {Object|null}
+ */
+let eventEmitter = null;
+
+// Tracks attention time of elements on the page with data-component attributes.
+// This should always be less than or equal to the page attention time.
+// If the page does not have attention, no component has attention.
+// If the page does have attention, a given component *may* also have
+// attention, if it is within the viewport and not hidden.
+class Component {
+	/**
+	 * Component constructor.
+	 * @param {string} name - The name of the component.
+	 * @param {HTMLElement} element - The DOM element of the component.
+	 * @param {number} visibilityThreshold1 -
+	 *    visibilityThreshold represents the fraction of each component that must
+	 *    be in the viewport before it is considered visible.
+	 *    e.g. 0.5 means that half the height or width must be in the viewport
+	 *    1 means that the entire element must be in the viewport
+	 * @param {number} reportingInterval1 - ??
+	 */
+	constructor(name, element, visibilityThreshold1, reportingInterval1) {
+		this.name = name;
+		this.element = element;
+		this.visibilityThreshold = visibilityThreshold1;
+		this.reportingInterval = reportingInterval1;
+		this.visible = false;
+		// total attention time so far for this element
+		this.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.
+		this.unrecordedAttentionStarted = null;
+		// the attention time when getAttentionTime() was last called
+		this.reportedTotalAttentionMs = 0;
+		this.usingEmitter = false;
+		this.visCheck = this.checkVisibility.bind(this);
+		if (eventEmitter != null) {
+			this.usingEmitter = true;
+			eventEmitter.on('window:throttledScroll', this.visCheck);
+		} else {
+			window.addEventListener('scroll', this.visCheck);
+		}
+		window.addEventListener('resize', this.visCheck);
+	}
+
+	isVisible(threshold = 1) {
+		if (!this.element.offsetParent) {
+			// exclude hidden elements
+			// will also exclude position: fixed elements but we don't care about these
+			// (because their attention time would always be the same as the whole page)
+			// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+			return false;
+		}
+
+		const box = this.element.getBoundingClientRect();
+		const width = box.width;
+		const height = box.height;
+		const windowHeight =
+			window.innerHeight || document.documentElement.clientHeight;
+		const windowWidth =
+			window.innerWidth || document.documentElement.clientWidth;
+
+		return (
+			box.left >= -(width * (1 - threshold)) &&
+			box.top >= -(height * (1 - threshold)) &&
+			box.right <= windowWidth + width * (1 - threshold) &&
+			box.bottom <= windowHeight + height * (1 - threshold)
+		);
+	}
+
+	visibilityHasChanged() {
+		const wasVisible = this.visible;
+		this.visible = this.isVisible(this.visibilityThreshold);
+		return wasVisible !== this.visible;
+	}
+
+	rebindToEventEmitter() {
+		if (!this.usingEmitter && eventEmitter != null) {
+			window.removeEventListener('scroll', this.visCheck);
+			this.usingEmitter = true;
+			return eventEmitter.on('window:throttledScroll', this.visCheck);
+		}
+	}
+
+	checkVisibility() {
+		this.rebindToEventEmitter();
+		if (this.visibilityHasChanged()) {
+			return this.visible ? this.makeActive() : this.makeInactive();
+		}
+	}
+
+	makeActive() {
+		// mark when the latest period of attention began,
+		// if we're not already in an attention period
+		return this.unrecordedAttentionStarted != null
+			? this.unrecordedAttentionStarted
+			: (this.unrecordedAttentionStarted = performance.now());
+	}
+
+	makeInactive() {
+		this.incrementTotalAttentionTimeByUnrecordedAmount();
+		return (this.unrecordedAttentionStarted = null);
+	}
+
+	hadAttentionSinceLastGet() {
+		this.incrementTotalAttentionTimeByUnrecordedAmount();
+		return this.totalAttentionMs !== this.reportedTotalAttentionMs;
+	}
+
+	getAttentionTime() {
+		this.incrementTotalAttentionTimeByUnrecordedAmount();
+		this.reportedTotalAttentionMs = this.totalAttentionMs;
+		return this.totalAttentionMs;
+	}
+
+	incrementTotalAttentionTimeByUnrecordedAmount() {
+		if (this.unrecordedAttentionStarted != null) {
+			const 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!
+			const unrecordedMs = Math.min(
+				now - this.unrecordedAttentionStarted,
+				this.reportingInterval,
+			);
+			this.totalAttentionMs += unrecordedMs;
+			return (this.unrecordedAttentionStarted = now);
+		}
+	}
+}
+
+/**
+ * Begins monitoring the components on the page for attention time.
+ * @returns {Array} Array of results from makeActive() for each visible component.
+ */
+const startMonitoring = () => {
+	return components
+		.filter((component) => component.isVisible())
+		.map((component) => component.makeActive());
+};
+
+/**
+ * Stops monitoring the components on the page for attention time.
+ * @returns {Array} Array of results from makeInactive() for each component.
+ */
+const stopMonitoring = () => {
+	return components.map((component) => component.makeInactive());
+};
+
+/**
+ * Retrieves the attention times for all components.
+ * @returns {Object}
+ */
+const getAttentionTimes = () => {
+	const obj = {};
+	for (const component of components) {
+		if (component.hadAttentionSinceLastGet()) {
+			// if there are duplicate component names, only the last one survives
+			obj[component.name] = Math.round(component.getAttentionTime());
+		}
+	}
+	return obj;
+};
+
+export default {
+	/**
+	 * @param {Object} emitter - The event emitter to set.
+	 * @returns {Object}
+	 */
+	setEventEmitter: function (emitter) {
+		return (eventEmitter = emitter);
+	},
+	startMonitoring,
+	stopMonitoring,
+	getAttentionTimes,
+
+	/** @type {(...args: ConstructorParameters<typeof Component>) => void} */
+	registerComponent: function (
+		name,
+		el,
+		visibilityThreshold,
+		reportingInterval,
+	) {
+		return components.push(
+			new Component(name, el, visibilityThreshold, reportingInterval),
+		);
+	},
+};

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