Append distanceFromTop to VIEW labels.

Author: domlander

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

@@ -1,5 +1,5 @@
 import type { ComponentEvent } from '@guardian/ophan-tracker-js';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { submitComponentEvent } from '../client/ophan/ophan';
 
 const collectionIdentifier = '[data-collection-tracking="true"]';
@@ -8,15 +8,20 @@ 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.id;
 		if (sectionName === '') continue;
 
-		const distanceFromTop = (
-			element.getBoundingClientRect().top + window.pageYOffset
-		).toFixed(0);
-
 		const ophanComponentEvent: ComponentEvent = {
 			component: {
 				componentType: 'CONTAINER',
@@ -27,7 +32,11 @@ const reportInsertEvent = (elements: HTMLElement[]) => {
 				 * - 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
 				 */
-				labels: [sectionName, (index + 1).toString(), distanceFromTop],
+				labels: [
+					sectionName,
+					(index + 1).toString(),
+					calculateDistanceFromTop(element),
+				],
 			},
 			action: 'INSERT',
 		};
@@ -36,24 +45,23 @@ const reportInsertEvent = (elements: HTMLElement[]) => {
 	}
 };
 
-const reportViewEvent = (sectionName: string) => {
+const reportViewEvent = (element: HTMLElement) => {
 	const ophanComponentEvent: ComponentEvent = {
 		component: {
 			componentType: 'CONTAINER',
-			labels: [sectionName],
+			/**
+			 * Labels:
+			 * - The name of the collection
+			 * - The distance from the top of the collection to the top of the page
+			 */
+			labels: [element.id, calculateDistanceFromTop(element)],
 		},
 		action: 'VIEW',
 	};
 
 	void submitComponentEvent(ophanComponentEvent, 'Web');
 };
 
-const viewedCollections = new Set<string>();
-
-const setCollectionAsViewed = (id: string) => {
-	viewedCollections.add(id);
-};
-
 /**
  * Report fronts section data to Ophan.
  *
@@ -64,6 +72,12 @@ const setCollectionAsViewed = (id: string) => {
  *  - 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;
 
@@ -74,11 +88,13 @@ export const FrontSectionTracker = () => {
 		const callback = (entries: IntersectionObserverEntry[]) => {
 			for (const entry of entries) {
 				if (entry.isIntersecting) {
-					const collectionName = entry.target.id;
-					if (!viewedCollections.has(collectionName)) {
-						setCollectionAsViewed(collectionName);
-						reportViewEvent(collectionName);
-						observer.unobserve(entry.target);
+					const collectionElement = entry.target as HTMLElement;
+					const collectionName = collectionElement.id;
+
+					if (!viewedCollectionsRef.current.has(collectionName)) {
+						viewedCollectionsRef.current.add(collectionName);
+						reportViewEvent(collectionElement);
+						observer.unobserve(collectionElement);
 					}
 				}
 			}