diff --git a/ab-testing/config/abTests.ts b/ab-testing/config/abTests.ts index 64335553d5f..f31bed68f95 100644 --- a/ab-testing/config/abTests.ts +++ b/ab-testing/config/abTests.ts @@ -215,7 +215,7 @@ const ABTests: ABTest[] = [ status: "ON", audienceSize: 0 / 100, audienceSpace: "B", - groups: ["control", "variant"], + groups: ["control", "variant", "variant2"], shouldForceMetricsCollection: true, }, { diff --git a/dotcom-rendering/src/components/StickyBottomBanner.island.tsx b/dotcom-rendering/src/components/StickyBottomBanner.island.tsx index 00a3168518c..953e5d0f7ad 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner.island.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner.island.tsx @@ -125,6 +125,7 @@ const buildRRBannerConfigWith = ({ pageId, inHoldbackGroup, inAuxiaVariant, + inNoShowMobileAboveNavVariant, }: { isSignedIn: boolean; countryCode: CountryCode; @@ -144,6 +145,7 @@ const buildRRBannerConfigWith = ({ pageId?: string; inHoldbackGroup?: boolean; inAuxiaVariant?: boolean; + inNoShowMobileAboveNavVariant?: boolean; }): CandidateConfig> => { return { candidate: { @@ -182,6 +184,7 @@ const buildRRBannerConfigWith = ({ pageId, inHoldbackGroup, inAuxiaVariant, + inNoShowMobileAboveNavVariant, }), show: ({ name, props }: ModuleData) => ( @@ -339,6 +342,11 @@ export const StickyBottomBanner = ({ 'control', ) ?? false, inAuxiaVariant, + inNoShowMobileAboveNavVariant: + abTests?.isUserInTestGroup( + 'commercial-mobile-above-nav-test', + 'variant2', + ) ?? false, }); const brazeArticleContext: BrazeArticleContext = { section: sectionId, diff --git a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx index caaf2996745..8b79029ea46 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx @@ -52,6 +52,7 @@ type BaseProps = { pageId?: string; inHoldbackGroup?: boolean; inAuxiaVariant?: boolean; + inNoShowMobileAboveNavVariant?: boolean; }; type BuildPayloadProps = BaseProps & { @@ -76,6 +77,19 @@ export type CanShowFunctionType = ( props: CanShowProps, ) => Promise>; +// the test includes the crossword pages (tag type/crossword) and the crosswords front (pageId === 'crosswords') +const isInMobileAboveNavTest = ( + tags: TagType[], + renderingTarget: RenderingTarget, + pageId?: string, +): boolean => { + return ( + (tags.some((tag) => tag.id === 'type/crossword') || + pageId === 'crosswords') && + renderingTarget === 'Web' + ); +}; + const getArticleCountToday = ( articleCounts: ArticleCounts | undefined, ): number | undefined => { @@ -209,7 +223,15 @@ export const canShowRRBanner: CanShowFunctionType< pageId, inHoldbackGroup, inAuxiaVariant, + inNoShowMobileAboveNavVariant, }) => { + if ( + inNoShowMobileAboveNavVariant === true && + isInMobileAboveNavTest(tags, renderingTarget, pageId) + ) { + return { show: false }; + } + if (!remoteBannerConfig) { return { show: false }; } diff --git a/dotcom-rendering/src/layouts/CrosswordLayout.tsx b/dotcom-rendering/src/layouts/CrosswordLayout.tsx index 9cdca5f7ca6..dca13427980 100644 --- a/dotcom-rendering/src/layouts/CrosswordLayout.tsx +++ b/dotcom-rendering/src/layouts/CrosswordLayout.tsx @@ -31,6 +31,7 @@ import { SubMeta } from '../components/SubMeta'; import { SubNav } from '../components/SubNav.island'; import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat'; import { canRenderAds } from '../lib/canRenderAds'; +import { shouldShowMobileAboveNavSlot } from '../lib/commercialMobileAboveNavTest'; import { getContributionsServiceUrl } from '../lib/contributions'; import type { NavType } from '../model/extract-nav'; import { palette as themePalette } from '../palette'; @@ -139,11 +140,11 @@ export const CrosswordLayout = (props: Props) => { shouldCenter={false} > diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 15ee7b2183a..46732361c6d 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -35,6 +35,7 @@ import { MAX_FRONTS_BANNER_ADS as maxDesktopAds, MAX_FRONTS_MOBILE_ADS as maxMobileAds, } from '../lib/commercial-constants'; +import { shouldShowMobileAboveNavSlot } from '../lib/commercialMobileAboveNavTest'; import { getContributionsServiceUrl } from '../lib/contributions'; import { editionList } from '../lib/edition'; import { @@ -218,9 +219,11 @@ export const FrontLayout = ({ front, NAV }: Props) => { diff --git a/dotcom-rendering/src/lib/commercialMobileAboveNavTest.ts b/dotcom-rendering/src/lib/commercialMobileAboveNavTest.ts new file mode 100644 index 00000000000..7300140b9c3 --- /dev/null +++ b/dotcom-rendering/src/lib/commercialMobileAboveNavTest.ts @@ -0,0 +1,3 @@ +export const shouldShowMobileAboveNavSlot = (testGroup?: string): boolean => { + return testGroup === 'variant' || testGroup === 'variant2'; +};