Merge pull request #14282 from guardian/ab/section-tracker-spike

Adds tracking to front sections

Author: domlander

dotcom-rendering/src/components/FrontSection.tsx

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

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

@@ -0,0 +1,127 @@
+import type { ComponentEvent } from '@guardian/ophan-tracker-js';
+import { useEffect, useRef } from 'react';
+import { submitComponentEvent } from '../client/ophan/ophan';
+
+const collectionIdentifier = '[data-collection-tracking="true"]';
+
+const getCollectionElements = (): HTMLElement[] => {
+	return Array.from(document.querySelectorAll(collectionIdentifier));
+};
+
+/**
+ * Calculate the distance from the top of the element to the top of the page.
+ */
+const calculateDistanceFromTop = (collection: HTMLElement) => {
+	return (
+		collection.getBoundingClientRect().top + window.pageYOffset
+	).toFixed(0);
+};
+
+const reportInsertEvent = (elements: HTMLElement[]) => {
+	for (const [index, element] of elements.entries()) {
+		const sectionName = element.getAttribute('data-component');
+		if (sectionName === null) continue;
+
+		const ophanComponentEvent: ComponentEvent = {
+			component: {
+				componentType: 'CONTAINER',
+				id: element.id,
+				/**
+				 * Labels:
+				 * - The name of the collection
+				 * - The number of the collection in the list (the top collection is 1)
+				 * - The distance from the top of the collection to the top of the page in pixels
+				 * - The total height of the page in pixels
+				 */
+				labels: [
+					sectionName,
+					(index + 1).toString(),
+					calculateDistanceFromTop(element),
+					document.body.offsetHeight.toString(),
+				],
+			},
+			action: 'INSERT',
+		};
+
+		void submitComponentEvent(ophanComponentEvent, 'Web');
+	}
+};
+
+const reportViewEvent = (element: HTMLElement) => {
+	const sectionName = element.getAttribute('data-component');
+	if (sectionName === null) return;
+
+	const ophanComponentEvent: ComponentEvent = {
+		component: {
+			componentType: 'CONTAINER',
+			/**
+			 * Labels:
+			 * - The name of the collection
+			 * - The distance from the top of the collection to the top of the page in pixels
+			 * - The total height of the page in pixels
+			 */
+			labels: [
+				sectionName,
+				calculateDistanceFromTop(element),
+				document.body.offsetHeight.toString(),
+			],
+		},
+		action: 'VIEW',
+	};
+
+	void submitComponentEvent(ophanComponentEvent, 'Web');
+};
+
+/**
+ * Report fronts section data to Ophan.
+ *
+ * Sends an event with action: 'INSERT' for each collection that is rendered on the page, even if out of the viewport.
+ * Sends an event with action: 'VIEW' when a collection is viewed by the user, i.e. within the viewport.
+ *
+ * Assumptions:
+ *  - The id of the section/collection is also the human-readable name of the collection
+ */
+export const FrontSectionTracker = () => {
+	/**
+	 * Use a ref to persist this across renders.
+	 * Rendering is not affected by what collections have been viewed by the user.
+	 */
+	const viewedCollectionsRef = useRef<Set<string>>(new Set());
+
+	useEffect(() => {
+		if (!('IntersectionObserver' in window)) return;
+
+		const collectionElements: HTMLElement[] = getCollectionElements();
+
+		void reportInsertEvent(collectionElements);
+
+		const callback = (entries: IntersectionObserverEntry[]) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					const collectionElement = entry.target as HTMLElement;
+					const collectionName = collectionElement.id;
+
+					if (!viewedCollectionsRef.current.has(collectionName)) {
+						viewedCollectionsRef.current.add(collectionName);
+						reportViewEvent(collectionElement);
+						observer.unobserve(collectionElement);
+					}
+				}
+			}
+		};
+		const options = {
+			rootMargin: '-100px',
+		};
+		const observer = new IntersectionObserver(callback, options);
+
+		for (const collection of collectionElements) {
+			observer.observe(collection);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+
+	return null;
+};

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -18,6 +18,7 @@ import {
 	MobileAdSlot,
 } from '../components/FrontsAdSlots';
 import { FrontSection } from '../components/FrontSection';
+import { FrontSectionTracker } from '../components/FrontSectionTracker.importable';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
@@ -746,6 +747,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 					/>
 				</Island>
 			</BannerWrapper>
+
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<FrontSectionTracker />
+			</Island>
 		</>
 	);
 };