Auxia control group

Author: tomrf1

dotcom-rendering/src/components/SignInGate/types.ts

@@ -137,6 +137,7 @@ export interface AuxiaProxyGetTreatmentsPayload {
 	showDefaultGate: ShowGateValues; // [3]
 	gateDisplayCount: number;
 	hideSupportMessagingTimestamp: number | undefined; // [4]
+	isInAuxiaControlGroup: boolean;
 }
 
 // [1]

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

@@ -9,13 +9,13 @@ import type { BannerProps } from '@guardian/support-dotcom-components/dist/share
 import { useEffect, useState } from 'react';
 import type { ArticleCounts } from '../lib/articleCount';
 import { getArticleCounts } from '../lib/articleCount';
-import type { EditionId } from '../lib/edition';
 import type {
 	CandidateConfig,
 	MaybeFC,
 	SlotConfig,
 } from '../lib/messagePicker';
 import { pickMessage } from '../lib/messagePicker';
+import { useAB } from '../lib/useAB';
 import { useIsSignedIn } from '../lib/useAuthStatus';
 import { useBraze } from '../lib/useBraze';
 import { useCountryCode } from '../lib/useCountryCode';
@@ -33,6 +33,7 @@ import {
 	ReaderRevenueBanner,
 } from './StickyBottomBanner/ReaderRevenueBanner';
 import type { CanShowFunctionType } from './StickyBottomBanner/ReaderRevenueBanner';
+import type { CanShowSignInGateProps } from './StickyBottomBanner/SignInGatePortal';
 import {
 	canShowSignInGatePortal,
 	SignInGatePortal,
@@ -179,39 +180,21 @@ const buildRRBannerConfigWith = ({
 };
 
 const buildSignInGateConfig = (
-	isSignedIn: boolean | undefined,
-	isPaidContent: boolean,
-	isPreview: boolean,
-	contentType: string,
-	sectionId: string,
-	tags: TagType[],
-	pageId: string,
-	contributionsServiceUrl: string,
-	editionId: EditionId,
+	canShowProps: CanShowSignInGateProps,
 	host?: string,
 ): CandidateConfig<AuxiaGateDisplayData> => ({
 	candidate: {
 		id: 'sign-in-gate-portal',
 		canShow: async () => {
-			return await canShowSignInGatePortal(
-				isSignedIn,
-				isPaidContent,
-				isPreview,
-				pageId,
-				contributionsServiceUrl,
-				editionId,
-				contentType,
-				sectionId,
-				tags,
-			);
+			return await canShowSignInGatePortal(canShowProps);
 		},
 		show: (meta: AuxiaGateDisplayData) => () => (
 			<SignInGatePortal
 				host={host}
-				isPaidContent={isPaidContent}
-				isPreview={isPreview}
-				pageId={pageId}
-				contributionsServiceUrl={contributionsServiceUrl}
+				isPaidContent={canShowProps.isPaidContent}
+				isPreview={canShowProps.isPreview}
+				pageId={canShowProps.pageId}
+				contributionsServiceUrl={canShowProps.contributionsServiceUrl}
 				auxiaGateDisplayData={meta}
 			/>
 		),
@@ -285,6 +268,11 @@ export const StickyBottomBanner = ({
 	const countryCode = useCountryCode('sticky-bottom-banner');
 	const isSignedIn = useIsSignedIn();
 	const ophanPageViewId = usePageViewId(renderingTarget);
+	const abTestAPI = useAB()?.api;
+	const isInAuxiaControlGroup = !!abTestAPI?.isUserInVariant(
+		'NoAuxiaSignInGate',
+		'control',
+	);
 
 	const [SelectedBanner, setSelectedBanner] = useState<MaybeFC | null>(null);
 	const [asyncArticleCounts, setAsyncArticleCounts] =
@@ -340,15 +328,18 @@ export const StickyBottomBanner = ({
 		);
 
 		const signInGate = buildSignInGateConfig(
-			isSignedIn,
-			isPaidContent,
-			isPreview,
-			contentType,
-			sectionId,
-			tags,
-			pageId,
-			contributionsServiceUrl,
-			editionId,
+			{
+				isSignedIn,
+				isPaidContent,
+				isPreview,
+				contentType,
+				sectionId,
+				tags,
+				pageId,
+				contributionsServiceUrl,
+				editionId,
+				isInAuxiaControlGroup,
+			},
 			host,
 		);
 
@@ -392,6 +383,7 @@ export const StickyBottomBanner = ({
 		ophanPageViewId,
 		pageId,
 		host,
+		isInAuxiaControlGroup,
 	]);
 
 	if (SelectedBanner) {

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.test.tsx

@@ -2,6 +2,7 @@
 // under test is evaluated.
 import { buildAuxiaGateDisplayData } from '../../lib/auxia';
 import type { AuxiaGateDisplayData } from '../SignInGate/types';
+import type { CanShowSignInGateProps } from './SignInGatePortal';
 import { canShowSignInGatePortal } from './SignInGatePortal';
 
 // Mock the auxia module (Jest hoists jest.mock calls so placing it after imports is fine).
@@ -15,6 +16,19 @@ Object.defineProperty(document, 'getElementById', {
 	value: mockGetElementById,
 });
 
+const canShowProps: CanShowSignInGateProps = {
+	isSignedIn: false,
+	isPaidContent: false,
+	isPreview: false,
+	pageId: 'page-id',
+	contributionsServiceUrl: 'https://contributions.local',
+	isInAuxiaControlGroup: false,
+	editionId: 'UK',
+	contentType: 'Article',
+	sectionId: 'section',
+	tags: [],
+};
+
 describe('SignInGatePortal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -24,7 +38,7 @@ describe('SignInGatePortal', () => {
 		it('should return false when sign-in gate placeholder does not exist', async () => {
 			mockGetElementById.mockReturnValue(null);
 
-			const result = await canShowSignInGatePortal(false, false, false);
+			const result = await canShowSignInGatePortal(canShowProps);
 
 			expect(result).toEqual({ show: false });
 			expect(mockGetElementById).toHaveBeenCalledWith('sign-in-gate');
@@ -34,7 +48,10 @@ describe('SignInGatePortal', () => {
 			const mockElement = document.createElement('div');
 			mockGetElementById.mockReturnValue(mockElement);
 
-			const result = await canShowSignInGatePortal(true, false, false);
+			const result = await canShowSignInGatePortal({
+				...canShowProps,
+				isSignedIn: true,
+			});
 
 			expect(result).toEqual({ show: false });
 		});
@@ -43,7 +60,10 @@ describe('SignInGatePortal', () => {
 			const mockElement = document.createElement('div');
 			mockGetElementById.mockReturnValue(mockElement);
 
-			const result = await canShowSignInGatePortal(false, true, false);
+			const result = await canShowSignInGatePortal({
+				...canShowProps,
+				isPaidContent: true,
+			});
 
 			expect(result).toEqual({ show: false });
 		});
@@ -52,7 +72,10 @@ describe('SignInGatePortal', () => {
 			const mockElement = document.createElement('div');
 			mockGetElementById.mockReturnValue(mockElement);
 
-			const result = await canShowSignInGatePortal(false, false, true);
+			const result = await canShowSignInGatePortal({
+				...canShowProps,
+				isPreview: true,
+			});
 
 			expect(result).toEqual({ show: false });
 		});
@@ -83,17 +106,7 @@ describe('SignInGatePortal', () => {
 				>
 			).mockResolvedValue(auxiaReturn);
 
-			const result = await canShowSignInGatePortal(
-				false, // isSignedIn
-				false, // isPaidContent
-				false, // isPreview
-				'page-id', // pageId
-				'https://contributions.local', // contributionsServiceUrl
-				'UK', // editionId
-				'Article', // contentType (must be a valid content type)
-				'section', // sectionId
-				[], // tags
-			);
+			const result = await canShowSignInGatePortal(canShowProps);
 
 			expect(result).toEqual({ show: true, meta: auxiaReturn });
 		});
@@ -123,17 +136,10 @@ describe('SignInGatePortal', () => {
 				>
 			).mockResolvedValue(auxiaReturn);
 
-			const result = await canShowSignInGatePortal(
-				undefined,
-				false,
-				false,
-				'page-id',
-				'https://contributions.local',
-				'UK',
-				'Article',
-				'section',
-				[],
-			);
+			const result = await canShowSignInGatePortal({
+				...canShowProps,
+				isSignedIn: undefined,
+			});
 
 			expect(result).toEqual({ show: true, meta: auxiaReturn });
 		});

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx

@@ -140,17 +140,30 @@ export const SignInGatePortal = ({
  * This replicates the logic from SignInGateSelector but is adapted
  * for use within the message picker system.
  */
-export const canShowSignInGatePortal = async (
-	isSignedIn: boolean | undefined,
-	isPaidContent: boolean,
-	isPreview: boolean,
-	pageId?: string,
-	contributionsServiceUrl?: string,
-	editionId?: EditionId,
-	contentType?: string,
-	sectionId?: string,
-	tags?: TagType[],
-): Promise<CanShowResult<AuxiaGateDisplayData>> => {
+export interface CanShowSignInGateProps {
+	isSignedIn: boolean | undefined;
+	isPaidContent: boolean;
+	isPreview: boolean;
+	pageId: string;
+	contributionsServiceUrl: string;
+	isInAuxiaControlGroup: boolean;
+	editionId?: EditionId;
+	contentType?: string;
+	sectionId?: string;
+	tags?: TagType[];
+}
+export const canShowSignInGatePortal = async ({
+	isSignedIn,
+	isPaidContent,
+	isPreview,
+	pageId,
+	contributionsServiceUrl,
+	isInAuxiaControlGroup,
+	editionId,
+	contentType,
+	sectionId,
+	tags,
+}: CanShowSignInGateProps): Promise<CanShowResult<AuxiaGateDisplayData>> => {
 	// Check if the sign-in gate placeholder exists in the DOM
 	const targetElement = document.getElementById('sign-in-gate');
 
@@ -185,6 +198,7 @@ export const canShowSignInGatePortal = async (
 			sectionId,
 			tags,
 			retrieveLastGateDismissedCount('AuxiaSignInGate'),
+			isInAuxiaControlGroup,
 		);
 
 		return {

dotcom-rendering/src/experiments/ab-tests.ts

@@ -1,6 +1,7 @@
 import type { ABTest } from '@guardian/ab-core';
 import { abTestTest } from './tests/ab-test-test';
 import { auxiaSignInGate } from './tests/auxia-sign-in-gate';
+import { noAuxiaSignInGate } from './tests/no-auxia-sign-in-gate';
 import { signInGateMainControl } from './tests/sign-in-gate-main-control';
 import { signInGateMainVariant } from './tests/sign-in-gate-main-variant';
 import { userBenefitsApi } from './tests/user-benefits-api';
@@ -13,4 +14,5 @@ export const tests: ABTest[] = [
 	signInGateMainControl,
 	userBenefitsApi,
 	auxiaSignInGate,
+	noAuxiaSignInGate,
 ];

dotcom-rendering/src/experiments/tests/no-auxia-sign-in-gate.ts

@@ -0,0 +1,32 @@
+import type { ABTest } from '@guardian/ab-core';
+
+/**
+ * The requirement:
+ * 1. keep a fixed 5% of the global audience excluded from Auxia (though they can still see gates)
+ * 2. track participation of this 5% in the pageview table, regardless of whether they see gates
+ *
+ * The solution:
+ * - On every article view, put 5% of the audience into a special NoAuxiaSignInGate AB test. This means the page tracks membership of the "test" through ophan. There are no variants in this test, it's just a way to track these browsers.
+ * - The API call for the sign-in gate includes a flag indicating that the browser is in the NoAuxiaSignInGate test, and it excludes them from Auxia based on this.
+ *
+ * This enables us to query the pageview table for browsers in the NoAuxiaSignInGate group using the existing ab_test_array field.
+ */
+export const noAuxiaSignInGate: ABTest = {
+	id: 'NoAuxiaSignInGate',
+	start: '2025-11-01',
+	expiry: '2027-11-01',
+	author: 'Growth Team',
+	description:
+		'Defines a control group who should not have sign-in gate journeys handled by Auxia',
+	audience: 0.05,
+	audienceOffset: 0,
+	audienceCriteria: 'All users',
+	successMeasure: 'Control group for Auxia sign-in gate testing',
+	canRun: () => true,
+	variants: [
+		{
+			id: 'control',
+			test: (): void => {},
+		},
+	],
+};

dotcom-rendering/src/lib/auxia.ts

@@ -78,6 +78,7 @@ const fetchProxyGetTreatments = async (
 	showDefaultGate: ShowGateValues,
 	gateDisplayCount: number,
 	hideSupportMessagingTimestamp: number | undefined,
+	isInAuxiaControlGroup: boolean,
 ): Promise<AuxiaProxyGetTreatmentsResponse> => {
 	const articleIdentifier = `www.theguardian.com/${pageId}`;
 	const url = `${contributionsServiceUrl}/auxia/get-treatments`;
@@ -100,6 +101,7 @@ const fetchProxyGetTreatments = async (
 		showDefaultGate,
 		gateDisplayCount,
 		hideSupportMessagingTimestamp,
+		isInAuxiaControlGroup,
 	};
 
 	const params = { method: 'POST', headers, body: JSON.stringify(payload) };
@@ -168,6 +170,7 @@ export const buildAuxiaGateDisplayData = async (
 	sectionId: string,
 	tags: TagType[],
 	gateDismissCount: number,
+	isInAuxiaControlGroup: boolean,
 ): Promise<AuxiaGateDisplayData | undefined> => {
 	const readerPersonalData = await decideAuxiaProxyReaderPersonalData();
 	const tagIds = tags.map((tag) => tag.id);
@@ -195,6 +198,7 @@ export const buildAuxiaGateDisplayData = async (
 		showDefaultGate,
 		gateDisplayCount,
 		hideSupportMessagingTimestamp,
+		isInAuxiaControlGroup,
 	);
 
 	if (response.status && response.data) {