add variant 2 for mobile above nav test. without the RR StickyBottomBanner (#16721)

Author: oliverabrahams

ab-testing/config/abTests.ts

@@ -297,7 +297,7 @@ const ABTests: ABTest[] = [
 		status: "ON",
 		audienceSize: 0 / 100,
 		audienceSpace: "B",
-		groups: ["control", "variant"],
+		groups: ["control", "variant", "variant2"],
 		shouldForceMetricsCollection: true,
 	},
 	{

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<ModuleData<BannerProps>> => {
 		return {
 			candidate: {
@@ -182,6 +184,7 @@ const buildRRBannerConfigWith = ({
 						pageId,
 						inHoldbackGroup,
 						inAuxiaVariant,
+						inNoShowMobileAboveNavVariant,
 					}),
 				show: ({ name, props }: ModuleData<BannerProps>) => (
 					<BannerComponent name={name} props={props} />
@@ -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,

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<T> = (
 	props: CanShowProps,
 ) => Promise<CanShowResult<T>>;
 
+// 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 };
 	}

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}
 							>
 								<HeaderAdSlot
-									includeMobile={
+									includeMobile={shouldShowMobileAboveNavSlot(
 										article.config.serverSideABTests[
 											'commercial-mobile-above-nav-test'
-										] === 'variant'
-									}
+										],
+									)}
 								/>
 							</Section>
 						</div>

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) => {
 							<HeaderAdSlot
 								includeMobile={
 									front.config.section === 'crosswords' &&
-									front.config.serverSideABTests[
-										'commercial-mobile-above-nav-test'
-									] === 'variant'
+									shouldShowMobileAboveNavSlot(
+										front.config.serverSideABTests[
+											'commercial-mobile-above-nav-test'
+										],
+									)
 								}
 							/>
 						</Section>

dotcom-rendering/src/lib/commercialMobileAboveNavTest.ts

@@ -0,0 +1,3 @@
+export const shouldShowMobileAboveNavSlot = (testGroup?: string): boolean => {
+	return testGroup === 'variant' || testGroup === 'variant2';
+};