@phantomstudios/ft-lib 0.4.1-rc1 → 0.5.0-rc10

package/src/cmp/loadFtCmp.ts

@@ -0,0 +1,28 @@
+export function loadFtCmpScript(): Promise<void> {
+  if (document.getElementById("ft-cmp-loader")) {
+    return Promise.resolve();
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    const script: HTMLScriptElement = document.createElement("script");
+    script.id = "ft-cmp-loader";
+    script.async = true;
+    script.src = "https://consent-notice.ft.com/cmp.js";
+    script.referrerPolicy = window.location.hostname.endsWith(".ft.com")
+      ? "" // production hosts
+      : "no-referrer-when-downgrade"; // localhost / preview
+
+    script.onload = () => resolve();
+    script.onerror = () =>
+      reject(new Error("Sourcepoint CMP script failed to load"));
+
+    document.head.appendChild(script);
+  });
+}
+
+export function enqueueCmpCallback(cb: () => void): void {
+  if (!window._sp_) window._sp_ = {};
+  if (!window._sp_queue) window._sp_queue = [];
+
+  window._sp_queue!.push(cb);
+}

package/src/consentMonitor/index.ts

@@ -1,120 +1,143 @@
+import { interceptManageCookiesLinks } from "@financial-times/cmp-client";
 import Debug from "debug";
-const debug = Debug("@phntms/ft-lib");
+
+import { enqueueCmpCallback, loadFtCmpScript } from "../cmp/loadFtCmp";
+
+const debug = Debug("@phantomstudios/ft-lib/consentMonitor");
 
 const DEFAULT_DEV_HOSTS = ["localhost", "phq", ".app", "preview"];
 
-export class consentMonitor {
-  protected _consent = false;
-  protected _devHosts: string[];
-  protected _isDevEnvironment = false;
-  protected _hostname: string;
-  protected _isInitialized = false;
+interface ConsentReadyInfo {
+  consentedToAll: boolean;
+}
+type ConsentReadyHandler = (
+  legislation: string,
+  uuid: string,
+  tcData: unknown,
+  info: ConsentReadyInfo,
+) => void;
+type MessageChoiceHandler = (
+  legislation: string,
+  choiceId: number,
+  choiceTypeId: number,
+) => void;
 
-  constructor(hostname?: string, devHosts?: string[] | string) {
-    if (Array.isArray(devHosts)) {
-      this._devHosts = devHosts.concat(DEFAULT_DEV_HOSTS);
-    } else if (devHosts === undefined) {
-      this._devHosts = DEFAULT_DEV_HOSTS;
-    } else {
-      this._devHosts = DEFAULT_DEV_HOSTS;
-      this._devHosts.push(devHosts);
-    }
+const CMP_CHOICE_ACCEPT_ALL = 11;
+const CMP_CHOICE_REJECT_ALL = 13;
 
-    this._hostname = hostname || window.location.hostname;
-    this.init();
-  }
+export class ConsentMonitor {
+  private _consent = false;
+  private _devHosts: string[];
+  private _isDevEnvironment = false;
+  private _isInitialized = false;
 
-  get consent(): boolean {
+  public get consent(): boolean {
     return this._consent;
   }
-
-  get devHosts(): string[] | string {
+  public get devHosts(): string[] {
     return this._devHosts;
   }
-
-  get isDevEnvironment(): boolean {
+  public get isDevEnvironment(): boolean {
     return this._isDevEnvironment;
   }
-
-  get isInitialized(): boolean {
+  public get isInitialized(): boolean {
     return this._isInitialized;
   }
 
+  public get userHasConsented(): boolean {
+    return this._consent;
+  }
+
   getCookieValue = (name: string) =>
     document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)")?.pop() || "";
 
-  init = () => {
-    this.cookieConsentTest();
-    setInterval(this.cookieConsentTest, 3000);
+  constructor(hostname?: string, devHosts?: string[] | string) {
+    if (Array.isArray(devHosts)) {
+      this._devHosts = [...devHosts, ...DEFAULT_DEV_HOSTS];
+    } else if (devHosts === undefined) {
+      this._devHosts = [...DEFAULT_DEV_HOSTS];
+    } else {
+      this._devHosts = [...DEFAULT_DEV_HOSTS, devHosts];
+    }
 
-    //Simulate cookie consent behaviour in non-prod environments
-    this._devHosts.map(
-      (devHost) =>
-        this._hostname.includes(devHost) && this.setDevCookieHandler()
+    const hostToCheck = hostname ?? window.location.hostname;
+    this._isDevEnvironment = this._devHosts.some((h) =>
+      hostToCheck.includes(h),
     );
-  };
 
-  cookieConsentTest = () => {
-    if (window.permutive) {
-      if (!this._isInitialized) {
-        if (
-          this.getCookieValue("FTConsent").includes("behaviouraladsOnsite%3Aon")
-        ) {
-          this.permutiveConsentOn();
+    loadFtCmpScript()
+      .then(() => {
+        this.attachCmpListeners();
+        // const propertyConfig = window.location.hostname.endsWith("ft.com")
+        //   ? properties["FT_DOTCOM_PROD"]
+        //   : properties["FT_DOTCOM_TEST"];
+
+        // initialize CMP - duplicate?
+        //initSourcepointCmp({ propertyConfig });
+        // use cmp client lib to intercept footer 'Manage Cookies' links (opens privacy modal)
+        // Note, function requires very specific link: text = 'Manage Cookies' and href = 'https://ft.com/preferences/manage-cookies'
+      })
+      .catch((err) => console.error(err));
+  }
+
+  private attachCmpListeners(): void {
+    enqueueCmpCallback(() => {
+      const onReady: ConsentReadyHandler = (_l, _u, _t, info) => {
+        debug("onConsentReady:", info);
+        if (info.consentedToAll) {
+          this.enablePermutive();
         } else {
-          this.permutiveConsentOff();
+          this.disablePermutive();
         }
-        this._isInitialized = true;
-      } else if (
-        this.getCookieValue("FTConsent").includes(
-          "behaviouraladsOnsite%3Aon"
-        ) &&
-        !this.consent
-      ) {
-        debug("setting permutive tracking consent: on");
-        this.permutiveConsentOn();
-      } else if (
-        !this.getCookieValue("FTConsent").includes(
-          "behaviouraladsOnsite%3Aon"
-        ) &&
-        this.consent
-      ) {
-        debug("setting permutive tracking consent: off");
-        this.permutiveConsentOff();
-      }
-    }
-  };
+      };
 
-  setDevCookieHandler = () => {
-    this._isDevEnvironment = true;
-    debug("setting development environment from host match");
-    const oCookieMessage =
-      document.getElementsByClassName("o-cookie-message")[0];
-    if (oCookieMessage) {
-      const onCookieMessageAct = () => {
-        debug("setting development FT consent cookies");
-        document.cookie = "FTConsent=behaviouraladsOnsite%3Aon";
-        document.cookie = "FTCookieConsentGDPR=true";
-        oCookieMessage.removeEventListener(
-          "oCookieMessage.act",
-          onCookieMessageAct,
-          false
-        );
+      const onChoice: MessageChoiceHandler = (_l, _c, typeId) => {
+        debug("onMessageChoiceSelect:", typeId);
+        if (typeId === CMP_CHOICE_ACCEPT_ALL) this.enablePermutive();
+        else if (typeId === CMP_CHOICE_REJECT_ALL) this.disablePermutive();
+        // banner updated - check new cookie value to fire consent_update event
+        setTimeout(this.cookieConsentTest, 3000);
       };
-      oCookieMessage.addEventListener("oCookieMessage.act", onCookieMessageAct);
-    }
-  };
+      window._sp_.addEventListener?.("onConsentReady", onReady);
+      window._sp_.addEventListener?.("onMessageChoiceSelect", onChoice);
+      this._isInitialized = true;
+      interceptManageCookiesLinks();
+    });
+  }
 
-  permutiveConsentOn = () => {
-    window.permutive.consent({
+  private enablePermutive(): void {
+    if (this._consent) return;
+    debug("Permutive consent: ON");
+    window.permutive?.consent({
       opt_in: true,
       token: "behaviouraladsOnsite:on",
     });
     this._consent = true;
-  };
+  }
 
-  permutiveConsentOff = () => {
-    window.permutive.consent({ opt_in: false });
+  private disablePermutive(): void {
+    if (!this._consent) return;
+    debug("Permutive consent: OFF");
+    window.permutive?.consent({ opt_in: false });
     this._consent = false;
+  }
+
+  //check for FTConsent - cookiesOnSite to trigger custom consent_update event for GTM tags (banner updated)
+  cookieConsentTest = () => {
+    if (!this._isInitialized || !window || !window.dataLayer) return;
+    if (this.getCookieValue("FTConsent").includes("cookiesOnsite%3Aon")) {
+      //send consent_update event
+      window.dataLayer.push({
+        event: "consent_update",
+        consent: true,
+      });
+    } else {
+      window.dataLayer.push({
+        event: "consent_update",
+        consent: false,
+      });
+    }
   };
 }
+
+export { ConsentMonitor as consentMonitor };

package/src/gaTracker/index.ts

@@ -55,13 +55,13 @@ export class gaTracker {
           this.GTMEventDispatcher(
             category,
             action,
-            label || window.location.pathname //use pathname if label section has not been defined
+            label || window.location.pathname, //use pathname if label section has not been defined
           );
         } else {
           this.GtagEventDispatcher(
             category,
             action,
-            label || window.location.pathname
+            label || window.location.pathname,
           );
         }
       }
@@ -70,7 +70,7 @@ export class gaTracker {
 
   setUpFTNavigationLinksTracking() {
     const FTNavigationLinks = Array.from(
-      document.querySelectorAll(".o-header__drawer-menu-link")
+      document.querySelectorAll(".o-header__drawer-menu-link"),
     );
     if (FTNavigationLinks) {
       FTNavigationLinks.map((navLink) => {
@@ -119,7 +119,7 @@ export class gaTracker {
 
   setupFooterLinksTracking() {
     const FTFooterLinks = Array.from(
-      document.querySelectorAll(".o-footer__legal-links li a")
+      document.querySelectorAll(".o-footer__legal-links li a"),
     );
     if (FTFooterLinks) {
       FTFooterLinks.forEach((footerLink) => {

package/src/index.ts

@@ -1,8 +1,15 @@
-export { consentMonitor } from "./consentMonitor";
+import { FTTracking, TrackingOptions } from "./FTTracking";
+import { ConfigType, OrigamiEventType } from "./utils/yupValidator";
+
+export { FTTracking };
+export type { TrackingOptions };
+
+export { loadFtCmpScript, enqueueCmpCallback } from "./cmp/loadFtCmp";
+
+export { ConsentMonitor as consentMonitor } from "./consentMonitor";
 export { permutiveVideoUtils } from "./permutiveVideoUtils";
 export { reactPlayerTracking } from "./reactPlayerTracking";
 export { gaTracker } from "./gaTracker";
 export { oTracker } from "./oTracker";
 export { ytIframeTracking } from "./ytIframeTracking";
-export { FTTracking, TrackingOptions } from "./FTTracking";
-export { ConfigType, OrigamiEventType } from "./utils/yupValidator";
+export type { ConfigType, OrigamiEventType };

package/src/oTracker/index.ts

@@ -21,12 +21,12 @@ export class oTracker {
   constructor(config: ConfigType, options: TrackingOptions) {
     this._config = parseConfig(
       config,
-      options.disableAppFormatTransform || false
+      options.disableAppFormatTransform || false,
     );
     validateConfig(
       this._config,
       options.disableAppFormatTransform || false,
-      options.logValidationErrors || false
+      options.logValidationErrors || false,
     );
     this._config.source_id = oTracking.getRootID();
     this.options = options;
@@ -68,7 +68,7 @@ export class oTracker {
       detail.app = this.config.app;
       detail.product = this.config.product;
       document.body.dispatchEvent(
-        new CustomEvent("oTracking.event", { detail, bubbles: true })
+        new CustomEvent("oTracking.event", { detail, bubbles: true }),
       );
     } else {
       throw "Invalid event type";
@@ -92,7 +92,7 @@ export class oTracker {
           category: "brandedContent",
         },
         bubbles: true,
-      })
+      }),
     );
   }
 
@@ -104,7 +104,7 @@ export class oTracker {
           (elm) =>
             elm instanceof HTMLElement &&
             elm.hasAttribute &&
-            elm.hasAttribute("data-o-event")
+            elm.hasAttribute("data-o-event"),
         );
       if (trackableElement && trackableElement instanceof HTMLElement) {
         const data = trackableElement.getAttribute("data-o-event");

package/src/permutiveVideoUtils/index.ts

@@ -1,5 +1,5 @@
 import Debug from "debug";
-const debug = Debug("@phntms/ft-lib");
+const debug = Debug("@phantomstudios/ft-lib");
 export class permutiveVideoUtils {
   protected progressPermutiveMilestones: number[] = [0, 0.25, 0.5, 0.75, 1];
   protected _campaign: string;
@@ -26,7 +26,7 @@ export class permutiveVideoUtils {
   emitPermutiveProgressEvent = (
     duration: number,
     currentTime: number,
-    interval: any = undefined
+    interval: any = undefined,
   ) => {
     const progress = currentTime / (Math.floor(duration) - 1);
 

package/src/reactPlayerTracking/index.ts

@@ -3,7 +3,7 @@ import Debug from "debug";
 import { FTTracking } from "../FTTracking";
 import { permutiveVideoUtils } from "../permutiveVideoUtils";
 import { OrigamiEventType } from "../utils/yupValidator";
-const debug = Debug("@phntms/ft-lib");
+const debug = Debug("@phantomstudios/ft-lib");
 interface PlayerProgressEvent {
   played: number;
   loaded: number;
@@ -31,7 +31,7 @@ export class reactPlayerTracking {
     this.permutiveTracker = new permutiveVideoUtils(
       this.FTTracker.config.campaign,
       this.videoTitle,
-      this.videoUrl
+      this.videoUrl,
     );
   }
 
@@ -79,7 +79,7 @@ export class reactPlayerTracking {
     this.playedSeconds = reactPlayerProgress.playedSeconds;
     if (this.duration > 0) {
       this.playedPercent = Math.floor(
-        (Math.ceil(reactPlayerProgress.playedSeconds) / this.duration) * 100
+        (Math.ceil(reactPlayerProgress.playedSeconds) / this.duration) * 100,
       );
     }
 
@@ -99,7 +99,7 @@ export class reactPlayerTracking {
     debug("edit permutive progress event- " + this.playedSeconds);
     this.permutiveTracker?.emitPermutiveProgressEvent(
       this.duration,
-      this.playedSeconds
+      this.playedSeconds,
     );
   };
 }

package/src/types.d.ts

@@ -1,7 +1,31 @@
 declare module "@financial-times/o-tracking";
 declare module "@financial-times/o-viewport";
 
+interface ConsentOptions {
+  opt_in?: boolean;
+  token?: string;
+}
+
+declare module "@financial-times/cmp-client" {
+  export function interceptManageCookiesLinks(): void;
+  export const properties: {
+    [key: string]: any;
+  };
+  export function initSourcepointCmp(options?: {
+    propertyConfig?: any;
+  }): Promise<void>;
+}
+interface SourcepointCmpAPI {
+  queue?: Array<() => void>;
+  addEventListener?: (
+    eventName: string,
+
+    callback: (...args: any[]) => void,
+  ) => void;
+}
 interface Window {
+  _sp_: SourcepointCmpAPI;
+  _sp_queue?: Array<() => void>;
   dataLayer: any;
   gtag: any;
   permutive: {
@@ -13,11 +37,6 @@ interface Window {
   isOvideoPlayer?: boolean; //channels only
 }
 
-interface ConsentOptions {
-  opt_in?: boolean;
-  token?: string;
-}
-
 interface CallableConsent {
   ({}: ConsentOptions): void;
 }

package/src/utils/attention.js

@@ -31,13 +31,13 @@ export class Attention {
     //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)
+        this.startAttention(ev),
       );
     }
 
     for (let i = 0; i < UNATTENTION_EVENTS.length; i++) {
       window.addEventListener(UNATTENTION_EVENTS[i], (ev) =>
-        this.endAttention(ev)
+        this.endAttention(ev),
       );
     }
 
@@ -46,7 +46,7 @@ export class Attention {
     document.body.addEventListener(
       "oViewport.visibility",
       (ev) => this.handleVisibilityChange(ev),
-      false
+      false,
     );
 
     this.addVideoEvents();
@@ -79,14 +79,14 @@ export class Attention {
     }
     this.attentionTimeout = setTimeout(
       () => this.endAttention(),
-      ATTENTION_INTERVAL
+      ATTENTION_INTERVAL,
     );
   }
 
   startConstantAttention() {
     this.constantAttentionInterval = setInterval(
       () => this.startAttention(),
-      ATTENTION_INTERVAL
+      ATTENTION_INTERVAL,
     );
   }
 
@@ -99,7 +99,7 @@ export class Attention {
     if (this.startAttentionTime) {
       this.endAttentionTime = new Date().getTime();
       this.totalAttentionTime += Math.round(
-        (this.endAttentionTime - this.startAttentionTime) / 1000
+        (this.endAttentionTime - this.startAttentionTime) / 1000,
       );
       clearTimeout(this.attentionTimeout);
       this.startAttentionTime = null;
@@ -117,13 +117,13 @@ export class Attention {
     this.videoPlayers = document.getElementsByTagName("video");
     for (let i = 0; i < this.videoPlayers.length; i++) {
       this.videoPlayers[i].addEventListener("playing", (ev) =>
-        this.startConstantAttention(ev)
+        this.startConstantAttention(ev),
       );
       this.videoPlayers[i].addEventListener("pause", (ev) =>
-        this.endConstantAttention(ev)
+        this.endConstantAttention(ev),
       );
       this.videoPlayers[i].addEventListener("ended", (ev) =>
-        this.endConstantAttention(ev)
+        this.endConstantAttention(ev),
       );
     }
   }

package/src/utils/getTrace.js

@@ -53,7 +53,7 @@ const getDomPathProps = (attrs, props) => {
   // Collect any attribute that matches given strings.
   attrs
     .filter((attribute) =>
-      attribute.name.match(/^data-trackable|^data-o-|^aria-/i)
+      attribute.name.match(/^data-trackable|^data-o-|^aria-/i),
     )
     .forEach((attribute) => {
       props[attribute.name] = attribute.value;
@@ -104,7 +104,7 @@ function getTrace(el) {
     if (domPathProps["data-trackable"]) {
       domPathProps = Object.assign(
         domPathProps,
-        getSiblingsAndPosition(el, originalEl, selector)
+        getSiblingsAndPosition(el, originalEl, selector),
       );
     }
 

package/src/utils/scroll.ts

@@ -56,7 +56,7 @@ export class ScrollTracker {
 
   intersectionCallback(
     observer: IntersectionObserver,
-    changes: IntersectionObserverEntry[]
+    changes: IntersectionObserverEntry[],
   ) {
     changes.forEach((change) => {
       if (change.isIntersecting || change.intersectionRatio > 0) {
@@ -81,7 +81,7 @@ export class ScrollTracker {
           this.gaTracker.GtagEventDispatcher(
             "Scroll",
             `scroll - ${percentagesViewed}%`,
-            window.location.pathname
+            window.location.pathname,
           );
         }
 

package/src/utils/yupValidator.ts

@@ -54,7 +54,7 @@ const configSchema = object({
     .required()
     .defined()
     .transform((value) =>
-      unifyValuesTransform(value, disableAppFormatTransformValue)
+      unifyValuesTransform(value, disableAppFormatTransformValue),
     )
     .oneOf([
       "Stream",
@@ -112,14 +112,14 @@ const origamiEventSchema = object({
     .nullable()
     .notRequired()
     .when("category", {
-      is: "video" || "audio",
+      is: (value: string) => value === "video" || "audio",
       then: () => number().required(),
     }),
   progress: number()
     .nullable()
     .notRequired()
     .when("category", {
-      is: "video" || "audio",
+      is: (value: string) => value === "video" || "audio",
       then: () => number().required(),
     }),
 });
@@ -129,7 +129,7 @@ export type OrigamiEventType = InferType<typeof origamiEventSchema>;
 
 export const parseConfig = (
   config: ConfigType,
-  disableAppFormatTransform: boolean
+  disableAppFormatTransform: boolean,
 ): ConfigType => {
   disableAppFormatTransformValue = disableAppFormatTransform;
   try {
@@ -155,7 +155,7 @@ export const parseConfig = (
 export const validateConfig = (
   config: ConfigType,
   disableAppFormatTransform: boolean,
-  logValidationErrors: boolean
+  logValidationErrors: boolean,
 ): ValidationError[] | undefined => {
   disableAppFormatTransformValue = disableAppFormatTransform;
   try {
@@ -174,7 +174,7 @@ export const validateConfig = (
 };
 
 export const validateOrigamiEvent = (
-  config: OrigamiEventType
+  config: OrigamiEventType,
 ): ValidationError[] | undefined => {
   try {
     const parsedConfig = origamiEventSchema.cast(config);

package/src/ytIframeTracking/index.ts

@@ -17,7 +17,7 @@ export class ytIframeTracking {
     this.videoUrl = videoUrl;
     this.permutiveUtils = new permutiveVideoUtils(
       this.FTTracker.config.campaign,
-      this.videoTitle
+      this.videoTitle,
     );
   }
 
@@ -27,13 +27,13 @@ export class ytIframeTracking {
   emitProgressEvents = (
     progress: number,
     duration: number,
-    isYoutube: boolean
+    isYoutube: boolean,
   ) => {
     while (progress >= this.progressMilestones[0]) {
       this.FTTracker.gaEvent(
         `Video${window.isOvideoPlayer ? ":fallback" : ""}`,
         `${this.progressMilestones[0]}% watched`,
-        this.videoTitle
+        this.videoTitle,
       );
       if (isYoutube) {
         this.FTTracker.oEvent({
@@ -103,7 +103,7 @@ export class ytIframeTracking {
       this.permutiveUtils.emitPermutiveProgressEvent(
         duration - 1,
         currentTime,
-        this.videoProgressInterval
+        this.videoProgressInterval,
       );
       const progress = this.progressPercentage(duration, currentTime);
       this.emitProgressEvents(progress, duration, true);
@@ -115,7 +115,7 @@ export class ytIframeTracking {
       this.FTTracker.gaEvent(
         `Video${window.isOvideoPlayer ? ":fallback" : ""}`,
         `playing`,
-        this.videoTitle
+        this.videoTitle,
       );
       this.FTTracker.oEvent({
         category: "video",
@@ -131,7 +131,7 @@ export class ytIframeTracking {
     this.FTTracker.gaEvent(
       `Video${window.isOvideoPlayer ? ":fallback" : ""}`,
       `pause`,
-      `${this.videoTitle}`
+      `${this.videoTitle}`,
     );
     this.FTTracker.oEvent({
       category: "video",
@@ -146,7 +146,7 @@ export class ytIframeTracking {
     this.FTTracker.gaEvent(
       `Video${window.isOvideoPlayer ? ":fallback" : ""}`,
       `100% watched`,
-      `${this.videoTitle}`
+      `${this.videoTitle}`,
     );
     this.FTTracker.oEvent({
       category: "video",
@@ -159,7 +159,7 @@ export class ytIframeTracking {
       this.permutiveUtils.emitPermutiveProgressEvent(
         currentTime,
         currentTime,
-        this.videoProgressInterval
+        this.videoProgressInterval,
       );
     }
   }
@@ -172,7 +172,7 @@ export class ytIframeTracking {
       this.permutiveUtils.emitPermutiveProgressEvent(
         duration - 1,
         currentTime,
-        this.videoProgressInterval
+        this.videoProgressInterval,
       );
     }, 1000);
     const progress = this.progressPercentage(duration, currentTime);