Add test to compare sendBeacon and fetch numbers for users with no ad…

… blocker (#1416)

* Add test to compare sendBeacon and fetch numbers for users with no adblocker

* Tidy label

* Changeset

.changeset/big-pens-agree.md

@@ -0,0 +1,5 @@
+---
+'@guardian/commercial': patch
+---
+
+Add sendBeacon test to messenger code

src/core/messenger/background.ts

@@ -184,6 +184,38 @@ const setupBackground = async (
 		specs.scrollType,
 	);
 
+	/* We're sending both sendBeacon and fetch messages here to test if we receive the same numbers of each.
+	Our hypothesis is that sendBeacon is less reliable because it gets blocked by some ad blockers. This messenger
+	code only fires if a template ad (eg fabric or interscroller) is present on the page and sends a message. This
+	means we can control for ad blockers, as there should be no ad blocker present if we reach this code. So if
+	our hypothesis is true, we should observe parity in the number of messages received using each method */
+
+	const endpoint = window.guardian.config.page.isDev
+		? '//logs.code.dev-guardianapis.com/log'
+		: '//logs.guardianapis.com/log';
+
+	const shouldTestBeacon = Math.random() <= 10 / 100;
+
+	if (shouldTestBeacon) {
+		const beaconEvent = {
+			label: 'commercial.test_send_beacon',
+			properties: [{ name: 'userAgent', value: navigator.userAgent }],
+		};
+
+		const fetchEvent = {
+			label: 'commercial.test_fetch',
+			properties: [{ name: 'userAgent', value: navigator.userAgent }],
+		};
+
+		window.navigator.sendBeacon(endpoint, JSON.stringify(beaconEvent));
+
+		void fetch(endpoint, {
+			method: 'POST',
+			body: JSON.stringify(fetchEvent),
+			keepalive: true,
+		});
+	}
+
 	return fastdom.mutate(() => {
 		setBackgroundStyles(specs, background);