@guardian/ophan-tracker-js 2.0.3

package/build/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/build/attention.js

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

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

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

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

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