Create SectionTracker component

Co-authored-by: Anna Beddow <[email protected]>

Author: domlander

dotcom-rendering/src/components/FrontSection.tsx

@@ -624,7 +624,7 @@ export const FrontSection = ({
 				data-component={ophanComponentName}
 				data-container-name={containerName}
 				data-container-level={containerLevel}
-				data-tracking={true}
+				data-collection-tracking={true}
 				css={[
 					fallbackStyles,
 					containerStylesUntilLeftCol,

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

@@ -1,23 +1,66 @@
+import { log } from '@guardian/libs';
+import type { ComponentEvent } from '@guardian/ophan-tracker-js';
 import { useEffect } from 'react';
-import { getOphan } from '../client/ophan/ophan';
+import { submitComponentEvent } from '../client/ophan/ophan';
 
+/**
+ * Send submitComponentEvent event with action: 'INSERT' when the collection is rendered on the page.
+ * Send submitComponentEvent event with action: 'VIEW' when a collection is viewed by the user.
+ */
 export const SectionTracker = () => {
 	useEffect(() => {
 		const elements: NodeListOf<HTMLElement> = document.querySelectorAll(
-			'[data-tracking="true"]',
+			'[data-collection-tracking="true"]',
 		);
 
-		const trackAttention = async () => {
+		const recordInsertEvent = () => {
+			try {
+				for (const [index, el] of elements.entries()) {
+					const sectionName = el.getAttribute('data-component');
+					if (sectionName === null) break;
+
+					const ophanComponentEvent: ComponentEvent = {
+						component: {
+							componentType: 'CONTAINER',
+							id: el.id,
+							labels: [
+								sectionName,
+								index.toString(),
+								el.getBoundingClientRect().top.toFixed(0),
+							],
+						},
+						action: 'INSERT',
+					};
+
+					void submitComponentEvent(ophanComponentEvent, 'Web');
+				}
+			} catch (error) {
+				log('dotcom', 'Failed to track video attention:', error);
+			}
+		};
+
+		const recordViewEvent = () => {
 			try {
-				const ophan = await getOphan('Web');
 				for (const el of elements) {
-					ophan.trackComponentAttention(el.id, el, 0.1, false);
+					const ophanComponentEvent: ComponentEvent = {
+						component: {
+							componentType: 'CONTAINER',
+							id: el.id,
+							labels: ['label'],
+						},
+						action: 'VIEW',
+					};
+
+					void submitComponentEvent(ophanComponentEvent, 'Web');
 				}
 			} catch (error) {
-				console.error('Failed to track video attention:', error);
+				log('dotcom', 'Failed to track video attention:', error);
 			}
 		};
-		void trackAttention();
+
+		void recordInsertEvent();
+
+		void recordViewEvent();
 	}, []);
 
 	return null;

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -24,6 +24,7 @@ import { LabsHeader } from '../components/LabsHeader';
 import { LabsSection } from '../components/LabsSection';
 import { Masthead } from '../components/Masthead/Masthead';
 import { Section } from '../components/Section';
+import { SectionTracker } from '../components/SectionTracker.importable';
 import { Snap } from '../components/Snap';
 import { SnapCssSandbox } from '../components/SnapCssSandbox';
 import { StickyBottomBanner } from '../components/StickyBottomBanner.importable';
@@ -51,7 +52,6 @@ import type {
 } from '../types/front';
 import { pageSkinContainer } from './lib/pageSkin';
 import { BannerWrapper, Stuck } from './lib/stickiness';
-import { SectionTracker } from '../components/SectionTracker.importable';
 
 interface Props {
 	front: Front;
@@ -191,9 +191,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	return (
 		<>
-			<Island priority={'critical'}>
-				<SectionTracker />
-			</Island>
 			<div data-print-layout="hide" id="bannerandheader">
 				{renderAds && (
 					<Stuck>
@@ -750,6 +747,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 					/>
 				</Island>
 			</BannerWrapper>
+
+			<Island priority="enhancement" defer={{ until: 'idle' }}>
+				<SectionTracker />
+			</Island>
 		</>
 	);
 };