@financial-times/cp-content-pipeline-ui 7.1.0 → 7.1.2

package/CHANGELOG.md

@@ -574,6 +574,20 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [7.1.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.1.1...cp-content-pipeline-ui-v7.1.2) (2024-09-24)
+
+
+### Bug Fixes
+
+* tracking for ccc ([d21e731](https://github.com/Financial-Times/cp-content-pipeline/commit/d21e7310ca88cd8b9e21af2439c39ae4243eec0f))
+
+## [7.1.1](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.1.0...cp-content-pipeline-ui-v7.1.1) (2024-09-17)
+
+
+### Bug Fixes
+
+* ci-2457 add ads to LiveBlogBody ([0fb6c0f](https://github.com/Financial-Times/cp-content-pipeline/commit/0fb6c0fe93d3c83d3f1af5543530d3f764cd9d15))
+
 ## [7.1.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.0.2...cp-content-pipeline-ui-v7.1.0) (2024-09-17)
 
 

package/lib/components/CustomCodeComponent/client/index.d.ts

@@ -1,3 +1,4 @@
+import { CustomCodeComponentTracker } from './tracking';
 /**
  * CustomCodeComponentClient
  * @description Track the view of a rendered custom code component
@@ -8,8 +9,9 @@ declare class CustomCodeComponentClient {
     /**
      * Track the mount of a custom code component
      */
-    private trackingMount;
+    tracking: CustomCodeComponentTracker;
     constructor(el: Element);
     static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[];
+    static destroy(components: CustomCodeComponentClient[]): void;
 }
 export default CustomCodeComponentClient;

package/lib/components/CustomCodeComponent/client/index.js

@@ -1,74 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * TrackMount
- * @description Track initial render of a custom code component
- * @param {HTMLElement} mountElement - The custom code component
- * @param {TrackingData} trackingData - The specific component data
- */
-class TrackMount {
-    constructor(mountElement, trackingData) {
-        this.mountElement = mountElement;
-        this.trackingData = trackingData;
-        this.handleMount = () => {
-            const event = new CustomEvent('oTracking.event', {
-                detail: {
-                    category: 'component',
-                    action: 'mount',
-                    ...this.trackingData,
-                },
-            });
-            document.body.dispatchEvent(event);
-        };
-        this.init();
-    }
-    init() {
-        this.mountElement.addEventListener('ccc-connected', () => {
-            new TrackView(this.mountElement, this.trackingData);
-            this.handleMount();
-        });
-    }
-}
-/**
- * TrackView
- * @description Track the view of a rendered custom code component
- * @param {HTMLElement} mountElement - The custom code component
- * @param {TrackingData} trackingData - The specific component data
- */
-class TrackView {
-    constructor(viewElement, trackingData) {
-        this.viewElement = viewElement;
-        this.trackingData = trackingData;
-        this.handleView = () => {
-            const event = new CustomEvent('oTracking.event', {
-                detail: {
-                    category: 'component',
-                    action: 'view',
-                    ...this.trackingData,
-                },
-            });
-            document.body.dispatchEvent(event);
-        };
-        this.viewElement = viewElement;
-        this.trackingData = trackingData;
-        this.init();
-    }
-    init() {
-        //Intersection observer that observes when viewElement is in view
-        this.observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    this.handleView();
-                    this.observer?.disconnect();
-                }
-            });
-        });
-        this.observer.observe(this.viewElement);
-    }
-    destroy() {
-        this.observer?.disconnect();
-    }
-}
+const tracking_1 = require("./tracking");
 /**
  * CustomCodeComponentClient
  * @description Track the view of a rendered custom code component
@@ -84,12 +16,17 @@ class CustomCodeComponentClient {
                 type: 'custom-code-component',
             },
         };
-        this.trackingMount = new TrackMount(el, trackingData);
+        this.tracking = new tracking_1.CustomCodeComponentTracker(el, trackingData);
     }
     static init(rootEl) {
         const root = rootEl instanceof Element ? rootEl : document;
         return Array.from(root.querySelectorAll('custom-code-component')).map((el) => new CustomCodeComponentClient(el));
     }
+    static destroy(components) {
+        components.forEach((component) => {
+            component.tracking.destroy();
+        });
+    }
 }
 exports.default = CustomCodeComponentClient;
 //# sourceMappingURL=index.js.map

package/lib/components/CustomCodeComponent/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomCodeComponent/client/index.ts"],"names":[],"mappings":";;AAUA;;;;;GAKG;AACH,MAAM,UAAU;IACd,YACU,YAAqB,EACrB,YAA0B;QAD1B,iBAAY,GAAZ,YAAY,CAAS;QACrB,iBAAY,GAAZ,YAAY,CAAc;QAY5B,gBAAW,GAAG,GAAG,EAAE;YACzB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBAC/C,MAAM,EAAE;oBACN,QAAQ,EAAE,WAAW;oBACrB,MAAM,EAAE,OAAO;oBACf,GAAG,IAAI,CAAC,YAAY;iBACrB;aACF,CAAC,CAAA;YACF,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC,CAAA;QAnBC,IAAI,CAAC,IAAI,EAAE,CAAA;IACb,CAAC;IAEO,IAAI;QACV,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YACvD,IAAI,SAAS,CAAC,IAAI,CAAC,YAAuB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YAC9D,IAAI,CAAC,WAAW,EAAE,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC;CAYF;AAED;;;;;GAKG;AACH,MAAM,SAAS;IAEb,YACU,WAAoB,EACpB,YAA0B;QAD1B,gBAAW,GAAX,WAAW,CAAS;QACpB,iBAAY,GAAZ,YAAY,CAAc;QAoB5B,eAAU,GAAG,GAAG,EAAE;YACxB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBAC/C,MAAM,EAAE;oBACN,QAAQ,EAAE,WAAW;oBACrB,MAAM,EAAE,MAAM;oBACd,GAAG,IAAI,CAAC,YAAY;iBACrB;aACF,CAAC,CAAA;YACF,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC,CAAA;QA3BC,IAAI,CAAC,WAAW,GAAG,WAAsB,CAAA;QACzC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAChC,IAAI,CAAC,IAAI,EAAE,CAAA;IACb,CAAC;IAEO,IAAI;QACV,iEAAiE;QACjE,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;YACnD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,IAAI,CAAC,UAAU,EAAE,CAAA;oBACjB,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;gBAC7B,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAsB,CAAC,CAAA;IACpD,CAAC;IAaD,OAAO;QACL,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAA;IAC7B,CAAC;CACF;AAED;;;;;GAKG;AACH,MAAM,yBAAyB;IAM7B,YAAY,EAAW;QACrB,MAAM,YAAY,GAAG;YACnB,SAAS,EAAE;gBACT,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;gBACnC,IAAI,EAAE,uBAAuB;aAC9B;SACF,CAAA;QACD,IAAI,CAAC,aAAa,GAAG,IAAI,UAAU,CAAC,EAAa,EAAE,YAAY,CAAC,CAAA;IAClE,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,MAAgB;QAC1B,MAAM,IAAI,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;QAC1D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CACnE,CAAC,EAAW,EAAE,EAAE,CAAC,IAAI,yBAAyB,CAAC,EAAE,CAAC,CACnD,CAAA;IACH,CAAC;CACF;AAED,kBAAe,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomCodeComponent/client/index.ts"],"names":[],"mappings":";;AAAA,yCAAuD;AAEvD;;;;;GAKG;AACH,MAAM,yBAAyB;IAM7B,YAAY,EAAW;QACrB,MAAM,YAAY,GAAG;YACnB,SAAS,EAAE;gBACT,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;gBACnC,IAAI,EAAE,uBAAuB;aAC9B;SACF,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,qCAA0B,CAAC,EAAa,EAAE,YAAY,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,MAAgB;QAC1B,MAAM,IAAI,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;QAC1D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CACnE,CAAC,EAAW,EAAE,EAAE,CAAC,IAAI,yBAAyB,CAAC,EAAE,CAAC,CACnD,CAAA;IACH,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,UAAuC;QACpD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;QAC9B,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kBAAe,yBAAyB,CAAA"}

package/lib/components/CustomCodeComponent/client/tracking.d.ts

@@ -0,0 +1,32 @@
+type Component = {
+    id: string;
+    name: string;
+    type: string;
+    timeElapsedSeconds?: number;
+};
+type TrackingData = {
+    component: Component;
+};
+/**
+ * CustomCodeComponentTracker
+ * @description Track initial render of a custom code component
+ * @param {HTMLElement} mountElement - The custom code component
+ * @param {TrackingData} trackingData - The specific component data
+ */
+declare class CustomCodeComponentTracker {
+    private component;
+    private trackingData;
+    private startTime;
+    private totalVisibleTime;
+    private timeElapsedSeconds;
+    private observer;
+    private viewing;
+    constructor(component: Element, trackingData: TrackingData);
+    private init;
+    private onCccConnected;
+    private onCccError;
+    private dispatchEvent;
+    private onChange;
+    destroy(): void;
+}
+export { CustomCodeComponentTracker };

package/lib/components/CustomCodeComponent/client/tracking.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomCodeComponentTracker = void 0;
+/**
+ * CustomCodeComponentTracker
+ * @description Track initial render of a custom code component
+ * @param {HTMLElement} mountElement - The custom code component
+ * @param {TrackingData} trackingData - The specific component data
+ */
+class CustomCodeComponentTracker {
+    constructor(component, trackingData) {
+        this.component = component;
+        this.trackingData = trackingData;
+        this.startTime = 0;
+        this.totalVisibleTime = 0;
+        this.timeElapsedSeconds = null;
+        this.component = component;
+        this.trackingData = trackingData;
+        this.observer = null;
+        this.viewing = false;
+        this.init();
+    }
+    init() {
+        this.dispatchEvent('mount');
+        this.component.addEventListener('error', this.onCccError.bind(this));
+        this.component.addEventListener('ccc-connected', this.onCccConnected.bind(this));
+    }
+    onCccConnected() {
+        this.dispatchEvent('success');
+        this.observer = new IntersectionObserver(this.onChange.bind(this), {
+            rootMargin: `0px 0px -300px 0px`,
+            threshold: 0,
+        });
+        this.observer.observe(this.component);
+    }
+    onCccError() {
+        this.dispatchEvent('error');
+    }
+    dispatchEvent(action) {
+        const component = this.trackingData.component;
+        if (this.timeElapsedSeconds) {
+            component.timeElapsedSeconds = this.timeElapsedSeconds;
+        }
+        const event = new CustomEvent('oTracking.event', {
+            detail: {
+                category: 'component',
+                action,
+                ...component,
+            },
+            bubbles: true,
+        });
+        document.body.dispatchEvent(event);
+    }
+    onChange(changes) {
+        changes.forEach((change) => {
+            if (change.target !== this.component) {
+                return;
+            }
+            if (change.boundingClientRect.height > 0 &&
+                (change.isIntersecting || change.intersectionRatio >= 1)) {
+                this.dispatchEvent('view');
+                this.startTime = performance.now();
+                this.viewing = true;
+            }
+            if (this.viewing &&
+                (!change.isIntersecting || change.intersectionRatio === 0)) {
+                this.totalVisibleTime = performance.now() - this.startTime;
+                this.timeElapsedSeconds = parseFloat((this.totalVisibleTime / 1000).toFixed(2));
+                this.dispatchEvent('stop-view');
+                this.totalVisibleTime = 0;
+                this.timeElapsedSeconds = null;
+            }
+        });
+    }
+    destroy() {
+        if (this.observer && this.component) {
+            this.observer.unobserve(this.component);
+            this.observer.disconnect();
+            this.component.removeEventListener('ccc-connected', this.onCccConnected.bind(this));
+            this.component.removeEventListener('error', this.onCccError.bind(this));
+        }
+    }
+}
+exports.CustomCodeComponentTracker = CustomCodeComponentTracker;
+//# sourceMappingURL=tracking.js.map

package/lib/components/CustomCodeComponent/client/tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../../src/components/CustomCodeComponent/client/tracking.ts"],"names":[],"mappings":"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"}

package/lib/components/LiveBlogBody/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const RichText_1 = require("../RichText");
 const LiveBlogWrapper_1 = require("../LiveBlogWrapper");
-const LiveBlogBody = ({ content, richTextComponents, xInteractionSerialiser, showShareButtons, postTrackerConfig, }) => {
+const LiveBlogBody = ({ content, richTextComponents, xInteractionSerialiser, showShareButtons, postTrackerConfig, ads, }) => {
     if (content.__typename !== 'LiveBlogPackage')
         return null;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const posts = content.liveBlogPosts || [];
     return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: richTextComponents },
-        react_1.default.createElement(LiveBlogWrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, id: "live-blog-wrapper", posts: posts, serialiser: xInteractionSerialiser, showShareButtons: showShareButtons ?? true, postTrackerConfig: postTrackerConfig })));
+        react_1.default.createElement(LiveBlogWrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, id: "live-blog-wrapper", posts: posts, serialiser: xInteractionSerialiser, showShareButtons: showShareButtons ?? true, postTrackerConfig: postTrackerConfig, ads: ads })));
 };
 exports.default = LiveBlogBody;
 //# sourceMappingURL=index.js.map

package/lib/components/LiveBlogBody/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AASpD,MAAM,YAAY,GAAgC,CAAC,EACjD,OAAO,EACP,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,GAClB,EAAE,EAAE;IACH,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IAEzD,8DAA8D;IAC9D,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAA;IAEzC,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB;QACnD,8BAAC,iCAAe,IACd,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,sBAAsB,EAClC,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,iBAAiB,EAAE,iBAAiB,GACpC,CACyB,CAC9B,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AASpD,MAAM,YAAY,GAAgC,CAAC,EACjD,OAAO,EACP,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,GACJ,EAAE,EAAE;IACH,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IAEzD,8DAA8D;IAC9D,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAA;IAEzC,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB;QACnD,8BAAC,iCAAe,IACd,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,sBAAsB,EAClC,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,GAAG,EAAE,GAAG,GACR,CACyB,CAC9B,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "7.1.0",
+  "version": "7.1.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/CustomCodeComponent/client/index.ts

@@ -1,91 +1,4 @@
-type Component = {
-  id: string
-  name: string
-  type: string
-}
-
-type TrackingData = {
-  component: Component
-}
-
-/**
- * TrackMount
- * @description Track initial render of a custom code component
- * @param {HTMLElement} mountElement - The custom code component
- * @param {TrackingData} trackingData - The specific component data
- */
-class TrackMount {
-  constructor(
-    private mountElement: Element,
-    private trackingData: TrackingData
-  ) {
-    this.init()
-  }
-
-  private init() {
-    this.mountElement.addEventListener('ccc-connected', () => {
-      new TrackView(this.mountElement as Element, this.trackingData)
-      this.handleMount()
-    })
-  }
-
-  private handleMount = () => {
-    const event = new CustomEvent('oTracking.event', {
-      detail: {
-        category: 'component',
-        action: 'mount',
-        ...this.trackingData,
-      },
-    })
-    document.body.dispatchEvent(event)
-  }
-}
-
-/**
- * TrackView
- * @description Track the view of a rendered custom code component
- * @param {HTMLElement} mountElement - The custom code component
- * @param {TrackingData} trackingData - The specific component data
- */
-class TrackView {
-  private observer: IntersectionObserver | undefined
-  constructor(
-    private viewElement: Element,
-    private trackingData: TrackingData
-  ) {
-    this.viewElement = viewElement as Element
-    this.trackingData = trackingData
-    this.init()
-  }
-
-  private init() {
-    //Intersection observer that observes when viewElement is in view
-    this.observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          this.handleView()
-          this.observer?.disconnect()
-        }
-      })
-    })
-    this.observer.observe(this.viewElement as Element)
-  }
-
-  private handleView = () => {
-    const event = new CustomEvent('oTracking.event', {
-      detail: {
-        category: 'component',
-        action: 'view',
-        ...this.trackingData,
-      },
-    })
-    document.body.dispatchEvent(event)
-  }
-
-  destroy(): void {
-    this.observer?.disconnect()
-  }
-}
+import { CustomCodeComponentTracker } from './tracking'
 
 /**
  * CustomCodeComponentClient
@@ -97,7 +10,7 @@ class CustomCodeComponentClient {
   /**
    * Track the mount of a custom code component
    */
-  private trackingMount: TrackMount
+  tracking: CustomCodeComponentTracker
 
   constructor(el: Element) {
     const trackingData = {
@@ -107,7 +20,7 @@ class CustomCodeComponentClient {
         type: 'custom-code-component',
       },
     }
-    this.trackingMount = new TrackMount(el as Element, trackingData)
+    this.tracking = new CustomCodeComponentTracker(el as Element, trackingData)
   }
 
   static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[] {
@@ -116,6 +29,12 @@ class CustomCodeComponentClient {
       (el: Element) => new CustomCodeComponentClient(el)
     )
   }
+
+  static destroy(components: CustomCodeComponentClient[]): void {
+    components.forEach((component) => {
+      component.tracking.destroy()
+    })
+  }
 }
 
 export default CustomCodeComponentClient

package/src/components/CustomCodeComponent/client/tracking.ts

@@ -0,0 +1,117 @@
+type Component = {
+  id: string
+  name: string
+  type: string
+  timeElapsedSeconds?: number
+}
+
+type TrackingData = {
+  component: Component
+}
+
+/**
+ * CustomCodeComponentTracker
+ * @description Track initial render of a custom code component
+ * @param {HTMLElement} mountElement - The custom code component
+ * @param {TrackingData} trackingData - The specific component data
+ */
+class CustomCodeComponentTracker {
+  private startTime: number
+  private totalVisibleTime: number
+  private timeElapsedSeconds: number | null
+  private observer: IntersectionObserver | null
+  private viewing: boolean
+
+  constructor(private component: Element, private trackingData: TrackingData) {
+    this.startTime = 0
+    this.totalVisibleTime = 0
+    this.timeElapsedSeconds = null
+    this.component = component
+    this.trackingData = trackingData
+    this.observer = null
+    this.viewing = false
+    this.init()
+  }
+
+  private init() {
+    this.dispatchEvent('mount')
+    this.component.addEventListener('error', this.onCccError.bind(this))
+    this.component.addEventListener(
+      'ccc-connected',
+      this.onCccConnected.bind(this)
+    )
+  }
+
+  private onCccConnected(): void {
+    this.dispatchEvent('success')
+    this.observer = new IntersectionObserver(this.onChange.bind(this), {
+      rootMargin: `0px 0px -300px 0px`,
+      threshold: 0,
+    })
+    this.observer.observe(this.component)
+  }
+
+  private onCccError(): void {
+    this.dispatchEvent('error')
+  }
+
+  private dispatchEvent(action: string): void {
+    const component = this.trackingData.component
+
+    if (this.timeElapsedSeconds) {
+      component.timeElapsedSeconds = this.timeElapsedSeconds
+    }
+
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action,
+        ...component,
+      },
+      bubbles: true,
+    })
+    document.body.dispatchEvent(event)
+  }
+
+  private onChange(changes: IntersectionObserverEntry[]): void {
+    changes.forEach((change) => {
+      if (change.target !== this.component) {
+        return
+      }
+      if (
+        change.boundingClientRect.height > 0 &&
+        (change.isIntersecting || change.intersectionRatio >= 1)
+      ) {
+        this.dispatchEvent('view')
+        this.startTime = performance.now()
+        this.viewing = true
+      }
+      if (
+        this.viewing &&
+        (!change.isIntersecting || change.intersectionRatio === 0)
+      ) {
+        this.totalVisibleTime = performance.now() - this.startTime
+        this.timeElapsedSeconds = parseFloat(
+          (this.totalVisibleTime / 1000).toFixed(2)
+        )
+        this.dispatchEvent('stop-view')
+        this.totalVisibleTime = 0
+        this.timeElapsedSeconds = null
+      }
+    })
+  }
+
+  destroy(): void {
+    if (this.observer && this.component) {
+      this.observer.unobserve(this.component)
+      this.observer.disconnect()
+      this.component.removeEventListener(
+        'ccc-connected',
+        this.onCccConnected.bind(this)
+      )
+      this.component.removeEventListener('error', this.onCccError.bind(this))
+    }
+  }
+}
+
+export { CustomCodeComponentTracker }

package/src/components/LiveBlogBody/index.tsx

@@ -16,6 +16,7 @@ const LiveBlogBody: React.FC<LiveBlogBodyProps> = ({
   xInteractionSerialiser,
   showShareButtons,
   postTrackerConfig,
+  ads,
 }) => {
   if (content.__typename !== 'LiveBlogPackage') return null
 
@@ -31,6 +32,7 @@ const LiveBlogBody: React.FC<LiveBlogBodyProps> = ({
         serialiser={xInteractionSerialiser}
         showShareButtons={showShareButtons ?? true}
         postTrackerConfig={postTrackerConfig}
+        ads={ads}
       />
     </ComponentsContext.Provider>
   )