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

package/package.json

@@ -1,26 +1,30 @@
 {
-  "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"
-  }
+	"name": "@guardian/ophan-tracker-js",
+	"version": "2.1.0-next.0",
+	"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",
+		"@guardian/prettier": "^7.0.0",
+		"@rollup/plugin-babel": "6.0.3",
+		"@rollup/plugin-terser": "0.4.3",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"rollup": "3.28.0",
+		"rollup-jest": "^3.1.0"
+	},
+	"scripts": {
+		"build": "NODE_ENV=production npx rollup -c",
+		"build:test": "NODE_ENV=test npx rollup -c",
+		"test": "jest",
+		"format": "npx prettier --write ."
+	}
 }

package/readme.md

@@ -22,9 +22,7 @@ $ npm install ophan-tracker-js
 2. In one terminal window:
 
     ```
-    .../ophan/tracker-js $ grunt
-    .../ophan/tracker-js $ grunt watch
-
+    .../ophan/tracker-js $ npm run coffee-to-esm:watch
     ```
 
 3. In another terminal window:
@@ -50,46 +48,22 @@ to localhost 8000. (For me FoxyProxy needed a few switches on and off before it
 
 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.
+##### NPM
 
-**Log into NPM**
+We use `changesets` for automated publishing of the NPM package:
 
-```
-$ npm login
-```
-
-**Compile**
-
-```
-.../ophan/tracker-js $ npm install
-```
+1. Add a changeset, run the following command and follow the instructions
 
-**Publish**
+    ```
+    .../ophan/tracker-js $ npx changeset
+    ```
 
-```
-.../ophan/tracker-js $ npm publish
-```
+2. When you raise a PR, the changeset bot won’t correctly see that you have included a changeset – it only checks for the .changesets folder in the root of the repository, whereas we have it in a subdirectory. Don’t worry.
+   
+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.)
 
-**You will need to be added as an owner of `ophan-tracker-js`. To find the current owners:**
+_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.
 
-```
-$ npm owner ls @guardian/ophan-tracker-js 
-```
+##### S3 Bucket
 
-**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).
+* [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.

package/build/adblock-detection.js

@@ -1,24 +0,0 @@
-// 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/build/attention.js

@@ -1,149 +0,0 @@
-// 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/build/campaign.js

@@ -1,30 +0,0 @@
-// 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/build/click-path-capture.js

@@ -1,81 +0,0 @@
-// 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/build/components.js

@@ -1,167 +0,0 @@
-// Generated by CoffeeScript 2.7.0
-var Component, components, eventEmitter;
-
-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
-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.
-Component = class Component {
-  constructor(name1, element, visibilityThreshold1, reportingInterval1) {
-    this.name = name1;
-    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) {
-    var box, height, width, windowHeight, windowWidth;
-    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;
-    } else {
-      box = this.element.getBoundingClientRect();
-      width = box.right - box.left;
-      height = box.bottom - box.top;
-      windowHeight = window.innerHeight || document.documentElement.clientHeight;
-      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() {
-    var wasVisible;
-    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()) {
-      if (this.visible) {
-        return this.makeActive();
-      } else {
-        return 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() {
-    var now, unrecordedMs;
-    if (this.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 - this.unrecordedAttentionStarted, this.reportingInterval);
-      this.totalAttentionMs += unrecordedMs;
-      return this.unrecordedAttentionStarted = now;
-    }
-  }
-
-};
-
-export default {
-  setEventEmitter: function(emitter) {
-    return eventEmitter = emitter;
-  },
-  startMonitoring: function() {
-    var component, i, len, results;
-    results = [];
-    for (i = 0, len = components.length; i < len; i++) {
-      component = components[i];
-      if (component.isVisible()) {
-        results.push(component.makeActive());
-      }
-    }
-    return results;
-  },
-  stopMonitoring: function() {
-    var component, i, len, results;
-    results = [];
-    for (i = 0, len = components.length; i < len; i++) {
-      component = components[i];
-      results.push(component.makeInactive());
-    }
-    return results;
-  },
-  getAttentionTimes: function() {
-    var component, i, len, obj;
-    obj = {};
-    for (i = 0, len = components.length; i < len; i++) {
-      component = components[i];
-      if (component.hadAttentionSinceLastGet()) {
-        // if there are duplicate component names, only the last one survives  
-        obj[component.name] = Math.round(component.getAttentionTime());
-      }
-    }
-    return obj;
-  },
-  // 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
-  registerComponent: function(name, el, visibilityThreshold, reportingInterval) {
-    return components.push(new Component(name, el, visibilityThreshold, reportingInterval));
-  }
-};

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