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

package/assets/adblock-detection.js

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

package/assets/attention.js

@@ -0,0 +1,187 @@
+// 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';
+
+// 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:
+ATTENTIONDECAY = 5000;
+
+// our definition of "the user has interacted with the page"
+EVENTS = [
+	'focus',
+	'click',
+	'scroll',
+	'mousemove',
+	'touchstart',
+	'touchend',
+	'touchcancel',
+	'touchleave',
+	'touchmove',
+	'keyup',
+	'keydown',
+];
+
+REPORTINGINTERVAL = 10000;
+
+// total attention time so far on this page
+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;
+
+// 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
+
+// the decay timer if we've set one
+decayTimerId = null;
+
+// is video currently playing?
+videoPlaying = false;
+
+cancelDecayTimer = function () {
+	if (decayTimerId != null) {
+		window.clearTimeout(decayTimerId);
+	}
+	return (decayTimerId = null);
+};
+
+makeActive = function () {
+	// mark when the latest period of attention began,
+	// if we're not already in an attention period
+	if (unrecordedAttentionStarted == null) {
+		unrecordedAttentionStarted = performance.now();
+	}
+	components.startMonitoring();
+	// start decay timer
+	cancelDecayTimer();
+	return (decayTimerId = window.setTimeout(function () {
+		if (!videoPlaying) {
+			return makeInactive();
+		}
+	}, ATTENTIONDECAY));
+};
+
+incrementTotalAttentionTimeByUnrecordedAmount = function () {
+	var now, unrecordedMs;
+	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(
+			now - unrecordedAttentionStarted,
+			REPORTINGINTERVAL,
+		);
+		totalAttentionMs += unrecordedMs;
+		return (unrecordedAttentionStarted = now);
+	}
+};
+
+makeInactive = function () {
+	cancelDecayTimer();
+	components.stopMonitoring();
+	incrementTotalAttentionTimeByUnrecordedAmount();
+	return (unrecordedAttentionStarted = null);
+};
+
+reporter = function () {
+	var componentAttentionTimes, report;
+	incrementTotalAttentionTimeByUnrecordedAmount();
+	if (totalAttentionMs !== reportedTotalAttentionMs) {
+		report = {
+			attentionMs: Math.round(totalAttentionMs),
+		};
+		componentAttentionTimes = components.getAttentionTimes();
+		if (Object.keys(componentAttentionTimes).length) {
+			report.componentAttentionMs = componentAttentionTimes;
+		}
+		transmit.sendMore(report);
+		return (reportedTotalAttentionMs = totalAttentionMs);
+	}
+};
+
+initComponent = function (name, el, visibilityThreshold = 0.5) {
+	return components.registerComponent(
+		name,
+		el,
+		visibilityThreshold,
+		REPORTINGINTERVAL,
+	);
+};
+
+initAttention = function (visibility) {
+	var event, i, len;
+	for (i = 0, len = EVENTS.length; i < len; i++) {
+		event = EVENTS[i];
+		// user interaction tracking
+		window.addEventListener(event, makeActive);
+	}
+	// focus tracking
+	document.addEventListener(
+		visibility.changeEvent,
+		function () {
+			if (visibility.state() === 'visible') {
+				return makeActive();
+			} else {
+				return makeInactive();
+			}
+		},
+		false,
+	);
+	// video tracking
+	document.addEventListener('videoPlaying', function () {
+		videoPlaying = true;
+		return makeActive();
+	});
+	document.addEventListener('videoEnded', function () {
+		videoPlaying = false;
+		return makeInactive();
+	});
+	document.addEventListener('videoPause', function () {
+		videoPlaying = false;
+		return makeInactive();
+	});
+	window.setTimeout(reporter, 100);
+	return window.setInterval(reporter, REPORTINGINTERVAL);
+};
+
+setEventEmitter = function (emitter) {
+	return components.setEventEmitter(emitter);
+};
+
+export default {
+	init: initAttention,
+	initComponent: initComponent,
+	setEventEmitter: setEventEmitter,
+};

package/assets/campaign.js

@@ -0,0 +1,40 @@
+// 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();
+
+// 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',
+						},
+					],
+				});
+			});
+	});
+}

package/assets/click-path-capture.js

@@ -0,0 +1,107 @@
+// 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);
+	}
+};
+
+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)
+		);
+	}
+};
+
+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());
+};
+
+if (typeof document.addEventListener === 'function') {
+	document.addEventListener(
+		'click',
+		function (e) {
+			var 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),
+		);
+	},
+};
+
+/**
+ * Exports for testing purposes.
+ */
+export const _testExports = {
+	startMonitoring,
+	stopMonitoring,
+	getAttentionTimes,
+	components,
+};

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,
+};