feat(google-one-tap): Render Google One Tap on Tag Pages and Articles

Author: AshCorr

dotcom-rendering/src/components/ArticlePage.tsx

@@ -14,6 +14,7 @@ import { useConfig } from './ConfigContext';
 import { DarkModeMessage } from './DarkModeMessage';
 import { EnhanceAffiliateLinks } from './EnhanceAffiliateLinks.importable';
 import { FocusStyles } from './FocusStyles.importable';
+import { GoogleOneTap, isInGoogleOneTapTest } from './GoogleOneTap.importable';
 import { Island } from './Island';
 import { Lightbox } from './Lightbox';
 import { Metrics } from './Metrics.importable';
@@ -139,6 +140,14 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 							}
 						/>
 					</Island>
+					{isInGoogleOneTapTest(frontendData.config.abTests) && (
+						<Island
+							priority="enhancement"
+							defer={{ until: 'idle' }}
+						>
+							<GoogleOneTap />
+						</Island>
+					)}
 				</>
 			)}
 			{renderingTarget === 'Web' ? (

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

@@ -255,10 +255,8 @@ export const initializeFedCM = async ({
 	}
 };
 
-// TODO: GoogleOneTap is currently only used on the front page, but we do probably want to use it on other pages in the future.
 export const GoogleOneTap = () => {
 	// We don't care what consent we get, we just want to make sure Google One Tap is not shown above the consent banner.
-	// TODO: FedCM doesn't require cookies? Do we need to check consent?
 	const consent = useConsent();
 	const isSignedIn = useIsSignedIn();
 	const countryCode = useCountryCode('google-one-tap');

dotcom-rendering/src/components/TagPage.tsx

@@ -11,6 +11,7 @@ import { AlreadyVisited } from './AlreadyVisited.importable';
 import { useConfig } from './ConfigContext';
 import { DarkModeMessage } from './DarkModeMessage';
 import { FocusStyles } from './FocusStyles.importable';
+import { GoogleOneTap, isInGoogleOneTapTest } from './GoogleOneTap.importable';
 import { Island } from './Island';
 import { Metrics } from './Metrics.importable';
 import { SetABTests } from './SetABTests.importable';
@@ -82,6 +83,11 @@ export const TagPage = ({ tagPage, NAV }: Props) => {
 			<Island priority="critical">
 				<SetAdTargeting adTargeting={adTargeting} />
 			</Island>
+			{isInGoogleOneTapTest(tagPage.config.abTests) && (
+				<Island priority="enhancement" defer={{ until: 'idle' }}>
+					<GoogleOneTap />
+				</Island>
+			)}
 			{darkModeAvailable && (
 				<DarkModeMessage>
 					Dark mode is a work-in-progress.