Add linkTo prop to LoopVideo for navigation tracking on first view event. (#14397)

Author: abeddow91

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

@@ -895,6 +895,7 @@ export const Card = ({
 									fallbackImageLoading={imageLoading}
 									fallbackImageAlt={media.imageAltText}
 									fallbackImageAspectRatio="5:4"
+									linkTo={linkTo}
 								/>
 							</Island>
 						)}

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

@@ -116,6 +116,7 @@ type Props = {
 	fallbackImageLoading: CardPictureProps['loading'];
 	fallbackImageAlt: CardPictureProps['alt'];
 	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
+	linkTo: string;
 };
 
 export const LoopVideo = ({
@@ -130,6 +131,7 @@ export const LoopVideo = ({
 	fallbackImageLoading,
 	fallbackImageAlt,
 	fallbackImageAspectRatio,
+	linkTo,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -333,6 +335,7 @@ export const LoopVideo = ({
 					component: {
 						componentType: 'LOOP_VIDEO',
 						id: `gu-video-loop-${atomId}`,
+						labels: [linkTo],
 					},
 					action: 'VIEW',
 				},
@@ -341,7 +344,7 @@ export const LoopVideo = ({
 
 			setHasBeenInView(true);
 		}
-	}, [isInView, hasBeenInView, atomId]);
+	}, [isInView, hasBeenInView, atomId, linkTo]);
 
 	/**
 	 * Handle play/pause, when instigated by the browser.