Change additionalSizes for article-end header bidding integration and add 0% test

Author: deedeeh

ab-testing/config/abTests.ts

@@ -333,6 +333,19 @@ const ABTests: ABTest[] = [
 		],
 		shouldForceMetricsCollection: true,
 	},
+	{
+		name: "commercial-article-end-header-bidding",
+		description:
+			"Test opening up the article-end ad slot in the US region for HeaderBidding",
+		owners: ["commercial.dev@guardian.co.uk"],
+		expirationDate: "2026-10-01",
+		type: "client",
+		status: "ON",
+		audienceSize: 0 / 100,
+		audienceSpace: "B",
+		groups: ["control", "variant"],
+		shouldForceMetricsCollection: true,
+	},
 ];
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");

dotcom-rendering/src/components/SlotBodyEnd.island.tsx

@@ -56,6 +56,7 @@ type Props = {
 
 const slotStyles = css`
 	color: ${palette.neutral[7]};
+	margin: 12px auto;
 `;
 
 const buildReaderRevenueEpicConfig = (
@@ -130,10 +131,9 @@ export const SlotBodyEnd = ({
 	const [asyncArticleCount, setAsyncArticleCount] =
 		useState<Promise<WeeklyArticleHistory | undefined>>();
 
-	const showPublicGood = countryCode === 'US';
+	const isInUS = countryCode === 'US';
 
-	const showArticleEndSlot =
-		renderAds && !isLabs && showPublicGood && articleEndSlot;
+	const showArticleEndSlot = renderAds && !isLabs && isInUS && articleEndSlot;
 
 	useEffect(() => {
 		setAsyncArticleCount(
@@ -238,7 +238,9 @@ export const SlotBodyEnd = ({
 				new CustomEvent('gu.commercial.slot.fill', {
 					detail: {
 						slotId: 'dfp-ad--article-end',
-						additionalSizes: { mobile: [adSizes.fluid] }, // Public Good additional ad slot sizes
+						additionalSizes: {
+							mobile: [adSizes.mpu],
+						},
 					},
 				}),
 			);