diff --git a/ab-testing/config/abTests.ts b/ab-testing/config/abTests.ts index a38ff0f3284..ce99fa70512 100644 --- a/ab-testing/config/abTests.ts +++ b/ab-testing/config/abTests.ts @@ -69,6 +69,19 @@ const ABTests: ABTest[] = [ groups: ["holdback"], shouldForceMetricsCollection: true, }, + { + name: "commercial-fronts-ad-increase-ad-limit", + description: + "A test to understand the impact of changing page-level ad limit on fronts", + owners: ["commercial.dev@guardian.co.uk"], + expirationDate: "2026-08-11", + type: "client", + status: "ON", + audienceSize: 10 / 100, + audienceSpace: "A", + groups: ["control", "variant"], + shouldForceMetricsCollection: true, + }, { name: "newsletters-in-article-signup-preview", description: diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index d2507a918bf..22e901414fd 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -31,6 +31,7 @@ import { SubNav } from '../components/SubNav.island'; import { TrendingTopics } from '../components/TrendingTopics'; import { ArticleDisplay } from '../lib/articleFormat'; import { canRenderAds } from '../lib/canRenderAds'; +import { getMaxFrontsBannerAds } from '../lib/commercial-constants'; import { getContributionsServiceUrl } from '../lib/contributions'; import { editionList } from '../lib/edition'; import { @@ -40,6 +41,7 @@ import { } from '../lib/getFrontsAdPositions'; import { hideAge } from '../lib/hideAge'; import { ophanComponentId } from '../lib/ophan-helpers'; +import { useAB } from '../lib/useAB'; import { worldCup2026PageIds } from '../lib/worldCup2026'; import type { NavType } from '../model/extract-nav'; import { palette as schemePalette } from '../palette'; @@ -117,6 +119,10 @@ export const FrontLayout = ({ front, NAV }: Props) => { editionId, } = front; + const abTests = useAB(); + + const maxAds = getMaxFrontsBannerAds(abTests); + const serverTime = front.serverTime; const renderAds = canRenderAds(front); @@ -136,7 +142,7 @@ export const FrontLayout = ({ front, NAV }: Props) => { : []; const desktopAdPositions = renderAds - ? getDesktopAdPositions(filteredCollections, pageId) + ? getDesktopAdPositions(filteredCollections, pageId, maxAds) : []; const showMostPopular = diff --git a/dotcom-rendering/src/lib/commercial-constants.ts b/dotcom-rendering/src/lib/commercial-constants.ts index 71d8aac94e7..920523c9315 100644 --- a/dotcom-rendering/src/lib/commercial-constants.ts +++ b/dotcom-rendering/src/lib/commercial-constants.ts @@ -1,9 +1,23 @@ +import type { ABTestAPI } from '../experiments/lib/ab-tests'; + /** * The maximum number of fronts-banner ads that can be inserted on any front. * fronts-banner ads are inserted from the desktop breakpoint. */ export const MAX_FRONTS_BANNER_ADS = 8; +export const getMaxFrontsBannerAds = ( + abTests: ABTestAPI | undefined, +): number => { + const isInVariantAdLimitGroup = + abTests?.isUserInTestGroup( + 'commercial-fronts-ad-increase-ad-limit', + 'variant', + ) ?? false; + + return isInVariantAdLimitGroup ? 16 : MAX_FRONTS_BANNER_ADS; +}; + /** * The maximum number of ads that can be inserted on any mobile front. * Mobile ads on fronts are inserted up until the tablet breakpoint. diff --git a/dotcom-rendering/src/lib/getFrontsAdPositions.ts b/dotcom-rendering/src/lib/getFrontsAdPositions.ts index 4b8b1f33d3c..99f5fa1707a 100644 --- a/dotcom-rendering/src/lib/getFrontsAdPositions.ts +++ b/dotcom-rendering/src/lib/getFrontsAdPositions.ts @@ -359,9 +359,8 @@ const canInsertDesktopAd = ( const getDesktopAdPositions = ( collections: AdCandidate[], pageId: string, + maxAdsAllowed = MAX_FRONTS_BANNER_ADS, ): number[] => { - const maxAdsAllowed = MAX_FRONTS_BANNER_ADS; - const adPositionsFromReducer = collections.reduce<{ heightSinceAd: number; adPositions: number[];