Record interscroller progress with logs and metrics (#1497)

.changeset/silly-cobras-grab.md

@@ -0,0 +1,5 @@
+---
+'@guardian/commercial': minor
+---
+
+Log interscroller progress with logs and metrics

src/core/lib/video-interscroller-progress.ts

@@ -0,0 +1,54 @@
+import { EventTimer } from 'core/event-timer';
+import { bypassMetricsSampling } from 'experiments/utils';
+
+const endpoint = window.guardian.config.page.isDev
+	? '//logs.code.dev-guardianapis.com/log'
+	: '//logs.guardianapis.com/log';
+
+let creativeId: number | undefined;
+let progress: number = 0;
+
+const sendProgress = () => {
+	if (!creativeId || !progress) {
+		return;
+	}
+	void fetch(endpoint, {
+		method: 'POST',
+		body: JSON.stringify({
+			label: 'commercial.interscroller.videoProgress',
+			properties: [
+				{ name: 'id', value: creativeId },
+				{ name: 'progress', value: progress },
+			],
+		}),
+		keepalive: true,
+		cache: 'no-store',
+		mode: 'no-cors',
+	});
+};
+
+const sendProgressOnUnloadViaLogs = () => {
+	window.addEventListener('visibilitychange', sendProgress, { once: true });
+	// Safari does not reliably fire the `visibilitychange` on page unload.
+	window.addEventListener('pagehide', sendProgress, { once: true });
+};
+
+const initVideoProgressReporting = (gamCreativeId: number) => {
+	creativeId = gamCreativeId;
+
+	EventTimer.get().setProperty('videoInterscrollerCreativeId', creativeId);
+
+	bypassMetricsSampling();
+
+	sendProgressOnUnloadViaLogs();
+};
+
+const updateVideoProgress = (updatedProgress: number) => {
+	progress = updatedProgress;
+	EventTimer.get().setProperty(
+		'videoInterscrollerPercentageProgress',
+		updatedProgress,
+	);
+};
+
+export { initVideoProgressReporting, updateVideoProgress };

src/core/messenger/background.ts

@@ -1,7 +1,9 @@
 import { isObject } from '@guardian/libs';
-import { EventTimer } from 'core/event-timer';
+import {
+	initVideoProgressReporting,
+	updateVideoProgress,
+} from 'core/lib/video-interscroller-progress';
 import type { RegisterListener } from 'core/messenger';
-import { bypassCommercialMetricsSampling } from 'core/send-commercial-metrics';
 import fastdom from 'utils/fastdom-promise';
 import {
 	renderAdvertLabel,
@@ -239,7 +241,10 @@ const setupBackground = async (
 						const creativeTemplateId =
 							slot.getResponseInformation()?.creativeTemplateId;
 						if (creativeTemplateId === 11885667) {
-							return slot.getResponseInformation()?.creativeId;
+							return (
+								slot.getResponseInformation()?.creativeId ??
+								undefined
+							);
 						}
 					}
 					return undefined;
@@ -263,21 +268,17 @@ const setupBackground = async (
 
 				observer.observe(backgroundParent);
 
-				EventTimer.get().setProperty(
-					'videoInterscrollerCreativeId',
-					getCreativeId(),
-				);
+				const creativeId = getCreativeId();
 
-				void bypassCommercialMetricsSampling();
+				if (creativeId) {
+					initVideoProgressReporting(creativeId);
+				}
 
 				video.ontimeupdate = function () {
 					const percent = Math.round(
 						100 * (video.currentTime / video.duration),
 					);
-					EventTimer.get().setProperty(
-						'videoInterscrollerPercentageProgress',
-						percent,
-					);
+					updateVideoProgress(percent);
 				};
 			}
 		} else {