@guardian/ophan-tracker-js 2.0.3

package/build/smart-news.js

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

package/build/support.js

@@ -0,0 +1,41 @@
+// 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() {
+  core.init("support");
+  if (window.addEventListener != null) {
+    return 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);
+  }
+};
+
+export default {
+  init: init,
+  sendInitialEvent: sendInitialEvent,
+  record: transmit.sendMore,
+  viewId: transmit.viewId
+};

package/build/transmit.js

@@ -0,0 +1,107 @@
+// Generated by CoffeeScript 2.7.0
+var buildQueryString, bumpViewId, generatePageViewId, isDefined, opanRemoteHost, ref, ref1, ref2, send, sendInitial, sendMore, smartEncode, viewId,
+  hasProp = {}.hasOwnProperty;
+
+opanRemoteHost = (typeof window !== "undefined" && window !== null ? window.opanRemoteHost : void 0) || "//ophan.theguardian.com";
+
+generatePageViewId = function() {
+  return new Date().getTime().toString(36) + 'xxxxxxxxxxxx'.replace(/x/g, function() {
+    return 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();
+};
+
+// 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(opanRemoteHost + `/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) {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return encodeURIComponent(value);
+  } else {
+    return encodeURIComponent(JSON.stringify(value));
+  }
+};
+
+sendMore = function(obj, f) {
+  var prop, value, values;
+  if (JSON) {
+    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)}`);
+        }
+      }
+      return results;
+    })();
+    if (values.length) {
+      return send(opanRemoteHost + `/img/2?viewId=${viewId}&${values.join('&')}`, f);
+    }
+  }
+};
+
+isDefined = function(v) {
+  if (Array.isArray(v)) {
+    return v.length;
+  } else {
+    return v != null;
+  }
+};
+
+buildQueryString = function(obj) {
+  var prop, value, values;
+  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)}`);
+      }
+    }
+    return results;
+  })();
+  return values.join("&");
+};
+
+send = function(url, f) {
+  var checker, image;
+  image = new Image();
+  checker = setInterval(function() {
+    if (image.complete) {
+      if (typeof f === "function") {
+        f();
+      }
+      return clearInterval(checker);
+    }
+  }, 10);
+  return image.src = url;
+};
+
+export default {
+  sendInitial: sendInitial,
+  sendMore: sendMore,
+  viewId: viewId,
+  bumpViewId: bumpViewId
+};

package/build/vendor/adBlockDetectionLib.js

@@ -0,0 +1,367 @@
+// Generated by CoffeeScript 2.7.0
+// TLDR; This is stripped down from the IAB ad block detection library.
+// https://github.com/InteractiveAdvertisingBureau/AdBlockDetection
+// The aforementioned library is not well maintained
+// and had work in progress network adblocking detection
+
+var init = function() {
+
+	var ofs = 'offset', cl = 'client';
+	var noop = function(){};
+
+	var testedOnce = false;
+	var testExecuting = false;
+
+	var isOldIEevents = (window.addEventListener === undefined);
+
+	/**
+	* Options set with default options initialized
+	*
+	*/	
+	var _options = {
+		loopDelay: 50,
+		maxLoop: 5,
+		debug: false,
+		found: noop,
+		notfound: noop,
+		complete: noop
+	}
+
+	var listeners = []; // event response listeners
+	var baitNode = null;
+	var quickBait = {
+		cssClass: 'ad-slot pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links'		
+	};
+	var baitTriggers = {
+		nullProps: [ofs + 'Parent'],
+		zeroProps: []
+	};
+
+	baitTriggers.zeroProps = [
+		ofs +'Height', ofs +'Left', ofs +'Top', ofs +'Width', ofs +'Height',
+		cl + 'Height', cl + 'Width'
+	];
+
+	// result object
+	var exeResult = {
+		quick: null,
+		remote: null
+	};
+
+	var findResult = null; // result of test for ad blocker
+
+	var timerIds = {
+		test: 0,
+		download: 0
+	};
+
+	function isFunc(fn){
+		return typeof(fn) == 'function';
+	}
+
+	/**
+	* Make a DOM element
+	*/
+	function makeEl(tag, attributes){
+		var k, v, el, attr = attributes;
+		var d = document;
+		
+		el = d.createElement(tag);
+		
+		if(attr){
+			for(k in attr){
+				if(attr.hasOwnProperty(k)){
+					el.setAttribute(k, attr[k]);
+				}
+			}
+		}
+		
+		return el;
+	}
+
+	function attachEventListener(dom, eventName, handler){
+		if(isOldIEevents){
+			dom.attachEvent('on' + eventName, handler);
+		}
+		else{
+			dom.addEventListener(eventName, handler, false);
+		}
+	}
+
+	function log(message, isError){
+		if(!_options.debug && !isError){
+			return;
+		}
+		if(window.console && window.console.log){
+			if(isError){
+				console.error('[ABD] ' + message);
+			}
+			else{
+				console.log('[ABD] ' + message);
+			}
+		}
+	}
+
+
+	function beginTest(bait){
+		log('start beginTest');
+		if(findResult == true){
+			return; 
+		}
+		testExecuting = true;
+		castBait(bait);
+		
+		exeResult.quick = 'testing';
+		
+		timerIds.test = setTimeout(
+			function(){ reelIn(bait, 1); },
+			5);
+	}
+
+	/**
+	* Create the bait node to see how the browser page reacts
+	*/
+	function castBait(bait){
+		var i, d = document, b = d.body;
+		var t;
+		var baitStyle = 'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;'
+		
+		if(bait == null || typeof(bait) == 'string'){
+			log('invalid bait being cast');
+			return;
+		}
+		
+		if(bait.style != null){
+			baitStyle += bait.style;
+		}
+		
+		baitNode = makeEl('div', {
+			'class': bait.cssClass,
+			'style': baitStyle
+		});
+		
+		log('adding bait node to DOM');
+
+		b.appendChild(baitNode);
+		
+		// touch these properties
+		for(i=0;i<baitTriggers.nullProps.length;i++){
+			t = baitNode[baitTriggers.nullProps[i]];
+		}
+		for(i=0;i<baitTriggers.zeroProps.length;i++){
+			t = baitNode[baitTriggers.zeroProps[i]];
+		}
+	}
+
+	/**
+	* Run tests to see if browser has taken the bait and blocked the bait element
+	*/
+	function reelIn(bait, attemptNum){
+		var i, k, v;
+		var body = document.body;
+		var found = false;
+		
+		if(baitNode == null){
+			log('recast bait');
+			castBait(bait || quickBait);
+		}
+
+		if(typeof(bait) == 'string'){
+			log('invalid bait used', true);
+			if(clearBaitNode()){
+				setTimeout(function(){
+					testExecuting = false;
+				}, 5);
+			}
+
+			return;
+		}
+
+		if(timerIds.test > 0){
+			clearTimeout(timerIds.test);
+			timerIds.test = 0;
+		}
+		
+		// test for issues
+
+		if(body.getAttribute('abp') !== null){
+			log('found adblock body attribute');
+			found = true;
+		}
+
+		for(i=0;i<baitTriggers.nullProps.length;i++){
+			if(baitNode[baitTriggers.nullProps[i]] == null){
+				if(attemptNum>4)
+				found = true;
+				log('found adblock null attr: ' + baitTriggers.nullProps[i]);
+				break;
+			}
+			if(found == true){
+				break;
+			}
+		}
+		
+		for(i=0;i<baitTriggers.zeroProps.length;i++){
+			if(found == true){
+				break;
+			}
+			if(baitNode[baitTriggers.zeroProps[i]] == 0){
+				if(attemptNum>4)
+				found = true;
+				log('found adblock zero attr: ' + baitTriggers.zeroProps[i]);
+			}
+		}
+
+		if(window.getComputedStyle !== undefined) {
+			var baitTemp = window.getComputedStyle(baitNode, null);
+			if(baitTemp.getPropertyValue('display') == 'none'
+			|| baitTemp.getPropertyValue('visibility') == 'hidden') {
+				if(attemptNum>4)
+				found = true;
+				log('found adblock computedStyle indicator');
+			}
+		}
+
+		testedOnce = true;
+		
+		if(found || attemptNum++ >= _options.maxLoop){
+			findResult = found;
+			log('exiting test loop - value: ' + findResult);
+			notifyListeners();
+			if(clearBaitNode()){
+				setTimeout(function(){
+					testExecuting = false;
+				}, 5);
+			}
+		}
+		else{
+			timerIds.test = setTimeout(function(){
+				reelIn(bait, attemptNum);
+			}, _options.loopDelay);
+		}
+	}
+
+	function clearBaitNode(){
+		if(baitNode === null){
+			return true;
+		}
+		
+		try{
+			if(isFunc(baitNode.remove)){
+				baitNode.remove();
+			}
+			document.body.removeChild(baitNode);
+		}
+		catch(ex){
+		}
+		baitNode = null;
+		
+		return true;		
+	}
+
+	/**
+	* Halt the test and any pending timeouts
+	*/
+	function stopFishing(){
+		if(timerIds.test > 0){
+			clearTimeout(timerIds.test);
+		}
+		if(timerIds.download > 0){
+			clearTimeout(timerIds.download);
+		}
+		
+		clearBaitNode();
+	}
+
+	/**
+	* Fire all registered listeners
+	*/
+	function notifyListeners(){
+		var i, funcs;
+		if(findResult === null){
+			return;
+		}
+		for(i=0;i<listeners.length;i++){
+			funcs = listeners[i];
+			try{			
+				if(funcs != null){
+					if(isFunc(funcs['complete'])){
+						funcs['complete'](findResult);
+					}
+					
+					if(findResult && isFunc(funcs['found'])){
+						funcs['found']();
+					}
+					else if(findResult === false && isFunc(funcs['notfound'])){
+						funcs['notfound']();
+					}
+				}
+			}
+			catch(ex){
+				log('Failure in notify listeners ' + ex.Message, true);
+			}
+		}
+	}
+
+	/**
+	* Attaches event listener or fires if events have already passed.
+	*/
+	function attachOrFire(){
+		var fireNow = false;
+		var fn;
+		
+		if(document.readyState){
+			if(document.readyState == 'complete'){
+				fireNow = true;
+			}
+		}
+		
+		fn = function(){
+			beginTest(quickBait, false);
+		}
+		
+		if(fireNow){
+			fn();
+		}
+		else{
+			attachEventListener(window, 'load', fn);
+		}
+	}
+
+
+	/**
+	* Public interface of adblock detector
+	*/
+	return function(options){
+		var k, v, funcs;
+		
+		if(!options){
+			return;
+		}
+		
+		funcs = {
+			complete: noop,
+			found: noop,
+			notfound: noop
+		};
+		
+		for(k in options){
+			if(options.hasOwnProperty(k)){
+				if(k == 'complete' || k == 'found' || k == 'notFound'){
+					funcs[k.toLowerCase()] = options[k];
+				}
+				else{
+					_options[k] = options[k];
+				}					
+			}
+		}
+		
+		listeners.push(funcs);
+		
+		attachOrFire();
+	}
+}
+;
+export default {
+  init: init()
+};

package/build/visibility.js

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

package/build/witness.js

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

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@guardian/ophan-tracker-js",
+  "version": "2.0.3",
+  "type": "module",
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "build/*.js",
+    "build/vendor/*.js"
+  ],
+  "main": "build/ng.js",
+  "devDependencies": {
+    "@babel/preset-env": "7.22.10",
+    "@changesets/cli": "^2.26.2",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-terser": "0.4.3",
+    "coffeescript": "2.7.0",
+    "rollup": "3.28.0"
+  },
+  "scripts": {
+    "coffee-to-esm:watch": "coffee --compile --watch --output build/ assets/coffee/ophan/",
+    "coffee-to-esm": "coffee --compile --output build/ assets/coffee/ophan/",
+    "prepublishOnly": "npm run coffee-to-esm"
+  }
+}

package/readme.md

@@ -0,0 +1,95 @@
+# Ophan Tracker JS
+
+Browser JavaScript client for Ophan.
+
+## Install
+
+```
+$ npm install ophan-tracker-js
+```
+
+## Contribute
+
+#### Proxy tracker-ts:
+
+1. Install dependencies
+
+    ```
+    $ brew install lighttpd
+    .../ophan/tracker-js $ npm install
+    ```
+
+2. In one terminal window:
+
+    ```
+    .../ophan/tracker-js $ grunt
+    .../ophan/tracker-js $ grunt watch
+
+    ```
+
+3. 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 
+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)
+
+6. Navigate to where you are running the Guardian locally (e.g. https://localhost:9000/uk)
+
+7. Ensure FoxyProxy is enabled
+
+8. Develop with pleasure
+
+## Publish
+
+#### Two formats for release
+
+When you make a change to Tracker JS, you must release on *both* these systems:
+
+* The NPM package [`@guardian/ophan-tracker-js`](https://www.npmjs.com/package/ophan-tracker-js), commonly used on internally developed Guardian sites like Guardian Frontend and Support Frontend.
+* [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.
+
+**Ensure that before you merge a change, you first bump the version in `package.json`. Please make sure you update the [changes.md](changes.md) file too. If you have added a new Ophan client to support a new platform, please add the path to the built output file to the files list in [`package.json`](https://github.com/guardian/ophan/blob/main/tracker-js/package.json#L4).**
+
+### Publish to NPM
+
+Whenever the Tracker script is changed, [its `ophan-tracker-js` NPM package](https://www.npmjs.com/package/ophan-tracker-js/access) will 
+need to be updated to a new version. 
+
+If you don't already have an NPM account, be sure to set up two-factor authentification.
+
+**Log into NPM**
+
+```
+$ npm login
+```
+
+**Compile**
+
+```
+.../ophan/tracker-js $ npm install
+```
+
+**Publish**
+
+```
+.../ophan/tracker-js $ npm publish
+```
+
+**You will need to be added as an owner of `ophan-tracker-js`. To find the current owners:**
+
+```
+$ npm owner ls @guardian/ophan-tracker-js 
+```
+
+**To add someone as an owner:**
+
+```
+npm owner add npm.username @guardian/ophan-tracker-js
+```
+
+More information on setting owners is available in [NPM's documentation](https://docs.npmjs.com/cli/v7/commands/npm-owner).