feat: Add Ophan tracking

Author: AshCorr

dotcom-rendering/package.json

@@ -38,7 +38,7 @@
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "25.2.0",
-		"@guardian/ophan-tracker-js": "2.3.2",
+		"@guardian/ophan-tracker-js": "2.5.0",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "10.2.0",

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

@@ -1,4 +1,5 @@
 import { log } from '@guardian/libs';
+import { submitComponentEvent } from '../client/ophan/ophan';
 import { useIsSignedIn } from '../lib/useAuthStatus';
 import { useConsent } from '../lib/useConsent';
 import { useOnce } from '../lib/useOnce';
@@ -117,6 +118,19 @@ export const initializeFedCM = async ({
 	isSignedIn?: boolean;
 	isInTest?: boolean;
 }): Promise<void> => {
+	const isSupported = 'IdentityCredential' in window;
+
+	void submitComponentEvent(
+		{
+			action: 'DETECT',
+			component: {
+				componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+			},
+			value: isSupported ? 'SUPPORTED' : 'NOT_SUPPORTED',
+		},
+		'Web',
+	);
+
 	if (isSignedIn) return;
 
 	/**
@@ -128,8 +142,7 @@ export const initializeFedCM = async ({
 	 *
 	 * See: https://bugzilla.mozilla.org/show_bug.cgi?id=1803629
 	 */
-	if (!('IdentityCredential' in window)) {
-		// TODO: Track Ophan "FedCM" unsupported event here.
+	if (!isSupported) {
 		log('identity', 'FedCM API not supported in this browser');
 		return;
 	}
@@ -185,17 +198,34 @@ export const initializeFedCM = async ({
 		});
 
 	if (credentials) {
-		// TODO: Track Ophan "FedCM" success event here.
 		log('identity', 'FedCM credentials received', {
 			credentials,
 		});
 
+		await submitComponentEvent(
+			{
+				action: 'SIGN_IN',
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+			},
+			'Web',
+		);
+
 		submitGoogleOneTapToken(
 			getRedirectUrl({ stage, currentLocation: window.location.href }),
 			credentials.token,
 		);
 	} else {
-		// TODO: Track Ophan "FedCM" skip event here.
+		void submitComponentEvent(
+			{
+				action: 'CLOSE',
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+			},
+			'Web',
+		);
 		log('identity', 'No FedCM credentials received');
 	}
 };

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

@@ -1,5 +1,10 @@
+import { submitComponentEvent as submitComponentEventMock } from '../client/ophan/ophan';
 import { getRedirectUrl, initializeFedCM } from './GoogleOneTap.importable';
 
+jest.mock('../client/ophan/ophan', () => ({
+	submitComponentEvent: jest.fn(),
+}));
+
 const mockWindow = ({
 	get,
 	enableFedCM = true,
@@ -58,6 +63,10 @@ const mockWindow = ({
 };
 
 describe('GoogleOneTap', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
 	it('should return the correct signin URL after constructing it with the provided stage and token', () => {
 		expect(
 			getRedirectUrl({
@@ -99,6 +108,29 @@ describe('GoogleOneTap', () => {
 
 		await initializeFedCM({ isSignedIn: false });
 
+		expect(submitComponentEventMock).toHaveBeenNthCalledWith(
+			1,
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'DETECT',
+				value: 'SUPPORTED',
+			},
+			'Web',
+		);
+
+		expect(submitComponentEventMock).toHaveBeenNthCalledWith(
+			2,
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'SIGN_IN',
+			},
+			'Web',
+		);
+
 		expect(form.action).toBe(
 			'https://profile.theguardian.com/signin/google-one-tap?returnUrl=https%3A%2F%2Fwww.theguardian.com%2Fuk',
 		);
@@ -123,6 +155,29 @@ describe('GoogleOneTap', () => {
 
 		await initializeFedCM({ isSignedIn: false });
 
+		expect(submitComponentEventMock).toHaveBeenNthCalledWith(
+			1,
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'DETECT',
+				value: 'SUPPORTED',
+			},
+			'Web',
+		);
+
+		expect(submitComponentEventMock).toHaveBeenNthCalledWith(
+			2,
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'CLOSE',
+			},
+			'Web',
+		);
+
 		expect(navigatorGet).toHaveBeenCalledWith({
 			identity: {
 				context: 'continue',
@@ -155,6 +210,18 @@ describe('GoogleOneTap', () => {
 			'window.navigator.credentials.get failed',
 		);
 
+		expect(submitComponentEventMock).toHaveBeenNthCalledWith(
+			1,
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'DETECT',
+				value: 'SUPPORTED',
+			},
+			'Web',
+		);
+
 		expect(navigatorGet).toHaveBeenCalledWith({
 			identity: {
 				context: 'continue',
@@ -183,6 +250,18 @@ describe('GoogleOneTap', () => {
 
 		await initializeFedCM({ isSignedIn: false });
 
+		expect(submitComponentEventMock).toHaveBeenCalledTimes(1);
+		expect(submitComponentEventMock).toHaveBeenCalledWith(
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'DETECT',
+				value: 'NOT_SUPPORTED',
+			},
+			'Web',
+		);
+
 		expect(navigatorGet).not.toHaveBeenCalled();
 		expect(form.submit).not.toHaveBeenCalled();
 	});
@@ -196,18 +275,17 @@ describe('GoogleOneTap', () => {
 
 		await initializeFedCM({ isSignedIn: true });
 
-		expect(navigatorGet).not.toHaveBeenCalled();
-		expect(form.submit).not.toHaveBeenCalled();
-	});
-
-	it('should not initializeFedCM when user is not in test', async () => {
-		const navigatorGet = jest.fn();
-
-		const { form } = mockWindow({
-			get: navigatorGet,
-		});
-
-		await initializeFedCM({ isSignedIn: true });
+		expect(submitComponentEventMock).toHaveBeenCalledTimes(1);
+		expect(submitComponentEventMock).toHaveBeenCalledWith(
+			{
+				component: {
+					componentType: 'SIGN_IN_GOOGLE_ONE_TAP',
+				},
+				action: 'DETECT',
+				value: 'SUPPORTED',
+			},
+			'Web',
+		);
 
 		expect(navigatorGet).not.toHaveBeenCalled();
 		expect(form.submit).not.toHaveBeenCalled();