Add browserId in email submission form

Author: ioannakok

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

@@ -9,8 +9,9 @@ import {
 	bypassCoreWebVitalsSampling,
 	initCoreWebVitals,
 } from '@guardian/core-web-vitals';
-import { getCookie, isString, isUndefined } from '@guardian/libs';
+import { isUndefined } from '@guardian/libs';
 import { useCallback, useEffect, useState } from 'react';
+import { useBrowserId } from '../lib/metrics';
 import { useAB, useBetaAB } from '../lib/useAB';
 import { useAdBlockInUse } from '../lib/useAdBlockInUse';
 import { useDetectAdBlock } from '../lib/useDetectAdBlock';
@@ -41,20 +42,6 @@ const shouldCollectMetricsForBetaTests = (userTestParticipations: string[]) => {
 	);
 };
 
-const useBrowserId = () => {
-	const [browserId, setBrowserId] = useState<string>();
-
-	useEffect(() => {
-		const cookie = getCookie({ name: 'bwid', shouldMemoize: true });
-
-		const id = isString(cookie) ? cookie : 'no-browser-id-available';
-
-		setBrowserId(id);
-	}, []);
-
-	return browserId;
-};
-
 const useDev = () => {
 	const [isDev, setIsDev] = useState<boolean>();
 

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

@@ -21,6 +21,7 @@ import { useEffect, useRef, useState } from 'react';
 import ReactGoogleRecaptcha from 'react-google-recaptcha';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { lazyFetchEmailWithTimeout } from '../lib/fetchEmail';
+import { useBrowserId } from '../lib/metrics';
 import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
 import { useAuthStatus, useIsSignedIn } from '../lib/useAuthStatus';
 import { palette } from '../palette';
@@ -136,6 +137,7 @@ const buildFormData = (
 	newsletterId: string,
 	token: string,
 	marketingOptIn?: boolean,
+	browserId?: string,
 ): FormData => {
 	const pageRef = window.location.origin + window.location.pathname;
 	const refViewId = window.guardian.ophan?.pageViewId ?? '';
@@ -155,6 +157,10 @@ const buildFormData = (
 		formData.append('marketing', marketingOptIn ? 'true' : 'false');
 	}
 
+	if (browserId !== undefined) {
+		formData.append('browserId', browserId);
+	}
+
 	return formData;
 };
 
@@ -304,6 +310,7 @@ export const SecureSignup = ({
 		});
 	}, []);
 	const { renderingTarget } = useConfig();
+	const browserId = useBrowserId();
 
 	const hasResponse = typeof responseOk === 'boolean';
 
@@ -319,6 +326,7 @@ export const SecureSignup = ({
 			newsletterId,
 			token,
 			marketingOptIn,
+			browserId,
 		);
 
 		const response = await postFormData(

dotcom-rendering/src/lib/metrics.ts

@@ -0,0 +1,16 @@
+import { getCookie, isString } from '@guardian/libs';
+import { useEffect, useState } from 'react';
+
+export const useBrowserId = (): string | undefined => {
+	const [browserId, setBrowserId] = useState<string>();
+
+	useEffect(() => {
+		const cookie = getCookie({ name: 'bwid', shouldMemoize: true });
+
+		const id = isString(cookie) ? cookie : 'no-browser-id-available';
+
+		setBrowserId(id);
+	}, []);
+
+	return browserId;
+};