@financial-times/cp-content-pipeline-ui 6.13.0 → 6.14.0

package/CHANGELOG.md

@@ -574,6 +574,21 @@
     * @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
 
+## [6.14.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v6.13.0...cp-content-pipeline-ui-v6.14.0) (2024-07-16)
+
+
+### Features
+
+* tracking for flourish toppers ([4c19db6](https://github.com/Financial-Times/cp-content-pipeline/commit/4c19db61bf28e3a2f04c6eae8eb7344711076ea6))
+
+
+### Bug Fixes
+
+* decrease amount of element needed to be seen ([ba8264a](https://github.com/Financial-Times/cp-content-pipeline/commit/ba8264aa99c75a30db7b878c64766816d1464bdc))
+* genericise class to be used on all toppers ([1021468](https://github.com/Financial-Times/cp-content-pipeline/commit/1021468cfdd6d1f75a1d7a45ec7f7c142da6f9a8))
+* remove unneeded data attribute ([6ce8529](https://github.com/Financial-Times/cp-content-pipeline/commit/6ce8529588984839dccf21d29375450671ad2841))
+* return at first opportunity ([508b07c](https://github.com/Financial-Times/cp-content-pipeline/commit/508b07c7af834b6f2d02d2644ec126da195201e3))
+
 ## [6.13.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v6.12.0...cp-content-pipeline-ui-v6.13.0) (2024-07-10)
 
 

package/lib/client.d.ts

@@ -1,3 +1,4 @@
 export { default as Clip } from './components/Clip/client/index';
 export { default as BackToTopButton } from './components/BackToTopButton/client';
 export { default as FlourishSSREmbed } from './components/Flourish/client/index';
+export { TopperTracker } from './components/Topper/client/index';

package/lib/client.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlourishSSREmbed = exports.BackToTopButton = exports.Clip = void 0;
+exports.TopperTracker = exports.FlourishSSREmbed = exports.BackToTopButton = exports.Clip = void 0;
 var index_1 = require("./components/Clip/client/index");
 Object.defineProperty(exports, "Clip", { enumerable: true, get: function () { return __importDefault(index_1).default; } });
 var client_1 = require("./components/BackToTopButton/client");
 Object.defineProperty(exports, "BackToTopButton", { enumerable: true, get: function () { return __importDefault(client_1).default; } });
 var index_2 = require("./components/Flourish/client/index");
 Object.defineProperty(exports, "FlourishSSREmbed", { enumerable: true, get: function () { return __importDefault(index_2).default; } });
+var index_3 = require("./components/Topper/client/index");
+Object.defineProperty(exports, "TopperTracker", { enumerable: true, get: function () { return index_3.TopperTracker; } });
 //# sourceMappingURL=client.js.map

package/lib/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAgE;AAAvD,8GAAA,OAAO,OAAQ;AACxB,8DAAgF;AAAvE,0HAAA,OAAO,OAAmB;AACnC,4DAAgF;AAAvE,0HAAA,OAAO,OAAoB"}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAgE;AAAvD,8GAAA,OAAO,OAAQ;AACxB,8DAAgF;AAAvE,0HAAA,OAAO,OAAmB;AACnC,4DAAgF;AAAvE,0HAAA,OAAO,OAAoB;AACpC,0DAAgE;AAAvD,sGAAA,aAAa,OAAA"}

package/lib/components/Flourish/index.js

@@ -10,6 +10,8 @@ const DisclaimerNotice = ({ id }) => (react_1.default.createElement("div", { id:
         react_1.default.createElement("div", { className: "o-message__content" },
             react_1.default.createElement("p", { className: "o-message__content-main" }, "You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.")))));
 function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, iFrame = false, inArticleBody = true, }) {
+    if (!id)
+        return null;
     const anchorHref = `#${id}`;
     const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid';
     const figureClassnames = (0, classnames_1.default)({
@@ -27,13 +29,11 @@ function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, i
             aspectRatio: `${fallbackImage.width}/${fallbackImage.height}`,
         }
         : {};
-    if (!id)
-        return null;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
             'n-content-layout': inArticleBody,
             flourish: iFrame,
             'flourish--iFrame': iFrame,
-        }), "data-layout-width": fullGrid ? 'full-grid' : null, "data-component": "flourish" },
+        }), "data-layout-width": fullGrid ? 'full-grid' : null, "data-component": "flourish", "data-component-id": id, "data-component-type": inArticleBody ? 'flourish-in-article' : 'flourish-topper' },
         iFrame && (react_1.default.createElement("iframe", { src: `https://flo.uri.sh/visualisation/${id}/embed?hideTitle=${!inArticleBody}`, style: { width: '100%', aspectRatio: iframeAspectRatio }, className: "flourish__i-frame" })),
         react_1.default.createElement("figure", { className: figureClassnames, "data-original-image-width": fullGrid ? fallbackImage?.width : null, "data-original-image-height": fullGrid ? fallbackImage?.height : null },
             react_1.default.createElement("a", { href: anchorHref },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAqBnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,EACb,MAAM,GAAG,KAAK,EACd,aAAa,GAAG,IAAI,GACN;IACd,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,WAAW,IAAI,WAAW,KAAK,MAAM,CAAA;IACtE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;QACnC,gBAAgB,EAAE,MAAM;KACzB,CAAC,CAAA;IAEF,MAAM,iBAAiB,GACrB,MAAM,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QACrD,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;QAClD,CAAC,CAAC,MAAM,CAAA;IAEZ,MAAM,gBAAgB,GACpB,CAAC,aAAa,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QAC7D,CAAC,CAAC;YACE,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;SAC9D;QACH,CAAC,CAAC,EAAE,CAAA;IAER,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAA;IAEpB,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,kBAAkB,EAAE,aAAa;YACjC,QAAQ,EAAE,MAAM;YAChB,kBAAkB,EAAE,MAAM;SAC3B,CAAC,uBACiB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,oBACjC,UAAU;QAExB,MAAM,IAAI,CACT,0CACE,GAAG,EAAE,oCAAoC,EAAE,oBAAoB,CAAC,aAAa,EAAE,EAC/E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,EACxD,SAAS,EAAC,mBAAmB,GACrB,CACX;QACD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DAGmB,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,sBACrC,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCACE,GAAG,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,gBAAgB,GACvB,CACM,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AA1ED,2BA0EC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAqBnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,EACb,MAAM,GAAG,KAAK,EACd,aAAa,GAAG,IAAI,GACN;IACd,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAA;IACpB,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,WAAW,IAAI,WAAW,KAAK,MAAM,CAAA;IACtE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;QACnC,gBAAgB,EAAE,MAAM;KACzB,CAAC,CAAA;IAEF,MAAM,iBAAiB,GACrB,MAAM,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QACrD,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;QAClD,CAAC,CAAC,MAAM,CAAA;IAEZ,MAAM,gBAAgB,GACpB,CAAC,aAAa,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QAC7D,CAAC,CAAC;YACE,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;SAC9D;QACH,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,kBAAkB,EAAE,aAAa;YACjC,QAAQ,EAAE,MAAM;YAChB,kBAAkB,EAAE,MAAM;SAC3B,CAAC,uBACiB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,oBACjC,UAAU,uBACN,EAAE,yBAEnB,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB;QAG1D,MAAM,IAAI,CACT,0CACE,GAAG,EAAE,oCAAoC,EAAE,oBAAoB,CAAC,aAAa,EAAE,EAC/E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,EACxD,SAAS,EAAC,mBAAmB,GACrB,CACX;QACD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DAGmB,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,sBACrC,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCACE,GAAG,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,gBAAgB,GACvB,CACM,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AA7ED,2BA6EC"}

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

@@ -0,0 +1,2 @@
+import { TopperTracker } from './tracking';
+export { TopperTracker };

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopperTracker = void 0;
+const tracking_1 = require("./tracking");
+Object.defineProperty(exports, "TopperTracker", { enumerable: true, get: function () { return tracking_1.TopperTracker; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Topper/client/index.ts"],"names":[],"mappings":";;;AAAA,yCAA0C;AAEjC,8FAFA,wBAAa,OAEA"}

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

@@ -0,0 +1,17 @@
+declare class TopperTracker {
+    private startTime;
+    private totalVisibleTime;
+    private timeElapsedSeconds;
+    private type;
+    private component;
+    private id;
+    private observer;
+    constructor({ type }?: {
+        type?: string | undefined;
+    });
+    init(): void;
+    private dispatchEvent;
+    private onChange;
+    disconnect(): void;
+}
+export { TopperTracker };

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopperTracker = void 0;
+class TopperTracker {
+    constructor({ type = 'flourish-topper' } = {}) {
+        this.startTime = 0;
+        this.totalVisibleTime = 0;
+        this.timeElapsedSeconds = null;
+        this.type = type;
+        this.component = document.querySelector(`[data-component-type="${this.type}"]`);
+        this.id = this.component?.getAttribute('data-component-id') || null;
+        this.observer = null;
+    }
+    init() {
+        if (!window.IntersectionObserver || !this.component) {
+            return;
+        }
+        this.dispatchEvent('mount');
+        this.observer = new IntersectionObserver(this.onChange.bind(this), {
+            threshold: [0.75],
+        });
+        this.observer.observe(this.component);
+    }
+    dispatchEvent(action) {
+        const component = {
+            name: this.type,
+            id: this.id,
+        };
+        if (this.timeElapsedSeconds) {
+            component.timeElapsedSeconds = this.timeElapsedSeconds;
+        }
+        const event = new CustomEvent('oTracking.event', {
+            detail: {
+                category: 'component',
+                action: action,
+                component,
+            },
+            bubbles: true,
+        });
+        document.body.dispatchEvent(event);
+    }
+    onChange(changes) {
+        changes.forEach((change) => {
+            if (change.target !== this.component) {
+                return;
+            }
+            if (change.isIntersecting || change.intersectionRatio >= 1) {
+                this.dispatchEvent('view');
+                this.startTime = performance.now();
+            }
+            if (!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;
+            }
+        });
+    }
+    disconnect() {
+        if (this.observer && this.component) {
+            this.observer.unobserve(this.component);
+            this.observer.disconnect();
+        }
+    }
+}
+exports.TopperTracker = TopperTracker;
+//# sourceMappingURL=tracking.js.map

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

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

package/lib/components/Topper/client/tracking.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Topper/client/tracking.spec.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+describe('TopperTracker', () => {
+    let mockIntersectionObserver;
+    let mockObserve;
+    let mockUnobserve;
+    let mockDisconnect;
+    let mockComponent;
+    let dispatchEventSpy;
+    beforeEach(() => {
+        mockObserve = jest.fn();
+        mockUnobserve = jest.fn();
+        mockDisconnect = jest.fn();
+        mockIntersectionObserver = jest.fn(() => {
+            return {
+                observe: mockObserve,
+                unobserve: mockUnobserve,
+                disconnect: mockDisconnect,
+            };
+        });
+        window.IntersectionObserver = mockIntersectionObserver;
+        mockComponent = document.createElement('div');
+        mockComponent.setAttribute('data-component-type', 'flourish-topper');
+        mockComponent.setAttribute('data-component-id', 'test-id');
+        document.body.appendChild(mockComponent);
+        jest.spyOn(document, 'querySelector').mockReturnValue(mockComponent);
+        jest
+            .spyOn(performance, 'now')
+            .mockImplementationOnce(() => 1)
+            .mockImplementationOnce(() => 12344);
+        dispatchEventSpy = jest.spyOn(document.body, 'dispatchEvent');
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+        document.body.removeChild(mockComponent);
+    });
+    it('should initialise and observe the component', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        expect(mockIntersectionObserver).toHaveBeenCalled();
+        expect(mockObserve).toHaveBeenCalledWith(mockComponent);
+    });
+    it('should dispatch a mount event on intialisation', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        const mountEvent = dispatchEventSpy.mock.calls[0][0];
+        expect(mountEvent.type).toBe('oTracking.event');
+        expect(mountEvent.detail).toEqual({
+            category: 'component',
+            action: 'mount',
+            component: {
+                name: 'flourish-topper',
+                id: 'test-id',
+            },
+        });
+    });
+    it('should handle component visibility changes', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        const mockChanges = [
+            {
+                target: mockComponent,
+                isIntersecting: true,
+                intersectionRatio: 1.0,
+                boundingClientRect: {},
+                intersectionRect: {},
+                rootBounds: null,
+                time: 1,
+            },
+        ];
+        tracker['onChange'](mockChanges);
+        const viewEvent = dispatchEventSpy.mock.calls[1][0];
+        expect(viewEvent.type).toBe('oTracking.event');
+        expect(viewEvent.detail).toEqual({
+            category: 'component',
+            action: 'view',
+            component: {
+                name: 'flourish-topper',
+                id: 'test-id',
+            },
+        });
+        const mockChangesAfter = [
+            {
+                target: mockComponent,
+                isIntersecting: false,
+                intersectionRatio: 0.0,
+                boundingClientRect: {},
+                intersectionRect: {},
+                rootBounds: null,
+                time: 12.3444,
+            },
+        ];
+        tracker['onChange'](mockChangesAfter);
+        const stopViewEvent = dispatchEventSpy.mock.calls[2][0];
+        expect(stopViewEvent.type).toBe('oTracking.event');
+        expect(stopViewEvent.detail).toEqual({
+            category: 'component',
+            action: 'stop-view',
+            component: {
+                name: 'flourish-topper',
+                id: 'test-id',
+                timeElapsedSeconds: 12.34,
+            },
+        });
+    });
+    it('should disconnect the observer', () => {
+        const tracker = new index_1.TopperTracker();
+        tracker.init();
+        tracker.disconnect();
+        expect(mockUnobserve).toHaveBeenCalledWith(mockComponent);
+        expect(mockDisconnect).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=tracking.spec.js.map

package/lib/components/Topper/client/tracking.spec.js.map

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

package/package.json

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

package/src/client.ts

@@ -1,3 +1,4 @@
 export { default as Clip } from './components/Clip/client/index'
 export { default as BackToTopButton } from './components/BackToTopButton/client'
 export { default as FlourishSSREmbed } from './components/Flourish/client/index'
+export { TopperTracker } from './components/Topper/client/index'

package/src/components/Flourish/index.tsx

@@ -46,6 +46,7 @@ export default function Flourish({
   iFrame = false,
   inArticleBody = true,
 }: FlourishProps) {
+  if (!id) return null
   const anchorHref = `#${id}`
   const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid'
   const figureClassnames = classnames({
@@ -68,8 +69,6 @@ export default function Flourish({
         }
       : {}
 
-  if (!id) return null
-
   return (
     <div
       className={classnames({
@@ -79,6 +78,10 @@ export default function Flourish({
       })}
       data-layout-width={fullGrid ? 'full-grid' : null}
       data-component="flourish"
+      data-component-id={id}
+      data-component-type={
+        inArticleBody ? 'flourish-in-article' : 'flourish-topper'
+      }
     >
       {iFrame && (
         <iframe

package/src/components/Flourish/test/__snapshots__/snapshot.spec.tsx.snap

@@ -5,6 +5,8 @@ exports[`Flourish component renders ignoring layout different from full-grid 1`]
   <div
     class="n-content-layout"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
   >
     <figure
       class="n-content-picture n-content-layout__container"
@@ -52,6 +54,8 @@ exports[`Flourish component renders with a full-grid layout and fallback image 1
   <div
     class="n-content-layout"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
     data-layout-width="full-grid"
   >
     <figure
@@ -102,6 +106,8 @@ exports[`Flourish component renders with an iframe rather than using the embed s
   <div
     class="n-content-layout flourish flourish--iFrame"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
     data-layout-width="full-grid"
   >
     <iframe
@@ -157,6 +163,8 @@ exports[`Flourish component renders without n-content-layout class for charts no
   <div
     class=""
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-topper"
     data-layout-width="full-grid"
   >
     <figure
@@ -208,6 +216,8 @@ exports[`does not set aspect ratios when in article body 1`] = `
   <div
     class="n-content-layout"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-in-article"
     data-layout-width="full-grid"
   >
     <figure
@@ -258,6 +268,8 @@ exports[`sets the hideTitle param in the iframe url to true when not in article
   <div
     class="flourish flourish--iFrame"
     data-component="flourish"
+    data-component-id="123"
+    data-component-type="flourish-topper"
     data-layout-width="full-grid"
   >
     <iframe

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

@@ -0,0 +1,3 @@
+import { TopperTracker } from './tracking'
+
+export { TopperTracker }

package/src/components/Topper/client/tracking.spec.ts

@@ -0,0 +1,132 @@
+import { TopperTracker } from './index'
+
+describe('TopperTracker', () => {
+  let mockIntersectionObserver: jest.Mock
+  let mockObserve: jest.Mock
+  let mockUnobserve: jest.Mock
+  let mockDisconnect: jest.Mock
+  let mockComponent: HTMLElement
+  let dispatchEventSpy: jest.SpyInstance
+
+  beforeEach(() => {
+    mockObserve = jest.fn()
+    mockUnobserve = jest.fn()
+    mockDisconnect = jest.fn()
+
+    mockIntersectionObserver = jest.fn(() => {
+      return {
+        observe: mockObserve,
+        unobserve: mockUnobserve,
+        disconnect: mockDisconnect,
+      }
+    })
+
+    window.IntersectionObserver = mockIntersectionObserver
+
+    mockComponent = document.createElement('div')
+    mockComponent.setAttribute('data-component-type', 'flourish-topper')
+    mockComponent.setAttribute('data-component-id', 'test-id')
+    document.body.appendChild(mockComponent)
+
+    jest.spyOn(document, 'querySelector').mockReturnValue(mockComponent)
+    jest
+      .spyOn(performance, 'now')
+      .mockImplementationOnce(() => 1)
+      .mockImplementationOnce(() => 12344)
+    dispatchEventSpy = jest.spyOn(document.body, 'dispatchEvent')
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    document.body.removeChild(mockComponent)
+  })
+
+  it('should initialise and observe the component', () => {
+    const tracker = new TopperTracker()
+    tracker.init()
+
+    expect(mockIntersectionObserver).toHaveBeenCalled()
+    expect(mockObserve).toHaveBeenCalledWith(mockComponent)
+  })
+
+  it('should dispatch a mount event on intialisation', () => {
+    const tracker = new TopperTracker()
+    tracker.init()
+
+    const mountEvent = dispatchEventSpy.mock.calls[0][0] as CustomEvent
+    expect(mountEvent.type).toBe('oTracking.event')
+    expect(mountEvent.detail).toEqual({
+      category: 'component',
+      action: 'mount',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+      },
+    })
+  })
+
+  it('should handle component visibility changes', () => {
+    const tracker = new TopperTracker()
+    tracker.init()
+
+    const mockChanges: IntersectionObserverEntry[] = [
+      {
+        target: mockComponent,
+        isIntersecting: true,
+        intersectionRatio: 1.0,
+        boundingClientRect: {} as DOMRectReadOnly,
+        intersectionRect: {} as DOMRectReadOnly,
+        rootBounds: null,
+        time: 1,
+      },
+    ]
+
+    tracker['onChange'](mockChanges)
+
+    const viewEvent = dispatchEventSpy.mock.calls[1][0] as CustomEvent
+    expect(viewEvent.type).toBe('oTracking.event')
+    expect(viewEvent.detail).toEqual({
+      category: 'component',
+      action: 'view',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+      },
+    })
+
+    const mockChangesAfter: IntersectionObserverEntry[] = [
+      {
+        target: mockComponent,
+        isIntersecting: false,
+        intersectionRatio: 0.0,
+        boundingClientRect: {} as DOMRectReadOnly,
+        intersectionRect: {} as DOMRectReadOnly,
+        rootBounds: null,
+        time: 12.3444,
+      },
+    ]
+
+    tracker['onChange'](mockChangesAfter)
+
+    const stopViewEvent = dispatchEventSpy.mock.calls[2][0] as CustomEvent
+    expect(stopViewEvent.type).toBe('oTracking.event')
+    expect(stopViewEvent.detail).toEqual({
+      category: 'component',
+      action: 'stop-view',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+        timeElapsedSeconds: 12.34,
+      },
+    })
+  })
+
+  it('should disconnect the observer', () => {
+    const tracker = new TopperTracker()
+    tracker.init()
+    tracker.disconnect()
+
+    expect(mockUnobserve).toHaveBeenCalledWith(mockComponent)
+    expect(mockDisconnect).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,88 @@
+interface Component {
+  name: string
+  id: string | null
+  timeElapsedSeconds?: number
+}
+class TopperTracker {
+  private startTime: number
+  private totalVisibleTime: number
+  private timeElapsedSeconds: number | null
+  private type: string
+  private component: Element | null
+  private id: string | null
+  private observer: IntersectionObserver | null
+
+  constructor({ type = 'flourish-topper' } = {}) {
+    this.startTime = 0
+    this.totalVisibleTime = 0
+    this.timeElapsedSeconds = null
+    this.type = type
+    this.component = document.querySelector(
+      `[data-component-type="${this.type}"]`
+    )
+    this.id = this.component?.getAttribute('data-component-id') || null
+    this.observer = null
+  }
+
+  init(): void {
+    if (!window.IntersectionObserver || !this.component) {
+      return
+    }
+
+    this.dispatchEvent('mount')
+
+    this.observer = new IntersectionObserver(this.onChange.bind(this), {
+      threshold: [0.75],
+    })
+    this.observer.observe(this.component)
+  }
+
+  private dispatchEvent(action: string): void {
+    const component: Component = {
+      name: this.type,
+      id: this.id,
+    }
+    if (this.timeElapsedSeconds) {
+      component.timeElapsedSeconds = this.timeElapsedSeconds
+    }
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action: action,
+        component,
+      },
+      bubbles: true,
+    })
+    document.body.dispatchEvent(event)
+  }
+
+  private onChange(changes: IntersectionObserverEntry[]): void {
+    changes.forEach((change) => {
+      if (change.target !== this.component) {
+        return
+      }
+      if (change.isIntersecting || change.intersectionRatio >= 1) {
+        this.dispatchEvent('view')
+        this.startTime = performance.now()
+      }
+      if (!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
+      }
+    })
+  }
+
+  disconnect(): void {
+    if (this.observer && this.component) {
+      this.observer.unobserve(this.component)
+      this.observer.disconnect()
+    }
+  }
+}
+
+export { TopperTracker }