@phantomstudios/ft-lib 0.2.0

package/src/utils/attention.js

@@ -0,0 +1,138 @@
+import * as oViewport from "@financial-times/o-viewport";
+
+const ATTENTION_INTERVAL = 15000;
+const ATTENTION_EVENTS = [
+  "load",
+  "click",
+  "focus",
+  "scroll",
+  "mousemove",
+  "touchstart",
+  "touchend",
+  "touchcancel",
+  "touchleave",
+];
+const UNATTENTION_EVENTS = ["blur"];
+const EXIT_EVENTS = ["beforeunload", "unload", "pagehide"];
+
+export class Attention {
+  totalAttentionTime = 0;
+  startAttentionTime;
+  endAttentionTime;
+  hasSentEvent = false;
+  oTracker;
+
+  constructor(oTracker) {
+    this.oTracker = oTracker;
+    this.init();
+  }
+
+  init() {
+    //Add events for all the other Attention events
+    for (let i = 0; i < ATTENTION_EVENTS.length; i++) {
+      window.addEventListener(ATTENTION_EVENTS[i], (ev) =>
+        this.startAttention(ev)
+      );
+    }
+
+    for (let i = 0; i < UNATTENTION_EVENTS.length; i++) {
+      window.addEventListener(UNATTENTION_EVENTS[i], (ev) =>
+        this.endAttention(ev)
+      );
+    }
+
+    // Need to wait for this to be available
+    oViewport.listenTo("visibility");
+    document.body.addEventListener(
+      "oViewport.visibility",
+      (ev) => this.handleVisibilityChange(ev),
+      false
+    );
+
+    this.addVideoEvents();
+
+    // Add event to send data on unload
+    EXIT_EVENTS.forEach((event) => {
+      window.addEventListener(event, () => {
+        if (this.hasSentEvent) {
+          return;
+        }
+        this.hasSentEvent = true;
+        this.endAttention();
+        this.oTracker.eventDispatcher({
+          category: "page",
+          action: "interaction",
+          context: {
+            attention: {
+              total: this.totalAttentionTime,
+            },
+          },
+        });
+      });
+    });
+  }
+
+  startAttention() {
+    clearTimeout(this.attentionTimeout);
+    if (!this.startAttentionTime) {
+      this.startAttentionTime = new Date().getTime();
+    }
+    this.attentionTimeout = setTimeout(
+      () => this.endAttention(),
+      ATTENTION_INTERVAL
+    );
+  }
+
+  startConstantAttention() {
+    this.constantAttentionInterval = setInterval(
+      () => this.startAttention(),
+      ATTENTION_INTERVAL
+    );
+  }
+
+  endConstantAttention() {
+    this.endAttention();
+    clearInterval(this.constantAttentionInterval);
+  }
+
+  endAttention() {
+    if (this.startAttentionTime) {
+      this.endAttentionTime = new Date().getTime();
+      this.totalAttentionTime += Math.round(
+        (this.endAttentionTime - this.startAttentionTime) / 1000
+      );
+      clearTimeout(this.attentionTimeout);
+      this.startAttentionTime = null;
+    }
+  }
+
+  get() {
+    //getter should restart attention capturing as endAttention updates the value:
+    this.endAttention();
+    this.startAttention();
+    return this.totalAttentionTime;
+  }
+
+  addVideoEvents() {
+    this.videoPlayers = document.getElementsByTagName("video");
+    for (let i = 0; i < this.videoPlayers.length; i++) {
+      this.videoPlayers[i].addEventListener("playing", (ev) =>
+        this.startConstantAttention(ev)
+      );
+      this.videoPlayers[i].addEventListener("pause", (ev) =>
+        this.endConstantAttention(ev)
+      );
+      this.videoPlayers[i].addEventListener("ended", (ev) =>
+        this.endConstantAttention(ev)
+      );
+    }
+  }
+
+  handleVisibilityChange(ev) {
+    if (ev.detail.hidden) {
+      this.endAttention();
+    } else {
+      this.startAttention();
+    }
+  }
+}

package/src/utils/cookies.js

@@ -0,0 +1,9 @@
+export function getValueFromCookie(matcher) {
+  if (typeof document !== "undefined") {
+    return document.cookie.match(matcher) &&
+      RegExp.$1 !== "" &&
+      RegExp.$1 !== "null"
+      ? RegExp.$1
+      : null;
+  }
+}

package/src/utils/getTrace.js

@@ -0,0 +1,122 @@
+function sanitise(str) {
+  return typeof str === "string" ? str.trim() : str;
+}
+
+function assignIfUndefined(subject, target) {
+  for (const prop in subject) {
+    if (!target[prop]) {
+      target[prop] = subject[prop];
+    } else {
+      console.warn(`You can't set a custom property called ${prop}`);
+    }
+  }
+}
+
+const elementPropertiesToCollect = [
+  "nodeName",
+  "className",
+  "id",
+  "href",
+  "text",
+  "role",
+];
+
+// For a given container element, get the number of elements that match the
+// original element (siblings); and the index of the original element (position).
+const getSiblingsAndPosition = (el, originalEl, selector) => {
+  const siblings = Array.from(el.querySelectorAll(selector));
+  const position = siblings.findIndex((item) => item === originalEl);
+  if (position === -1) {
+    return;
+  }
+  return {
+    siblings: siblings.length,
+    position,
+  };
+};
+
+// Get all (sanitised) properties of a given element.
+const getAllElementProperties = (el) =>
+  elementPropertiesToCollect.reduce((returnObject, property) => {
+    if (el[property]) {
+      returnObject[property] = sanitise(el[property]);
+    } else if (el.getAttribute(property)) {
+      returnObject[property] = sanitise(el.getAttribute(property));
+    } else if (el.hasAttribute(property)) {
+      returnObject[property] = el.hasAttribute(property);
+    }
+    return returnObject;
+  }, {});
+
+// Get some properties of a given element.
+const getDomPathProps = (attrs, props) => {
+  // Collect any attribute that matches given strings.
+  attrs
+    .filter((attribute) =>
+      attribute.name.match(/^data-trackable|^data-o-|^aria-/i)
+    )
+    .forEach((attribute) => {
+      props[attribute.name] = attribute.value;
+    });
+
+  return props;
+};
+
+// Get only the custom data-trackable-context-? properties of a given element
+const getContextProps = (attrs, props, isOriginalEl) => {
+  const customProps = {};
+
+  // for the original element collect properties like className, nodeName
+  if (isOriginalEl) {
+    elementPropertiesToCollect.forEach((name) => {
+      if (typeof props[name] !== "undefined" && name !== "id") {
+        customProps[name] = props[name];
+      }
+    });
+  }
+
+  // Collect any attribute that matches given strings.
+  attrs
+    .filter((attribute) => attribute.name.match(/^data-trackable-context-/i))
+    .forEach((attribute) => {
+      customProps[attribute.name.replace("data-trackable-context-", "")] =
+        attribute.value;
+    });
+
+  return customProps;
+};
+
+function getTrace(el) {
+  const rootEl = document;
+  const originalEl = el;
+  const selector = originalEl.getAttribute("data-trackable")
+    ? `[data-trackable="${originalEl.getAttribute("data-trackable")}"]`
+    : originalEl.nodeName;
+  const trace = [];
+  const customContext = {};
+  while (el && el !== rootEl) {
+    const props = getAllElementProperties(el);
+    const attrs = Array.from(el.attributes);
+    let domPathProps = getDomPathProps(attrs, props);
+
+    // If the element happens to have a data-trackable attribute, get the siblings
+    // and position of the element (relative to the current element).
+    if (domPathProps["data-trackable"]) {
+      domPathProps = Object.assign(
+        domPathProps,
+        getSiblingsAndPosition(el, originalEl, selector)
+      );
+    }
+
+    trace.push(domPathProps);
+
+    const contextProps = getContextProps(attrs, props, el === originalEl);
+
+    assignIfUndefined(contextProps, customContext);
+
+    el = el.parentNode;
+  }
+  return { trace, customContext };
+}
+
+export default getTrace;