Onwards container view tracking (#14639)

* Add container view tracking to onwards containers

* Prefer root margin check for intersection observer

Author: abeddow91

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

@@ -1,9 +1,13 @@
 import { css } from '@emotion/react';
 import { isNonNullable } from '@guardian/libs';
+import type { ComponentEvent } from '@guardian/ophan-tracker-js';
+import { useEffect, useState } from 'react';
+import { submitComponentEvent } from '../client/ophan/ophan';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { decideTrail, dedupeTrail } from '../lib/decideTrail';
 import { useApi } from '../lib/useApi';
 import { addDiscussionIds } from '../lib/useCommentCount';
+import { useIsInView } from '../lib/useIsInView';
 import { palette } from '../palette';
 import type { OnwardsSource } from '../types/onwards';
 import type { RenderingTarget } from '../types/renderingTarget';
@@ -20,6 +24,7 @@ type Props = {
 	absoluteServerTimes: boolean;
 	renderingTarget: RenderingTarget;
 	isAdFreeUser: boolean;
+	containerPosition: string;
 	webURL: string;
 };
 
@@ -59,8 +64,35 @@ export const FetchOnwardsData = ({
 	absoluteServerTimes,
 	renderingTarget,
 	isAdFreeUser,
+	containerPosition,
 	webURL,
 }: Props) => {
+	const [hasBeenSeen, setIsInViewRef] = useIsInView({ rootMargin: `-100px` });
+
+	const [hasTrackedView, setHasTrackedView] = useState(false);
+
+	useEffect(() => {
+		if (hasBeenSeen && !hasTrackedView) {
+			const ophanComponentEvent: ComponentEvent = {
+				component: {
+					componentType: 'CONTAINER',
+					id: `onwards-${onwardsSource}-${containerPosition}`,
+				},
+				action: 'VIEW',
+			};
+
+			void submitComponentEvent(ophanComponentEvent, renderingTarget);
+
+			setHasTrackedView(true);
+		}
+	}, [
+		hasBeenSeen,
+		hasTrackedView,
+		renderingTarget,
+		onwardsSource,
+		containerPosition,
+	]);
+
 	const { data, error } = useApi<OnwardsResponse>(url);
 
 	if (error) {
@@ -88,7 +120,7 @@ export const FetchOnwardsData = ({
 	const trails = buildTrails(data.trails, limit, isAdFreeUser, webURL);
 
 	return (
-		<div css={minHeight}>
+		<div ref={setIsInViewRef} css={minHeight}>
 			<Carousel
 				heading={data.heading || data.displayname} // Sometimes the api returns heading as 'displayName'
 				trails={trails}

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

@@ -311,6 +311,10 @@ export const OnwardsUpper = ({
 	const canHaveCuratedContent =
 		format.design === ArticleDesign.Gallery ? isUndefined(url) : true;
 
+	const hasOnwardsContainer = !!url;
+	const showCuratedContainer =
+		!!curatedDataUrl && !isPaidContent && canHaveCuratedContent;
+
 	return (
 		<div css={onwardsWrapper}>
 			{!!url && (
@@ -327,11 +331,12 @@ export const OnwardsUpper = ({
 						absoluteServerTimes={absoluteServerTimes}
 						renderingTarget={renderingTarget}
 						isAdFreeUser={isAdFreeUser}
+						containerPosition={'first'}
 						webURL={webURL}
 					/>
 				</Section>
 			)}
-			{!!curatedDataUrl && !isPaidContent && canHaveCuratedContent && (
+			{showCuratedContainer && (
 				<Section
 					fullWidth={true}
 					borderColour={palette('--article-section-border')}
@@ -345,6 +350,9 @@ export const OnwardsUpper = ({
 						absoluteServerTimes={absoluteServerTimes}
 						renderingTarget={renderingTarget}
 						isAdFreeUser={isAdFreeUser}
+						containerPosition={
+							hasOnwardsContainer ? 'second' : 'first'
+						}
 						webURL={webURL}
 					/>
 				</Section>