Add ophan attention tracking to looping video (#14174)

* Bump "@guardian/ophan-tracker-js" to "2.3.2",

* Extend internal ophan api to expect video tracking prop on component attention tracking

* Add attention tracking to looping video

Author: abeddow91

dotcom-rendering/package.json

@@ -38,7 +38,7 @@
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "25.2.0",
-		"@guardian/ophan-tracker-js": "2.3.0",
+		"@guardian/ophan-tracker-js": "2.3.2",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "10.2.0",

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

@@ -61,11 +61,18 @@ export const getOphan = async (
 		name,
 		el,
 		visibilityThreshold,
+		isTrackingVideo = false,
 	) => {
-		ophan.trackComponentAttention(name, el, visibilityThreshold);
+		ophan.trackComponentAttention(
+			name,
+			el,
+			visibilityThreshold,
+			isTrackingVideo,
+		);
 		log('dotcom', '🧿 Ophan tracking component attention:', name, {
 			el,
 			visibilityThreshold,
+			isTrackingVideo,
 		});
 	};
 

dotcom-rendering/src/components/LoopVideo.importable.tsx

@@ -3,6 +3,7 @@ import { log, storage } from '@guardian/libs';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import {
+	getOphan,
 	submitClickComponentEvent,
 	submitComponentEvent,
 } from '../client/ophan/ophan';
@@ -52,6 +53,13 @@ const logAndReportError = (src: string, error: Error) => {
 	log('dotcom', message);
 };
 
+const dispatchOphanAttentionEvent = (
+	eventType: 'videoPlaying' | 'videoPause',
+) => {
+	const event = new Event(eventType, { bubbles: true });
+	document.dispatchEvent(event);
+};
+
 type Props = {
 	src: string;
 	atomId: string;
@@ -103,9 +111,11 @@ export const LoopVideo = ({
 	 */
 	const [hasBeenInView, setHasBeenInView] = useState(false);
 
+	const VISIBILITY_THRESHOLD = 0.5;
+
 	const [isInView, setNode] = useIsInView({
 		repeat: true,
-		threshold: 0.5,
+		threshold: VISIBILITY_THRESHOLD,
 	});
 
 	const playVideo = useCallback(async () => {
@@ -119,6 +129,7 @@ export const LoopVideo = ({
 			await startPlayPromise
 				.then(() => {
 					// Autoplay succeeded
+					dispatchOphanAttentionEvent('videoPlaying');
 					setPlayerState('PLAYING');
 				})
 				.catch((error: Error) => {
@@ -145,6 +156,7 @@ export const LoopVideo = ({
 		}
 
 		setPlayerState(reason);
+		dispatchOphanAttentionEvent('videoPause');
 		void vidRef.current.pause();
 	};
 
@@ -239,6 +251,29 @@ export const LoopVideo = ({
 		};
 	}, [uniqueId]);
 
+	/**
+	 * Initiates attention tracking for ophan
+	 */
+	useEffect(() => {
+		const video = vidRef.current;
+		if (!video) return;
+		const trackAttention = async () => {
+			try {
+				const ophan = await getOphan('Web');
+				ophan.trackComponentAttention(
+					`gu-video-loop-${atomId}`,
+					video,
+					VISIBILITY_THRESHOLD,
+					true,
+				);
+			} catch (error) {
+				console.error('Failed to track video attention:', error);
+			}
+		};
+
+		void trackAttention();
+	}, [atomId]);
+
 	/**
 	 * Keeps track of whether the video has been in view or not.
 	 */