Merge pull request #14473 from guardian/ih/configure-ab-metrics

Enable per-test configuration to force metrics collection for A/B tests under the new framework

Author: i-hardy

ab-testing/abTest.ts

@@ -31,6 +31,7 @@ export const ABTests: ABTest[] = [
 		type: 'client',
 		audienceSize: 10 / 100,
 		groups: ['control', 'variant'],
+		shouldForceMetricsCollection: true,
 	},
 	{
 		name: 'commercial-server-side-test',
@@ -42,6 +43,7 @@ export const ABTests: ABTest[] = [
 		type: 'server',
 		audienceSize: 10 / 100,
 		groups: ['control', 'variant'],
+		shouldForceMetricsCollection: true,
 	},
 	{
 		name: 'commercial-large-overlap-test',
@@ -57,5 +59,6 @@ export const ABTests: ABTest[] = [
 		audienceSize: 50 / 100,
 		groups: ['control', 'variant'],
 		audienceSpace: 'B',
+		shouldForceMetricsCollection: true,
 	},
 ];

ab-testing/index.ts

@@ -0,0 +1,4 @@
+// @ts-ignore - extension is required to import this as a package in DCR
+import { ABTests } from './abTest.ts';
+
+export { ABTests };

ab-testing/package.json

@@ -0,0 +1,7 @@
+{
+	"name": "@guardian/ab-testing",
+	"version": "1.0.0",
+	"description": "A/B test definitions and configuration",
+	"main": "index.ts",
+	"type": "module"
+}

ab-testing/types.ts

@@ -37,6 +37,10 @@ type ABTest = {
 	audienceSpace?: 'A' | 'B' | 'C';
 	/** Test group definition */
 	groups: string[];
+	/** Bypasses sampling to force metrics collection for this test
+	 * See DCR Metrics component for end usage
+	 */
+	shouldForceMetricsCollection?: boolean;
 };
 
 export type { ABTest, FastlyTestParams, AudienceSpace, AllSpace };

dotcom-rendering/package.json

@@ -27,6 +27,7 @@
 		"@emotion/react": "11.14.0",
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
+		"@guardian/ab-testing": "workspace:ab-testing",
 		"@guardian/braze-components": "22.2.0",
 		"@guardian/bridget": "8.7.0",
 		"@guardian/browserslist-config": "6.1.0",

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

@@ -1,4 +1,5 @@
 import type { ABTest, ABTestAPI } from '@guardian/ab-core';
+import { ABTests } from '@guardian/ab-testing';
 import {
 	bypassCommercialMetricsSampling,
 	EventTimer,
@@ -31,6 +32,15 @@ const clientSideTestsToForceMetrics: ABTest[] = [
 	/* keep array multi-line */
 ];
 
+const shouldCollectMetricsForBetaTests = (userTestParticipations: string[]) => {
+	const userParticipationConfigs = ABTests.filter((test) =>
+		userTestParticipations.includes(test.name),
+	);
+	return userParticipationConfigs.some(
+		(test) => test.shouldForceMetricsCollection,
+	);
+};
+
 const useBrowserId = () => {
 	const [browserId, setBrowserId] = useState<string>();
 
@@ -89,20 +99,22 @@ export const Metrics = ({ commercialMetricsEnabled, tests }: Props) => {
 
 	const userInServerSideTest = Object.keys(tests).length > 0;
 
-	const betaParticipations = betaABTest?.getParticipations() ?? {};
+	const userBetaParticipations = betaABTest?.getParticipations() ?? {};
 
-	const userInBetaABTest = Object.keys(betaParticipations).length > 0;
+	const collectBetaTestMetrics = shouldCollectMetricsForBetaTests(
+		Object.keys(userBetaParticipations),
+	);
 
 	const shouldBypassSampling = useCallback(
 		(api: ABTestAPI) =>
 			willRecordCoreWebVitals ||
 			userInServerSideTest ||
-			userInBetaABTest ||
+			collectBetaTestMetrics ||
 			clientSideTestsToForceMetrics.some((test) =>
 				api.runnableTest(test),
 			),
 
-		[userInServerSideTest, userInBetaABTest],
+		[userInServerSideTest, collectBetaTestMetrics],
 	);
 
 	useEffect(

pnpm-lock.yaml

@@ -2,3 +2,4 @@ packages:
   - 'apps-rendering'
   - 'dotcom-rendering'
   - 'libs/**'
+  - 'ab-testing'