diff --git a/dotcom-rendering/src/components/Metrics.importable.tsx b/dotcom-rendering/src/components/Metrics.importable.tsx index d4961c2b6e7..a0c7fd79c26 100644 --- a/dotcom-rendering/src/components/Metrics.importable.tsx +++ b/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(); - - 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(); diff --git a/dotcom-rendering/src/components/SecureSignup.importable.tsx b/dotcom-rendering/src/components/SecureSignup.importable.tsx index 556c7cd502c..39a07e69516 100644 --- a/dotcom-rendering/src/components/SecureSignup.importable.tsx +++ b/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( diff --git a/dotcom-rendering/src/lib/metrics.ts b/dotcom-rendering/src/lib/metrics.ts new file mode 100644 index 00000000000..88f1ef8e8d6 --- /dev/null +++ b/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(); + + useEffect(() => { + const cookie = getCookie({ name: 'bwid', shouldMemoize: true }); + + const id = isString(cookie) ? cookie : 'no-browser-id-available'; + + setBrowserId(id); + }, []); + + return browserId; +};