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

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 }