@financial-times/cp-content-pipeline-ui 7.1.1 → 7.1.3

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.3](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v7.1.2...cp-content-pipeline-ui-v7.1.3) (2024-09-27)
+
+
+### Bug Fixes
+
+* use standard component tracking ([f0ff492](https://github.com/Financial-Times/cp-content-pipeline/commit/f0ff492851625dcf95a58f752ee4c7d3e1321122))
+
+## [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)
 
 

package/lib/components/Body/index.test.js

@@ -83,6 +83,7 @@ const extraContentForType = {
                 __typename: 'LiveBlogPost',
                 title: 'live post 1',
                 authors: [],
+                indicators: {},
             },
         ],
     },

package/lib/components/Body/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../src/components/Body/index.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../src/components/Body/index.test.tsx"],"names":[],"mappings":"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"}

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":"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"}
+{"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,31 @@
+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 observer;
+    private viewing;
+    constructor(component: Element, trackingData: TrackingData);
+    private init;
+    private onCccConnected;
+    private onCccError;
+    private onView;
+    private onExitView;
+    private dispatchEvent;
+    private onChange;
+    destroy(): void;
+}
+export { CustomCodeComponentTracker };

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

@@ -0,0 +1,84 @@
+"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.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('act', { trigger_action: 'success' });
+        this.observer = new IntersectionObserver(this.onChange.bind(this), {
+            rootMargin: `0px 0px -300px 0px`,
+            threshold: 0,
+        });
+        this.observer.observe(this.component);
+    }
+    onCccError() {
+        this.dispatchEvent('act', { trigger_action: 'error' });
+    }
+    onView() {
+        this.dispatchEvent('view');
+        this.viewing = true;
+    }
+    onExitView() {
+        this.dispatchEvent('act', { trigger_action: 'exit-view' });
+        this.viewing = false;
+    }
+    dispatchEvent(action, extraDetail = {}) {
+        const event = new CustomEvent('oTracking.event', {
+            detail: {
+                category: 'component',
+                action,
+                ...this.trackingData,
+                ...extraDetail,
+            },
+            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.onView();
+            }
+            if (this.viewing &&
+                (!change.isIntersecting || change.intersectionRatio === 0)) {
+                this.onExitView();
+            }
+        });
+    }
+    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));
+            if (this.viewing) {
+                this.onExitView();
+            }
+        }
+    }
+}
+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/package.json

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

package/src/components/Body/index.test.tsx

@@ -82,6 +82,7 @@ const extraContentForType = {
         __typename: 'LiveBlogPost',
         title: 'live post 1',
         authors: [],
+        indicators: {},
       },
     ],
   },

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,111 @@
+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 observer: IntersectionObserver | null
+  private viewing: boolean
+
+  constructor(private component: Element, private trackingData: TrackingData) {
+    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('act', { trigger_action: '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('act', { trigger_action: 'error' })
+  }
+
+  private onView(): void {
+    this.dispatchEvent('view')
+    this.viewing = true
+  }
+
+  private onExitView(): void {
+    this.dispatchEvent('act', { trigger_action: 'exit-view' })
+    this.viewing = false
+  }
+
+  private dispatchEvent(action: string, extraDetail = {}): void {
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action,
+        ...this.trackingData,
+        ...extraDetail,
+      },
+      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.onView()
+      }
+      if (
+        this.viewing &&
+        (!change.isIntersecting || change.intersectionRatio === 0)
+      ) {
+        this.onExitView()
+      }
+    })
+  }
+
+  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))
+      if (this.viewing) {
+        this.onExitView()
+      }
+    }
+  }
+}
+
+export { CustomCodeComponentTracker }