Merge branch 'main' into ih/hosted-disclaimer

Author: i-hardy

ab-testing/config/abTests.ts

@@ -43,19 +43,6 @@ const ABTests: ABTest[] = [
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: true,
 	},
-	{
-		name: "commercial-user-module-liveramp",
-		description:
-			"Test measuring ad targeting from LiveRamp's identityLinkIdSystem module integration",
-		owners: ["[email protected]"],
-		expirationDate: `2026-03-04`,
-		type: "client",
-		status: "ON",
-		audienceSize: 10 / 100,
-		audienceSpace: "B",
-		groups: ["control", "variant"],
-		shouldForceMetricsCollection: true,
-	},
 	{
 		name: "webex-football-redesign",
 		description: "Testing the Redesign for the football pages",
@@ -107,15 +94,16 @@ const ABTests: ABTest[] = [
 		shouldForceMetricsCollection: false,
 	},
 	{
-		name: "growth-admiral-adblock-recovery",
-		description: "Test Admiral ad blocker detection and recovery modal",
+		name: "growth-admiral-adblock-detect",
+		description:
+			"Control group for Admiral ad blocker - runs the detection script but does not show the modal",
 		owners: ["[email protected]"],
 		expirationDate: "2027-01-21",
 		type: "client",
 		status: "ON",
 		audienceSize: 10 / 100,
 		audienceSpace: "A",
-		groups: ["control"],
+		groups: ["variant-detect"],
 		shouldForceMetricsCollection: false,
 	},
 	{

dotcom-rendering/package.json

@@ -43,7 +43,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "11.3.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "8.4.0",
+		"@guardian/support-dotcom-components": "8.4.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.58.0",
 		"@sentry/browser": "10.39.0",

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

@@ -210,103 +210,116 @@ const testName = 'growth-admiral-adblock-recovery';
 export const AdmiralScript = () => {
 	const { renderingTarget } = useConfig();
 	const abTests = useBetaAB();
-	const isInControlGroup =
-		abTests?.isUserInTestGroup(testName, 'control') ?? false;
-	const variantName = isInControlGroup ? 'control' : undefined;
+	const isInVariantDetectGroup =
+		abTests?.isUserInTestGroup(testName, 'variant-detect') ?? false;
+	const variantName = isInVariantDetectGroup
+		? 'variant-detect'
+		: 'variant-recover'; //We need to default to 'variant-recover' for users who are not in the AB test in order to show Admiral Modal to all users in the US who are not blocked by the CMP and meet the other criteria.
 
 	useEffect(() => {
 		/**
 		 * The Admiral bootstrap script should only run under the following conditions:
 		 *
 		 * - Should not run if the CMP is due to show
 		 * - Should only run in the US
-		 * - Should only run if in the AB test (control group)
 		 * - Should not run if the gu_hide_support_messaging cookie is set
 		 * - Should not run for content marked as: shouldHideAdverts, shouldHideReaderRevenue, isSensitive
 		 * - Should not run for paid-content sponsorship type (includes Hosted Content)
 		 * - Should not run for certain sections
 		 *
-		 * Control group loads the script but the modal will not be shown.
+		 * Variant-detect group loads the script but the modal will not be shown.
 		 */
 		const page = window.guardian.config.page;
+		if (!window.guardian.config.switches.consentManagement) return;
 
-		const shouldRun =
-			cmp.hasInitialised() &&
-			!cmp.willShowPrivacyMessageSync() &&
-			isInUsa() &&
-			isInControlGroup &&
-			!getCookie({
-				name: 'gu_hide_support_messaging',
-				shouldMemoize: true,
-			}) &&
-			!page.shouldHideAdverts &&
-			!page.shouldHideReaderRevenue &&
-			!page.isSensitive &&
-			page.sponsorshipType !== 'paid-content' &&
-			![
-				'about',
-				'info',
-				'membership',
-				'help',
-				'guardian-live-australia',
-				'gnm-archive',
-				'guardian-labs',
-				'thefilter',
-			].includes(page.section ?? '');
-		if (!shouldRun) return;
-
-		// Record INSERT Ophan event
-		void recordAdmiralOphanEvent(
-			variantName,
-			{
-				action: 'INSERT',
-			},
-			renderingTarget,
-		);
+		let admiralScript: HTMLScriptElement | undefined;
+		let isCancelled = false;
 
-		// Initialize Admiral Adblock Recovery
-		log('dotcom', '🛡️ Initialising Admiral Adblock Recovery');
+		const initialiseAdmiral = async () => {
+			try {
+				const willShowPrivacyMessage =
+					await cmp.willShowPrivacyMessage();
 
-		// Set up window.admiral stub
-		// This initializes admiral before the bootstrap script loads
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Required for Admiral stub initialization
-		type AdmiralStub = Admiral & { q?: any[] };
-		const w = window as Window & { admiral?: AdmiralStub };
+				const shouldRun =
+					!willShowPrivacyMessage &&
+					isInUsa() &&
+					!getCookie({
+						name: 'gu_hide_support_messaging',
+						shouldMemoize: true,
+					}) &&
+					!page.shouldHideAdverts &&
+					!page.shouldHideReaderRevenue &&
+					!page.isSensitive &&
+					page.sponsorshipType !== 'paid-content' &&
+					![
+						'about',
+						'info',
+						'membership',
+						'help',
+						'guardian-live-australia',
+						'gnm-archive',
+						'guardian-labs',
+						'thefilter',
+					].includes(page.section ?? '');
 
-		if (!w.admiral) {
-			// Create the Admiral stub function with queue
-			const stub = function (...args: unknown[]) {
-				if (!stub.q) stub.q = [];
-				stub.q.push(args);
-			} as AdmiralStub;
-			w.admiral = stub;
-		}
+				if (!shouldRun || isCancelled) return;
 
-		log('dotcom', '🛡️ Setting up Admiral event logger');
+				void recordAdmiralOphanEvent(
+					variantName,
+					{
+						action: 'INSERT',
+					},
+					renderingTarget,
+				);
+
+				log('dotcom', '🛡️ Initialising Admiral Adblock Recovery');
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Required for Admiral stub initialization
+				type AdmiralStub = Admiral & { q?: any[] };
+				const w = window as Window & { admiral?: AdmiralStub };
 
-		// Set up Admiral event logging
-		setUpAdmiralEventLogger(w.admiral, variantName, renderingTarget);
+				if (!w.admiral) {
+					const stub = function (...args: unknown[]) {
+						if (!stub.q) stub.q = [];
+						stub.q.push(args);
+					} as AdmiralStub;
+					w.admiral = stub;
+				}
 
-		// Set AB test targeting
-		if (variantName) {
-			w.admiral('targeting', 'set', 'guAbTest', variantName);
-		}
+				log('dotcom', '🛡️ Setting up Admiral event logger');
+				setUpAdmiralEventLogger(
+					w.admiral,
+					variantName,
+					renderingTarget,
+				);
 
-		// Load Admiral bootstrap script
-		const BASE_AJAX_URL = window.guardian.config.page.ajaxUrl;
+				if (variantName) {
+					w.admiral('targeting', 'set', 'guAbTest', variantName);
+				}
 
-		const admiralScript = document.createElement('script');
-		admiralScript.src = `${BASE_AJAX_URL}/commercial/admiral-bootstrap.js`;
-		admiralScript.async = true;
-		document.head.appendChild(admiralScript);
+				const BASE_AJAX_URL = window.guardian.config.page.ajaxUrl;
+				admiralScript = document.createElement('script');
+				admiralScript.src = `${BASE_AJAX_URL}/commercial/admiral-bootstrap.js`;
+				admiralScript.async = true;
+				document.head.appendChild(admiralScript);
+
+				log('dotcom', '🛡️ Admiral initialization complete');
+			} catch (error) {
+				log(
+					'dotcom',
+					'🛡️ Admiral - Error waiting for CMP readiness:',
+					error,
+				);
+			}
+		};
 
-		log('dotcom', '🛡️ Admiral initialization complete');
+		void initialiseAdmiral();
 
 		return () => {
-			// Clean up Admiral bootstrap script
-			admiralScript.parentNode?.removeChild(admiralScript);
+			isCancelled = true;
+			admiralScript?.parentNode?.removeChild(admiralScript);
 		};
-	}, [isInControlGroup, variantName, renderingTarget]);
+	}, [variantName, renderingTarget]);
 
 	return null;
 };

dotcom-rendering/src/components/ContainerTitle.tsx

@@ -41,7 +41,10 @@ const headerStyles = css`
 `;
 
 const primaryTitleStyles = css`
-	${headlineBold28};
+	${headlineBold24};
+	${from.tablet} {
+		${headlineBold28};
+	}
 `;
 const secondaryTitleStyles = css`
 	${textSansBold17};

dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { breakpoints, from } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { FEFootballMatchStatsSummary } from '../frontend/feFootballMatchInfoPage';
 import { palette } from '../palette';
 import { FootballMiniMatchStats as FootballMiniMatchStatsComponent } from './FootballMiniMatchStats';
 
@@ -18,23 +19,13 @@ const gridCss = css`
 	}
 `;
 
-const containerCss = css`
-	padding: 10px;
-	${from.desktop} {
-		padding-left: 20px;
-		padding-right: 0;
-	}
-`;
-
 const meta = {
 	title: 'Components/Football Mini Match Stats',
 	component: FootballMiniMatchStatsComponent,
 	decorators: [
 		(Story) => (
 			<div css={gridCss}>
-				<div css={containerCss}>
-					<Story />
-				</div>
+				<Story />
 			</div>
 		),
 	],
@@ -52,24 +43,41 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const feMatchStatsSummaryData: FEFootballMatchStatsSummary = {
+	id: '4540747',
+	homeTeam: {
+		id: '49',
+		name: 'Bristol City',
+		possession: 53,
+		shotsOn: 5,
+		shotsOff: 3,
+		colours: '#c70c23',
+	},
+	awayTeam: {
+		id: '91',
+		name: 'Wrexham',
+		possession: 47,
+		shotsOn: 3,
+		shotsOff: 6,
+		colours: '#d82529',
+	},
+	status: 'FT',
+	infoURL:
+		'https://www.theguardian.com/football/match/2026/feb/17/bristolcity-v-wrexham',
+};
+
+const getMockData = (data: FEFootballMatchStatsSummary) =>
+	new Promise((resolve) => {
+		setTimeout(() => {
+			resolve(data);
+		}, 1000);
+	});
+
 export const FootballMiniMatchStats = {
 	args: {
-		homeTeam: {
-			name: 'Manchester United',
-			colour: '#da020e',
-		},
-		awayTeam: {
-			name: 'Arsenal',
-			colour: '#023474',
-		},
-		stats: [
-			{
-				heading: 'Possession',
-				homeValue: 39,
-				awayValue: 61,
-				isPercentage: true,
-			},
-			{ heading: 'Goal Attempts', homeValue: 7, awayValue: 4 },
-		],
+		matchStatsUrl:
+			'https://api.nextgen.guardianapps.co.uk/football/api/match-stats-summary/2026/02/17/49/91.json',
+		getMatchStatsData: () => getMockData(feMatchStatsSummaryData),
+		refreshInterval: 16_000,
 	},
 } satisfies Story;