Upgrade ophan tracker canary

Author: jonflynng

dotcom-rendering/package.json

@@ -32,14 +32,14 @@
 		"@guardian/bridget": "8.13.1",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "catalog:",
-		"@guardian/consent-manager": "1.0.0",
 		"@guardian/commercial-core": "34.0.0",
+		"@guardian/consent-manager": "1.0.0",
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config": "catalog:",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "32.0.0",
-		"@guardian/ophan-tracker-js": "4.0.2",
+		"@guardian/ophan-tracker-js": "0.0.0-canary-20260622142809",
 		"@guardian/react-crossword": "17.1.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "12.2.1",

dotcom-rendering/src/client/ophan/ophan.ts

@@ -22,6 +22,8 @@ export const getOphan = async (
 
 	if (renderingTarget === 'Apps') {
 		cachedOphan = {
+			init: () => undefined,
+			sendInitialEvent: () => undefined,
 			setEventEmitter: () => undefined, // We don't currently have a custom eventEmitter on DCR - like 'mediator' in Frontend.
 			trackComponentAttention: () => undefined,
 			record: (e) => {
@@ -40,6 +42,9 @@ export const getOphan = async (
 					);
 				}
 			},
+			bumpViewId: () => undefined,
+			getViewId: () => 'Apps',
+			getPageViewId: () => 'Apps',
 			viewId: 'Apps',
 			pageViewId: 'Apps',
 		};
@@ -52,6 +57,8 @@ export const getOphan = async (
 		/* webpackMode: "eager" */ '@guardian/ophan-tracker-js'
 	);
 
+	ophan.init('ng');
+
 	const record: (typeof ophan)['record'] = (event, callback) => {
 		ophan.record(event, callback);
 		log('dotcom', '🧿 Ophan event recorded:', event);

dotcom-rendering/src/components/YoutubeAtom/eventEmitters.ts

@@ -50,6 +50,13 @@ const getAppsMediaEvent = async (
 
 export type OphanVideoStyle = 'youtube' | 'loop' | 'cinemagraph' | 'default';
 
+const dispatchOphanAttentionEvent = (
+	eventType: 'videoPlaying' | 'videoPause' | 'videoEnded',
+) => {
+	const event = new Event(eventType, { bubbles: true });
+	document.dispatchEvent(event);
+};
+
 const ophanTrackerWeb = (id: string, videoStyle: OphanVideoStyle) => {
 	return (trackingEvent: VideoEventKey): void => {
 		void getOphan('Web').then((ophan) => {
@@ -69,6 +76,22 @@ const ophanTrackerWeb = (id: string, videoStyle: OphanVideoStyle) => {
 	};
 };
 
+const ophanAttention = () => {
+	return (trackingEvent: VideoEventKey): void => {
+		if (trackingEvent === 'play' || trackingEvent === 'resume') {
+			dispatchOphanAttentionEvent('videoPlaying');
+		}
+
+		if (trackingEvent === 'pause') {
+			dispatchOphanAttentionEvent('videoPause');
+		}
+
+		if (trackingEvent === 'end') {
+			dispatchOphanAttentionEvent('videoEnded');
+		}
+	};
+};
+
 const ophanTrackerApps = (id: string, videoStyle: OphanVideoStyle) => {
 	return (trackingEvent: VideoEventKey): void => {
 		void getAppsMediaEvent(trackingEvent).then((appsMediaEvent) => {
@@ -88,4 +111,4 @@ const ophanTrackerApps = (id: string, videoStyle: OphanVideoStyle) => {
 	};
 };
 
-export { ophanTrackerApps, ophanTrackerWeb };
+export { ophanAttention, ophanTrackerApps, ophanTrackerWeb };

dotcom-rendering/src/components/YoutubeBlockComponent.island.tsx

@@ -9,7 +9,11 @@ import type { ArticleMedia } from '../types/mainMedia';
 import { Caption } from './Caption';
 import type { ResponsiveFontSize } from './CardHeadline';
 import { useConfig } from './ConfigContext';
-import { ophanTrackerApps, ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
+import {
+	ophanAttention,
+	ophanTrackerApps,
+	ophanTrackerWeb,
+} from './YoutubeAtom/eventEmitters';
 import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';
 import { YoutubeAtomExpiredOverlay } from './YoutubeAtom/YoutubeAtomExpiredOverlay';
 
@@ -195,7 +199,7 @@ export const YoutubeBlockComponent = ({
 				duration={duration}
 				eventEmitters={
 					renderingTarget === 'Web'
-						? [ophanTrackerWeb(id, 'youtube')]
+						? [ophanTrackerWeb(id, 'youtube'), ophanAttention()]
 						: [ophanTrackerApps(id, 'youtube')]
 				}
 				format={format}