@financial-times/cp-content-pipeline-ui 7.3.2 → 7.4.0

package/lib/components/content-tree/CustomCodeComponent/client/index.d.ts

@@ -11,7 +11,7 @@ declare class CustomCodeComponentClient {
      */
     tracking: CustomCodeComponentTracker;
     constructor(el: Element);
-    static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[];
+    static init(rootEl?: Element): CustomCodeComponentClient[] | void;
     static destroy(components: CustomCodeComponentClient[]): void;
 }
 export default CustomCodeComponentClient;

package/lib/components/content-tree/CustomCodeComponent/client/index.js

@@ -20,7 +20,7 @@ class CustomCodeComponentClient {
     }
     static init(rootEl) {
         const root = rootEl instanceof Element ? rootEl : document;
-        return Array.from(root.querySelectorAll('custom-code-component')).map((el) => new CustomCodeComponentClient(el));
+        return Array.from(root.querySelectorAll('custom-code-component:not([data-initialised])')).map((el) => new CustomCodeComponentClient(el));
     }
     static destroy(components) {
         components.forEach((component) => {

package/lib/components/content-tree/CustomCodeComponent/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/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,CAC5C,EAAiB,EACjB,YAAY,CACb,CAAA;IACH,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,CACf,IAAI,CAAC,gBAAgB,CAAC,+CAA+C,CAAC,CACvE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAA;IAClD,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/content-tree/CustomCodeComponent/client/tracking.d.ts

@@ -16,10 +16,12 @@ type TrackingData = {
 declare class CustomCodeComponentTracker {
     private component;
     private trackingData;
-    private observer?;
+    private mutationObserver?;
+    private intersectionObserver?;
     private viewing?;
-    constructor(component: Element, trackingData: TrackingData);
+    constructor(component: HTMLElement, trackingData: TrackingData);
     private init;
+    private mutationCallback;
     private onCccConnected;
     private onCccError;
     private onView;

package/lib/components/content-tree/CustomCodeComponent/client/tracking.js

@@ -12,32 +12,53 @@ class CustomCodeComponentTracker {
         this.component = component;
         this.trackingData = trackingData;
         this.component = component;
-        if (this.component.hasAttribute('data-o-tracking-initialised')) {
-            return;
-        }
         this.trackingData = trackingData;
-        // this needs to instantiated here so that it can be accessed correctly in the destroy method
+        // we're using a mutation observer to watch for changes to the component rather than event listeners
+        // as dynamic imports in the app are run before the tracking client can be instantiated on second
+        // and subsequent page visits in a session
+        // the observers need to instantiated here so that they can be accessed correctly in the destroy method
         // called by the app
-        this.observer = new IntersectionObserver(this.onChange.bind(this), {
+        this.mutationObserver = new MutationObserver(this.mutationCallback.bind(this));
+        this.mutationObserver.observe(this.component, {
+            attributes: true,
+            attributeFilter: ['data-ccc-ready', 'data-ccc-error'],
+        });
+        this.intersectionObserver = new IntersectionObserver(this.onChange.bind(this), {
             rootMargin: `0px 0px -300px 0px`,
             threshold: 0,
         });
-        this.observer.observe(this.component);
+        this.intersectionObserver.observe(this.component);
         this.viewing = false;
         this.destroy = this.destroy.bind(this);
         this.init();
     }
     init() {
         this.dispatchEvent('mount');
-        this.component.addEventListener('error', this.onCccError.bind(this));
-        this.component.addEventListener('ccc-connected', this.onCccConnected.bind(this));
-        this.component.setAttribute('data-o-tracking-initialised', 'true');
+        if (this.component.dataset.cccError) {
+            this.onCccError();
+        }
+        if (this.component.dataset.cccReady) {
+            this.onCccConnected();
+        }
+        this.component.dataset.initialised = 'true';
+    }
+    mutationCallback(mutationsList) {
+        for (const mutation of mutationsList) {
+            if (mutation.attributeName === 'data-ccc-ready') {
+                this.onCccConnected();
+            }
+            if (mutation.attributeName === 'data-ccc-error') {
+                this.onCccError();
+            }
+        }
     }
     onCccConnected() {
         this.dispatchEvent('act', { trigger_action: 'success' });
     }
     onCccError() {
-        this.dispatchEvent('act', { trigger_action: 'error' });
+        this.dispatchEvent('act', {
+            trigger_action: `error: ${this.component.dataset.cccError}`,
+        });
     }
     onView() {
         this.dispatchEvent('view');
@@ -75,15 +96,13 @@ class CustomCodeComponentTracker {
         });
     }
     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();
-            }
-        }
+        if (!this.component)
+            return;
+        this.component.removeAttribute('data-initialised');
+        this.mutationObserver?.disconnect();
+        this.intersectionObserver?.unobserve(this.component);
+        this.intersectionObserver?.disconnect();
+        this.viewing && this.onExitView();
     }
 }
 exports.CustomCodeComponentTracker = CustomCodeComponentTracker;

package/lib/components/content-tree/CustomCodeComponent/client/tracking.js.map

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

package/lib/components/content-tree/Workarounds.d.ts

@@ -70,6 +70,7 @@ interface ClipSetReferences {
     credits?: string;
     description?: string;
     displayTitle?: string;
+    systemTitle?: string;
     contentWarning?: string[];
     source?: string;
     subtitle?: string;

package/package.json

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

package/src/components/content-tree/Clip/client/index.ts

@@ -33,6 +33,7 @@ interface Opts {
   intersectionObserverThreshold?: number
   closedCaption?: boolean
   caption?: string
+  systemTitle?: string
 }
 
 interface TrackingData {
@@ -44,8 +45,10 @@ interface TrackingData {
   amount?: number
   amountPercentage?: number
   video: {
+    id?: string
     duration?: number
     source_url?: string
+    name?: string
     layout?: string
     loop?: number
     type: string
@@ -353,8 +356,10 @@ class Clip extends ClipInterface {
       progress: this.getRelevantProgress(),
       url: window.location.href,
       video: {
+        id: this.opts.id,
         duration: this.getDuration(),
         source_url: this.opts.id,
+        name: this.opts.systemTitle,
         layout: this.opts.layout,
         // Counter of the number of times the video has looped
         loop: this.loops,

package/src/components/content-tree/Clip/components/ClipTag.tsx

@@ -27,6 +27,7 @@ interface ClipTagProps {
   credits?: string
   caption?: string
   preload?: string
+  systemTitle?: string
 }
 
 export const ClipTag: React.FC<ClipTagProps> = ({
@@ -47,6 +48,7 @@ export const ClipTag: React.FC<ClipTagProps> = ({
   noInfoBox = false,
   noCaption = false,
   dataTrackable,
+  systemTitle,
 }) => {
   const { pixelWidth, pixelHeight } = clip?.dataSource?.[0]
     ? clip.dataSource[0]
@@ -68,6 +70,7 @@ export const ClipTag: React.FC<ClipTagProps> = ({
       data-trackable={dataTrackable}
       data-o-component="cp-clip"
       data-cp-clip-id={id}
+      data-cp-clip-system-title={systemTitle}
     >
       {!noInfoBox && <VideoInfoBox />}
       <div className="cp-clip__video-container">

package/src/components/content-tree/Clip/template/component.tsx

@@ -64,6 +64,7 @@ const ClipComponent: React.FC<ClipProps> = ({
     clip?.dataSource?.length && content.autoplay ? '' : poster
   const noAudio = content.noAudio ?? false
   const accessibility = content.accessibility ?? {}
+  const systemTitle = content.systemTitle ?? ''
 
   if (preset === 'thumbnail') {
     return (
@@ -80,6 +81,7 @@ const ClipComponent: React.FC<ClipProps> = ({
         noCaption
         noDescription
         noInfoBox
+        systemTitle={systemTitle}
       />
     )
   }
@@ -99,6 +101,7 @@ const ClipComponent: React.FC<ClipProps> = ({
           clip={clip}
           credits={content.credits ?? ''}
           caption={content.caption ?? ''}
+          systemTitle={systemTitle}
           accessibility={accessibility}
           preload={preload}
           dataTrackable="next-article-cp-clip"

package/src/components/content-tree/Clip/test/__snapshots__/snapshot.spec.tsx.snap

@@ -16,6 +16,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
       data-trackable=\\"next-article-cp-clip\\"
       data-o-component=\\"cp-clip\\"
       data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+      data-cp-clip-system-title=\\"\\"
     >
       <div
         data-o-component=\\"o-expander\\"
@@ -82,6 +83,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
       data-trackable=\\"next-article-cp-clip\\"
       data-o-component=\\"cp-clip\\"
       data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+      data-cp-clip-system-title=\\"\\"
     >
       <div
         data-o-component=\\"o-expander\\"
@@ -172,6 +174,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
     data-trackable=\\"next-article-cp-clip\\"
     data-o-component=\\"cp-clip\\"
     data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+    data-cp-clip-system-title=\\"\\"
   >
     <div
       data-o-component=\\"o-expander\\"
@@ -236,6 +239,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
     data-trackable=\\"next-article-cp-clip\\"
     data-o-component=\\"cp-clip\\"
     data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+    data-cp-clip-system-title=\\"\\"
   >
     <div
       data-o-component=\\"o-expander\\"
@@ -330,6 +334,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
         data-trackable=\\"next-article-cp-clip\\"
         data-o-component=\\"cp-clip\\"
         data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+        data-cp-clip-system-title=\\"\\"
       >
         <div
           data-o-component=\\"o-expander\\"
@@ -401,6 +406,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
         data-trackable=\\"next-article-cp-clip\\"
         data-o-component=\\"cp-clip\\"
         data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+        data-cp-clip-system-title=\\"\\"
       >
         <div
           data-o-component=\\"o-expander\\"
@@ -498,6 +504,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
     data-trackable=\\"next-article-cp-clip\\"
     data-o-component=\\"cp-clip\\"
     data-cp-clip-id=\\"84d7e1b0-e8b2-4ffc-a798-306f29dc9d52\\"
+    data-cp-clip-system-title=\\"\\"
   >
     <div
       data-o-component=\\"o-expander\\"
@@ -600,6 +607,7 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
       data-trackable=\\"next-article-cp-clip\\"
       data-o-component=\\"cp-clip\\"
       data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
+      data-cp-clip-system-title=\\"\\"
     >
       <div
         data-o-component=\\"o-expander\\"

package/src/components/content-tree/Clip/test/index.spec.ts

@@ -183,6 +183,9 @@ describe('Clip', () => {
       expect(clip.opts.layout).toBe(
         clip.containerEl.getAttribute('data-cp-clip-layout')
       )
+      expect(clip.opts.systemTitle).toBe(
+        clip.containerEl.getAttribute('data-cp-clip-system-title')
+      )
     })
 
     it('dispatches an analytics mount event when the component is initialised', () => {
@@ -192,10 +195,12 @@ describe('Clip', () => {
       expect(data).not.toBeFalsy()
       expect(data.video.duration).toBe(0)
       //expect(data.contentId).toBe(clip.opts.id);
+      expect(data.video.id).toBe(clip.opts.id)
       expect(data.video.layout).toBe(clip.opts.layout)
       expect(data.video.loop).toBe(0)
       expect(data.video.type).toBe('clip')
       expect(data.video.automated).toBe(false)
+      expect(data.video.name).toBe(clip.opts.systemTitle)
       expect(data.progress).toBe(0)
       expect(data.category).toBe('video')
       expect(data.action).toBe(eventType)
@@ -210,10 +215,12 @@ describe('Clip', () => {
           expect(e.detail.category).toBe('video')
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(spy).toHaveBeenCalled()
           expect(clip.started).toBe(true)
@@ -238,10 +245,12 @@ describe('Clip', () => {
           expect(e.detail.action).toBe(eventType)
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(spy).toHaveBeenCalled()
           expect(clip.started).toBe(true)
@@ -266,10 +275,12 @@ describe('Clip', () => {
           expect(e.detail.action).toBe(eventType)
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(25)
           document.body.removeEventListener('oTracking.event', listener)
           done()
@@ -339,10 +350,12 @@ describe('Clip', () => {
           expect(e.detail.action).toBe(eventType)
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(spy).toHaveBeenCalled()
           expect(spy2).toHaveBeenCalled()
@@ -374,10 +387,12 @@ describe('Clip', () => {
           expect(e.detail.category).toBe('video')
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(spy).toHaveBeenCalled()
           expect(clip.started).toBe(true)
           expect(clip.canAutoplay).toBe(false)
@@ -492,9 +507,11 @@ describe('Clip', () => {
           expect(e.detail.category).toBe('video')
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(clip.started).toBe(true)
           expect(clip.playStart).not.toBeFalsy()
@@ -514,9 +531,11 @@ describe('Clip', () => {
           expect(e.detail.category).toBe('video')
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(clip.started).toBe(true)
           expect(clip.playStart).toBeFalsy()
@@ -537,10 +556,12 @@ describe('Clip', () => {
           expect(e.detail.category).toBe('video')
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(clip.started).toBe(true)
           expect(clip.canAutoplay).toBe(false)
@@ -562,10 +583,12 @@ describe('Clip', () => {
           expect(e.detail.category).toBe('video')
           expect(e.detail.video.duration).toBe(10000)
           //expect(e.detail.contentId).toBe(clip.opts.id);
+          expect(e.detail.video.id).toBe(clip.opts.id)
           expect(e.detail.video.layout).toBe(clip.opts.layout)
           expect(e.detail.video.loop).toBe(0)
           expect(e.detail.video.type).toBe('clip')
           expect(e.detail.video.automated).toBe(false)
+          expect(e.detail.video.name).toBe(clip.opts.systemTitle)
           expect(e.detail.progress).toBe(0)
           expect(clip.started).toBe(true)
           expect(clip.canAutoplay).toBe(false)

package/src/components/content-tree/CustomCodeComponent/client/index.ts

@@ -20,14 +20,17 @@ class CustomCodeComponentClient {
         type: 'custom-code-component',
       },
     }
-    this.tracking = new CustomCodeComponentTracker(el as Element, trackingData)
+    this.tracking = new CustomCodeComponentTracker(
+      el as HTMLElement,
+      trackingData
+    )
   }
 
-  static init(rootEl?: Element): (CustomCodeComponentClient | undefined)[] {
+  static init(rootEl?: Element): CustomCodeComponentClient[] | void {
     const root = rootEl instanceof Element ? rootEl : document
-    return Array.from(root.querySelectorAll('custom-code-component')).map(
-      (el: Element) => new CustomCodeComponentClient(el)
-    )
+    return Array.from(
+      root.querySelectorAll('custom-code-component:not([data-initialised])')
+    ).map((el) => new CustomCodeComponentClient(el))
   }
 
   static destroy(components: CustomCodeComponentClient[]): void {

package/src/components/content-tree/CustomCodeComponent/client/tracking.ts

@@ -16,22 +16,36 @@ type TrackingData = {
  * @param {TrackingData} trackingData - The specific component data
  */
 class CustomCodeComponentTracker {
-  private observer?: IntersectionObserver
+  private mutationObserver?: MutationObserver
+  private intersectionObserver?: IntersectionObserver
   private viewing?: boolean
 
-  constructor(private component: Element, private trackingData: TrackingData) {
+  constructor(
+    private component: HTMLElement,
+    private trackingData: TrackingData
+  ) {
     this.component = component
-    if (this.component.hasAttribute('data-o-tracking-initialised')) {
-      return
-    }
     this.trackingData = trackingData
-    // this needs to instantiated here so that it can be accessed correctly in the destroy method
+    // we're using a mutation observer to watch for changes to the component rather than event listeners
+    // as dynamic imports in the app are run before the tracking client can be instantiated on second
+    // and subsequent page visits in a session
+    // the observers need to instantiated here so that they can be accessed correctly in the destroy method
     // called by the app
-    this.observer = new IntersectionObserver(this.onChange.bind(this), {
-      rootMargin: `0px 0px -300px 0px`,
-      threshold: 0,
+    this.mutationObserver = new MutationObserver(
+      this.mutationCallback.bind(this)
+    )
+    this.mutationObserver.observe(this.component, {
+      attributes: true,
+      attributeFilter: ['data-ccc-ready', 'data-ccc-error'],
     })
-    this.observer.observe(this.component)
+    this.intersectionObserver = new IntersectionObserver(
+      this.onChange.bind(this),
+      {
+        rootMargin: `0px 0px -300px 0px`,
+        threshold: 0,
+      }
+    )
+    this.intersectionObserver.observe(this.component)
     this.viewing = false
     this.destroy = this.destroy.bind(this)
     this.init()
@@ -39,12 +53,26 @@ class CustomCodeComponentTracker {
 
   private init() {
     this.dispatchEvent('mount')
-    this.component.addEventListener('error', this.onCccError.bind(this))
-    this.component.addEventListener(
-      'ccc-connected',
-      this.onCccConnected.bind(this)
-    )
-    this.component.setAttribute('data-o-tracking-initialised', 'true')
+    if (this.component.dataset.cccError) {
+      this.onCccError()
+    }
+
+    if (this.component.dataset.cccReady) {
+      this.onCccConnected()
+    }
+
+    this.component.dataset.initialised = 'true'
+  }
+
+  private mutationCallback(mutationsList: MutationRecord[]): void {
+    for (const mutation of mutationsList) {
+      if (mutation.attributeName === 'data-ccc-ready') {
+        this.onCccConnected()
+      }
+      if (mutation.attributeName === 'data-ccc-error') {
+        this.onCccError()
+      }
+    }
   }
 
   private onCccConnected(): void {
@@ -52,7 +80,9 @@ class CustomCodeComponentTracker {
   }
 
   private onCccError(): void {
-    this.dispatchEvent('act', { trigger_action: 'error' })
+    this.dispatchEvent('act', {
+      trigger_action: `error: ${this.component.dataset.cccError}`,
+    })
   }
 
   private onView(): void {
@@ -99,18 +129,14 @@ class CustomCodeComponentTracker {
   }
 
   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()
-      }
-    }
+    if (!this.component) return
+
+    this.component.removeAttribute('data-initialised')
+    this.mutationObserver?.disconnect()
+    this.intersectionObserver?.unobserve(this.component)
+    this.intersectionObserver?.disconnect()
+
+    this.viewing && this.onExitView()
   }
 }
 

package/src/components/content-tree/Workarounds.ts

@@ -162,6 +162,7 @@ interface ClipSetReferences {
   credits?: string
   description?: string
   displayTitle?: string
+  systemTitle?: string
   contentWarning?: string[]
   source?: string
   subtitle?: string