Sign-in gate: emit events for ad slots

Author: tomrf1

dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx

@@ -272,13 +272,14 @@ export const auxiaV2DismissibleModal = () => {
 				host="https://www.theguardian.com"
 				idUrl="https://profile.theguardian.com"
 				contributionsServiceUrl="https://contributions.guardianapis.com"
-				signInGateVersion="v2"
 				auxiaGateDisplayData={{
 					browserId: 'test-browser-id',
 					auxiaData: {
 						responseId: 'test-response-id',
-						userTreatment:
-							mockAuxiaResponseDismissible.data.userTreatment,
+						userTreatment: {
+							...mockAuxiaResponseDismissible.data.userTreatment,
+							treatmentType: 'DISMISSABLE_SIGN_IN_GATE_POPUP',
+						},
 					},
 				}}
 			/>
@@ -298,13 +299,15 @@ export const auxiaV2NonDismissibleModal = () => {
 				host="https://www.theguardian.com"
 				idUrl="https://profile.theguardian.com"
 				contributionsServiceUrl="https://contributions.guardianapis.com"
-				signInGateVersion="v2"
 				auxiaGateDisplayData={{
 					browserId: 'test-browser-id',
 					auxiaData: {
 						responseId: 'test-response-id',
-						userTreatment:
-							mockAuxiaResponseNonDismissible.data.userTreatment,
+						userTreatment: {
+							...mockAuxiaResponseNonDismissible.data
+								.userTreatment,
+							treatmentType: 'NONDISMISSIBLE_SIGN_IN_GATE_POPUP',
+						},
 					},
 				}}
 			/>

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

@@ -251,4 +251,5 @@ export type SignInGatePropsAuxia = {
 	) => Promise<void>;
 };
 
+// v1 is in the article, v2 is a popup
 export type AuxiaGateVersion = 'v1' | 'v2';

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

@@ -33,7 +33,6 @@ type Props = {
 	idUrl?: string;
 	contributionsServiceUrl: string;
 	auxiaGateDisplayData?: AuxiaGateDisplayData | undefined;
-	signInGateVersion?: AuxiaGateVersion;
 };
 
 // function to generate the profile.theguardian.com url with tracking params
@@ -87,12 +86,15 @@ export const SignInGateSelector = ({
 	idUrl = 'https://profile.theguardian.com',
 	contributionsServiceUrl,
 	auxiaGateDisplayData,
-	signInGateVersion,
 }: Props) => {
 	if (!pageIdIsAllowedForGating(pageId)) {
 		return <></>;
 	}
 
+	const signInGateVersion = getAuxiaGateVersion(
+		auxiaGateDisplayData?.auxiaData.userTreatment,
+	);
+
 	return (
 		<SignInGateSelectorAuxia
 			host={host}
@@ -138,7 +140,7 @@ type PropsAuxia = {
 	isPreview: boolean;
 	isPaidContent: boolean;
 	auxiaGateDisplayData?: AuxiaGateDisplayData;
-	signInGateVersion?: AuxiaGateVersion;
+	signInGateVersion: AuxiaGateVersion;
 };
 
 // [1] If true, it indicates that we are using the component for the regular Auxia share of the Audience
@@ -158,7 +160,7 @@ interface ShowSignInGateAuxiaProps {
 		interactionType: AuxiaInteractionInteractionType,
 		actionName?: AuxiaInteractionActionName,
 	) => Promise<void>;
-	signInGateVersion?: AuxiaGateVersion;
+	signInGateVersion: AuxiaGateVersion;
 }
 
 const incrementGateDisplayCount = () => {
@@ -243,22 +245,21 @@ const buildAbTestTrackingAuxiaVariant = (
 	};
 };
 
+/**
+ * Determines the gate version based on one of 2 things:
+ * 1. url query parameter
+ * 2. treatmentType
+ */
 export const getAuxiaGateVersion = (
-	signInGateVersion?: AuxiaGateVersion,
 	userTreatment?: AuxiaAPIResponseDataUserTreatment,
 ): AuxiaGateVersion => {
-	if (signInGateVersion) {
-		return signInGateVersion;
-	}
-
 	const params = new URLSearchParams(window.location.search);
 	const version = params.get('auxia_gate_version');
 
 	if (
 		String(version).toLowerCase().endsWith('v2') ||
-		String(userTreatment?.treatmentType)
-			.toLowerCase()
-			.endsWith('POPUP')
+		userTreatment?.treatmentType === 'DISMISSABLE_SIGN_IN_GATE_POPUP' ||
+		userTreatment?.treatmentType === 'NONDISMISSIBLE_SIGN_IN_GATE_POPUP'
 	) {
 		return 'v2';
 	}
@@ -300,6 +301,13 @@ const SignInGateSelectorAuxia = ({
 			document.dispatchEvent(
 				new CustomEvent('article:sign-in-gate-dismissed'),
 			);
+
+			// Emit event for use by ad slots
+			document.dispatchEvent(
+				new CustomEvent(
+					`article:sign-in-gate-${signInGateVersion}-dismissed`,
+				),
+			);
 		}
 	}, [isGateDismissed]);
 
@@ -397,7 +405,7 @@ const ShowSignInGateAuxia = ({
 	const personaliseSignInGateAfterCheckoutSwitch = undefined;
 
 	// Get the gate version configuration
-	const gateVersion = getAuxiaGateVersion(signInGateVersion, userTreatment);
+	// const gateVersion = getAuxiaGateVersion(signInGateVersion, userTreatment);
 
 	const [signInGatePlaceholder, setSignInGatePlaceholder] =
 		useState<HTMLElement | null>(null);
@@ -417,6 +425,7 @@ const ShowSignInGateAuxia = ({
 
 	useEffect(() => {
 		if (hasBeenSeen) {
+			// Tell Auxia
 			void auxiaLogTreatmentInteraction(
 				contributionsServiceUrl,
 				userTreatment,
@@ -436,6 +445,7 @@ const ShowSignInGateAuxia = ({
 				);
 			});
 
+			// Tell Ophan
 			void submitComponentEventTracking(
 				{
 					component: {
@@ -451,6 +461,13 @@ const ShowSignInGateAuxia = ({
 			// Once the gate is being displayed we need to update
 			// the tracking of the number of times the gate has been displayed
 			incrementGateDisplayCount();
+
+			// Emit event for use by ad slots
+			document.dispatchEvent(
+				new CustomEvent(
+					`article:sign-in-gate-${signInGateVersion}-viewed`,
+				),
+			);
 		}
 	}, [
 		componentId,
@@ -460,7 +477,7 @@ const ShowSignInGateAuxia = ({
 		renderingTarget,
 		treatmentId,
 		userTreatment,
-		gateVersion,
+		signInGateVersion,
 	]);
 
 	const commonProps = {
@@ -498,7 +515,7 @@ const ShowSignInGateAuxia = ({
 				aria-hidden="true"
 				style={{ height: 1, marginTop: -1 }}
 			/>
-			{gateVersion === 'v2' ? (
+			{signInGateVersion === 'v2' ? (
 				shouldShowV2Gate && <SignInGateAuxiaV2 {...commonProps} />
 			) : (
 				<SignInGateAuxiaV1 {...commonProps} />

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

@@ -35,7 +35,7 @@ export const SignInGatePortal = ({
 	pageId: string;
 	contributionsServiceUrl: string;
 	idUrl: string;
-	auxiaGateDisplayData?: AuxiaGateDisplayData | undefined;
+	auxiaGateDisplayData: AuxiaGateDisplayData;
 }) => {
 	const [shouldShowGate, setShouldShowGate] = useState<boolean>(false);
 	const [targetElement, setTargetElement] = useState<HTMLElement | null>(
@@ -61,8 +61,7 @@ export const SignInGatePortal = ({
 	useEffect(() => {
 		const element = document.getElementById('sign-in-gate');
 		const gateVersion = getAuxiaGateVersion(
-			undefined,
-			auxiaGateDisplayData?.auxiaData.userTreatment,
+			auxiaGateDisplayData.auxiaData.userTreatment,
 		);
 
 		/**