Persist landing page test tracking

support-frontend/assets/helpers/abTests/__tests__/abtestTest.ts

@@ -51,6 +51,7 @@ describe('init', () => {
 
 	afterEach(() => {
 		window.localStorage.clear();
+		window.sessionStorage.clear();
 	});
 
 	it('assigns a user to a variant', () => {
@@ -400,6 +401,88 @@ describe('init', () => {
 			expect(participations).toEqual({ t1: 'variant' });
 		});
 	});
+
+	describe('path matching', () => {
+		beforeEach(() => {
+			window.sessionStorage.clear();
+		});
+
+		it('does not assign to test if targetPage does not match', () => {
+			const abTests = {
+				t1: buildTest({
+					targetPage: '/us/contribute$',
+				}),
+			};
+
+			const participations: Participations = abInit({
+				...abtestInitalizerData,
+				abTests,
+				path: '/uk/contribute',
+			});
+
+			expect(participations).toEqual({});
+		});
+
+		it('assign to test if targetPage matches', () => {
+			const abTests = {
+				t1: buildTest({
+					targetPage: '/uk/contribute$',
+				}),
+			};
+
+			const participations: Participations = abInit({
+				...abtestInitalizerData,
+				abTests,
+				path: '/uk/contribute',
+			});
+
+			expect(participations).toEqual({ t1: 'control' });
+		});
+
+		it('assign to test if persistPage matches and test is in session storage', () => {
+			window.sessionStorage.setItem(
+				'abParticipations',
+				JSON.stringify({ t1: 'control' }),
+			);
+
+			const abTests = {
+				t1: buildTest({
+					targetPage: '/uk/contribute$',
+					persistPage: '/uk/checkout$',
+				}),
+			};
+
+			const participations: Participations = abInit({
+				...abtestInitalizerData,
+				abTests,
+				path: '/uk/checkout',
+			});
+
+			expect(participations).toEqual({ t1: 'control' });
+		});
+
+		it('does not assign to test if persistPage does not match and test is in session storage', () => {
+			window.sessionStorage.setItem(
+				'abParticipations',
+				JSON.stringify({ t1: 'control' }),
+			);
+
+			const abTests = {
+				t1: buildTest({
+					targetPage: '/uk/contribute$',
+					persistPage: '/uk/checkout$',
+				}),
+			};
+
+			const participations: Participations = abInit({
+				...abtestInitalizerData,
+				abTests,
+				path: '/uk/blah',
+			});
+
+			expect(participations).toEqual({});
+		});
+	});
 });
 
 it('targetPage matching', () => {
@@ -805,6 +888,8 @@ function buildTest({
 	seed = 0,
 	excludeIfInReferrerControlledTest = false,
 	excludeCountriesSubjectToContributionsOnlyAmounts = true,
+	targetPage = undefined,
+	persistPage = undefined,
 }: Partial<Test>): Test {
 	return {
 		variants,
@@ -814,6 +899,8 @@ function buildTest({
 		seed,
 		excludeIfInReferrerControlledTest,
 		excludeCountriesSubjectToContributionsOnlyAmounts,
+		targetPage,
+		persistPage,
 	};
 }
 

support-frontend/assets/helpers/abTests/abtest.ts

@@ -8,6 +8,7 @@ import type { Settings } from 'helpers/globalsAndSwitches/settings';
 import type { IsoCountry } from 'helpers/internationalisation/country';
 import type { CountryGroupId } from 'helpers/internationalisation/countryGroup';
 import * as cookie from 'helpers/storage/cookie';
+import * as storage from 'helpers/storage/storage';
 import { getQueryParameter } from 'helpers/urls/url';
 import type {
 	AmountsTest,
@@ -81,6 +82,8 @@ export type Test = {
 	// An optional regex that will be tested against the path of the current page
 	// before activating this test eg. '/(uk|us|au|ca|nz)/subscribe$'
 	targetPage?: string | RegExp;
+	// Persist this test participation across more pages using this regex
+	persistPage?: string | RegExp;
 	omitCountries?: IsoCountry[];
 	// Some users will see a version of the checkout that only offers
 	// the option to make contributions. We won't want to include these
@@ -99,6 +102,7 @@ type ABtestInitalizerData = {
 	abTests?: Tests;
 	mvt?: number;
 	acquisitionDataTests?: AcquisitionABTest[];
+	path?: string;
 };
 
 function init({
@@ -108,15 +112,20 @@ function init({
 	abTests = tests,
 	mvt = getMvtId(),
 	acquisitionDataTests = getTestFromAcquisitionData() ?? [],
+	path = window.location.pathname,
 }: ABtestInitalizerData): Participations {
+	const sessionParticipations = getParticipationsFromSession();
 	const participations = getParticipations(
 		abTests,
 		mvt,
 		countryId,
 		countryGroupId,
+		path,
 		acquisitionDataTests,
 		selectedAmountsVariant,
+		sessionParticipations,
 	);
+
 	const urlParticipations = getParticipationsFromUrl();
 	const serverSideParticipations = getServerSideParticipations();
 	return {
@@ -154,8 +163,10 @@ function getParticipations(
 	mvtId: number,
 	country: IsoCountry,
 	countryGroupId: CountryGroupId,
+	path: string,
 	acquisitionDataTests?: AcquisitionABTest[],
 	selectedAmountsVariant?: SelectedAmountsVariant,
+	sessionParticipations: Participations = {},
 ): Participations {
 	const participations: Participations = {};
 
@@ -172,7 +183,16 @@ function getParticipations(
 			return;
 		}
 
-		if (!targetPageMatches(window.location.pathname, test.targetPage)) {
+		// Is the user already in this test in the current browser session?
+		if (
+			!!sessionParticipations[testId] &&
+			targetPageMatches(path, test.persistPage)
+		) {
+			participations[testId] = sessionParticipations[testId];
+			return;
+		}
+
+		if (!targetPageMatches(path, test.targetPage)) {
 			return;
 		}
 
@@ -237,6 +257,22 @@ function getParticipationsFromUrl(): Participations | undefined {
 	return;
 }
 
+function getParticipationsFromSession(): Participations | undefined {
+	const participations = storage.getSession('abParticipations');
+	if (participations) {
+		try {
+			return JSON.parse(participations) as Participations;
+		} catch (error) {
+			console.error(
+				'Failed to parse abParticipations from session storage',
+				error,
+			);
+			return undefined;
+		}
+	}
+	return undefined;
+}
+
 function getServerSideParticipations(): Participations | null | undefined {
 	if (window.guardian.serversideTests) {
 		return window.guardian.serversideTests;

support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx

@@ -47,6 +47,7 @@ import {
 import type { BillingPeriod } from 'helpers/productPrice/billingPeriods';
 import type { Promotion } from 'helpers/productPrice/promotions';
 import { getPromotion } from 'helpers/productPrice/promotions';
+import * as storage from 'helpers/storage/storage';
 import type { GeoId } from 'pages/geoIdConfig';
 import { getGeoIdConfig } from 'pages/geoIdConfig';
 import { getCampaignSettings } from '../../../helpers/campaigns/campaigns';
@@ -285,6 +286,8 @@ export function ThreeTierLanding({
 	};
 
 	const abParticipations = abTestInit({ countryId, countryGroupId });
+	// Persist any tests for tracking in the checkout page
+	storage.setSession('abParticipations', JSON.stringify(abParticipations));
 
 	const campaignSettings = getCampaignSettings(countryGroupId);