Loop video tracking (#14172)

* Add `videoType` parameter to `ophanTrackerWeb` so it can be used for varied video event tracking

* Add first time in view and first play tracking

Author: abeddow91

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

@@ -2,7 +2,10 @@ import { css } from '@emotion/react';
 import { log, storage } from '@guardian/libs';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { submitClickComponentEvent } from '../client/ophan/ophan';
+import {
+	submitClickComponentEvent,
+	submitComponentEvent,
+} from '../client/ophan/ophan';
 import { getZIndex } from '../lib/getZIndex';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
@@ -14,6 +17,7 @@ import {
 import { useConfig } from './ConfigContext';
 import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
 import { LoopVideoPlayer } from './LoopVideoPlayer';
+import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
 const videoContainerStyles = css`
 	z-index: ${getZIndex('loop-video-container')};
@@ -212,9 +216,23 @@ export const LoopVideo = ({
 
 	useEffect(() => {
 		if (isInView && !hasBeenInView) {
+			/**
+			 * Track the first time the video comes into view.
+			 */
+			void submitComponentEvent(
+				{
+					component: {
+						componentType: 'LOOP_VIDEO',
+						id: `gu-video-loop-${atomId}`,
+					},
+					action: 'VIEW',
+				},
+				'Web',
+			);
+
 			setHasBeenInView(true);
 		}
-	}, [isInView, hasBeenInView]);
+	}, [isInView, hasBeenInView, atomId]);
 
 	/**
 	 * Autoplay the video when it comes into view.
@@ -230,9 +248,25 @@ export const LoopVideo = ({
 			(playerState === 'NOT_STARTED' ||
 				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER')
 		) {
+			/**
+			 * check if the video has not been in view before tracking the play.
+			 * This is so we only track the first play.
+			 */
+			if (!hasBeenInView) {
+				ophanTrackerWeb(atomId, 'loop')('play');
+			}
+
 			void playVideo();
 		}
-	}, [isAutoplayAllowed, isInView, isPlayable, playerState, playVideo]);
+	}, [
+		isAutoplayAllowed,
+		isInView,
+		isPlayable,
+		playerState,
+		playVideo,
+		hasBeenInView,
+		atomId,
+	]);
 
 	/**
 	 * Stops playback when the video is scrolled out of view, resumes playbacks

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

@@ -26,17 +26,19 @@ const getAppsMediaEvent = (
 	}
 };
 
-const ophanTrackerWeb = (id: string) => {
+type VideoType = 'youtube' | 'loop';
+
+const ophanTrackerWeb = (id: string, videoType: VideoType) => {
 	return (trackingEvent: VideoEventKey): void => {
 		void getOphan('Web').then((ophan) => {
 			const event = {
 				video: {
-					id: `gu-video-youtube-${id}`,
+					id: `gu-video-${videoType}-${id}`,
 					eventType: `video:content:${trackingEvent}`,
 				} satisfies VideoEvent,
 			} satisfies EventPayload;
 			log('dotcom', {
-				from: 'YoutubeAtom event emitter web',
+				from: `${videoType}Atom event emitter web`,
 				id,
 				event,
 			});

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

@@ -172,7 +172,7 @@ export const YoutubeBlockComponent = ({
 				duration={duration}
 				eventEmitters={
 					renderingTarget === 'Web'
-						? [ophanTrackerWeb(id)]
+						? [ophanTrackerWeb(id, 'youtube')]
 						: [ophanTrackerApps(id)]
 				}
 				format={format}