Add looping video data- tracking for ophan (#14156)

* Add link name tracking on buttons and component tracking on the video container

* explicitly call clickComponent events on looping videos

* add explicit clickComponent tracking for play and mute buttons on looping videos

* update ophan tracker-js version

* bump support-dotcom-components to 7.5.0

* Update the loop video schema to include the atom id. This will be used for tracking.

* Remove click component event tracking as it is not required. We recieve enough tracking from the data-link-name

* Add data-link play / pause tracking to the video element so clicking on the video tracks this action.

* Only track plays when the play icon is clicked. It won't appear when the video is playing so it should never track a pause action.

* Track mute or unmute

* Align data-component with link name tracking

* Remove unnecessary commit

* Lift tracking into audio click function

---------

Co-authored-by: Jon Flynn <[email protected]>

Author: abeddow91

dotcom-rendering/package.json

@@ -38,12 +38,12 @@
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "23.0.0",
-		"@guardian/ophan-tracker-js": "2.2.10",
+		"@guardian/ophan-tracker-js": "2.3.0",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.4.0",
+		"@guardian/support-dotcom-components": "7.5.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "7.75.1",

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

@@ -32,6 +32,14 @@ export const getOphan = async (
 					);
 				}
 			},
+			trackClickComponentEvent: (e) => {
+				if (e instanceof Error) {
+					window.guardian.modules.sentry.reportError(
+						e,
+						"We are in DCAR but Ophan trackClickComponentEvent method got called. This shouldn't have happened. Please investigate why",
+					);
+				}
+			},
 			viewId: 'Apps',
 			pageViewId: 'Apps',
 		};
@@ -73,6 +81,14 @@ export const submitComponentEvent = async (
 	ophan.record({ componentEvent });
 };
 
+export const submitClickComponentEvent = async (
+	element: Element,
+	renderingTarget: RenderingTarget,
+): Promise<void> => {
+	const ophan = await getOphan(renderingTarget);
+	ophan.trackClickComponentEvent(element);
+};
+
 interface SdcTestMeta {
 	abTestName: NonNullable<ComponentEvent['abTest']>['name'];
 	abTestVariant: NonNullable<ComponentEvent['abTest']>['name'];

dotcom-rendering/src/components/Card/Card.tsx

@@ -915,6 +915,7 @@ export const Card = ({
 										/>
 									}
 									uniqueId={uniqueId}
+									atomId={media.mainMedia.atomId}
 								/>
 							</Island>
 						)}

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { log } from '@guardian/libs';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
+import { submitClickComponentEvent } from '../client/ophan/ophan';
 import { getZIndex } from '../lib/getZIndex';
 import { useIsInView } from '../lib/useIsInView';
 import { useShouldAdapt } from '../lib/useShouldAdapt';
@@ -33,6 +34,7 @@ export const dispatchCustomPlayAudioEvent = (uniqueId: string) => {
 
 type Props = {
 	src: string;
+	atomId: string;
 	uniqueId: string;
 	width: number;
 	height: number;
@@ -42,6 +44,7 @@ type Props = {
 
 export const LoopVideo = ({
 	src,
+	atomId,
 	uniqueId,
 	width,
 	height,
@@ -264,6 +267,8 @@ export const LoopVideo = ({
 	};
 
 	const handleAudioClick = (event: React.SyntheticEvent) => {
+		void submitClickComponentEvent(event.currentTarget, renderingTarget);
+
 		event.stopPropagation(); // Don't pause the video
 
 		if (isMuted) {
@@ -339,9 +344,11 @@ export const LoopVideo = ({
 			ref={setNode}
 			css={videoContainerStyles}
 			className="loop-video-container"
+			data-component="gu-video-loop"
 		>
 			<LoopVideoPlayer
 				src={src}
+				atomId={atomId}
 				uniqueId={uniqueId}
 				width={width}
 				height={height}

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -60,6 +60,7 @@ export const PLAYER_STATES = [
 
 type Props = {
 	src: string;
+	atomId: string;
 	uniqueId: string;
 	width: number;
 	height: number;
@@ -88,6 +89,7 @@ export const LoopVideoPlayer = forwardRef(
 	(
 		{
 			src,
+			atomId,
 			uniqueId,
 			width,
 			height,
@@ -143,6 +145,9 @@ export const LoopVideoPlayer = forwardRef(
 					tabIndex={0}
 					onError={onError}
 					css={videoStyles(width, height)}
+					data-link-name={`gu-video-loop-${
+						showPlayIcon ? 'play' : 'pause'
+					}-${atomId}`}
 				>
 					{/* Only mp4 is currently supported. Assumes the video file type is mp4. */}
 					{/* The start time is set to 1ms so that Safari will autoplay the video */}
@@ -157,6 +162,7 @@ export const LoopVideoPlayer = forwardRef(
 								type="button"
 								onClick={handlePlayPauseClick}
 								css={playIconStyles}
+								data-link-name={`gu-video-loop-play-${atomId}`}
 							>
 								<PlayIcon iconWidth="narrow" />
 							</button>
@@ -172,6 +178,9 @@ export const LoopVideoPlayer = forwardRef(
 							type="button"
 							onClick={handleAudioClick}
 							css={audioButtonStyles}
+							data-link-name={`gu-video-loop-${
+								isMuted ? 'unmute' : 'mute'
+							}-${atomId}`}
 						>
 							<div css={audioIconContainerStyles}>
 								<AudioIcon

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -5247,6 +5247,9 @@
                             "type": "string",
                             "const": "LoopVideo"
                         },
+                        "atomId": {
+                            "type": "string"
+                        },
                         "videoId": {
                             "type": "string"
                         },
@@ -5264,6 +5267,7 @@
                         }
                     },
                     "required": [
+                        "atomId",
                         "duration",
                         "height",
                         "type",

dotcom-rendering/src/frontend/schemas/feFront.json

@@ -3914,6 +3914,9 @@
                             "type": "string",
                             "const": "LoopVideo"
                         },
+                        "atomId": {
+                            "type": "string"
+                        },
                         "videoId": {
                             "type": "string"
                         },
@@ -3931,6 +3934,7 @@
                         }
                     },
                     "required": [
+                        "atomId",
                         "duration",
                         "height",
                         "type",

dotcom-rendering/src/model/enhanceCards.ts

@@ -209,6 +209,7 @@ const getActiveMediaAtom = (
 		if (asset?.platform === 'Url' && isLoopingVideoTest) {
 			return {
 				type: 'LoopVideo',
+				atomId: mediaAtom.id,
 				videoId: asset.id,
 				duration: mediaAtom.duration ?? 0,
 				// Size fixed to a 5:4 ratio

dotcom-rendering/src/types/mainMedia.ts

@@ -21,6 +21,7 @@ type Video = Media & {
 
 type LoopVideo = Media & {
 	type: 'LoopVideo';
+	atomId: string;
 	videoId: string;
 	height: number;
 	width: number;