diff --git a/packages/fxa-payments-server/src/lib/hooks.test.tsx b/packages/fxa-payments-server/src/lib/hooks.test.tsx index 1a85c01f1e..b99d1d8a99 100644 --- a/packages/fxa-payments-server/src/lib/hooks.test.tsx +++ b/packages/fxa-payments-server/src/lib/hooks.test.tsx @@ -27,6 +27,7 @@ import { CUSTOMER, IAP_CUSTOMER, SELECTED_PLAN, + PROFILE, } from './mock-data'; // eslint-disable-next-line import/first @@ -118,11 +119,13 @@ describe('useReactGA4Setup', () => { const Subject = ({ config, productId, + optedIn = true, }: { config: Config; productId: string; + optedIn?: boolean; }) => { - useReactGA4Setup(config, productId); + useReactGA4Setup(config, productId, optedIn); // Should always render return
Render success
; }; @@ -198,6 +201,24 @@ describe('useReactGA4Setup', () => { consoleError.mockRestore(); }); + it('does not initialize ReactGA4 - customer is opted out of data collection and use', () => { + const config = mockConfig; + const profile = { + ...PROFILE, + metricsEnabled: false, + }; + const { queryByTestId } = renderWithLocalizationProvider( + + ); + + expect(ReactGA.initialize).not.toBeCalled(); + expect(queryByTestId('success')?.textContent).toEqual('Render success'); + }); + it('successfully initialize ReactGA4', () => { const config = mockConfig; const { queryByTestId } = renderWithLocalizationProvider( diff --git a/packages/fxa-payments-server/src/lib/hooks.tsx b/packages/fxa-payments-server/src/lib/hooks.tsx index b1787fa2a0..8ec276e802 100644 --- a/packages/fxa-payments-server/src/lib/hooks.tsx +++ b/packages/fxa-payments-server/src/lib/hooks.tsx @@ -116,16 +116,20 @@ export function usePaypalButtonSetup( }, [config, setPaypalScriptLoaded, paypalButtonBase]); } -export function useReactGA4Setup(config: Config, productId: string) { +export function useReactGA4Setup( + config: Config, + productId: string, + optedIn: boolean = true +) { const { enabled, measurementId, supportedProductIds, debugMode } = config.googleAnalytics; useEffect(() => { - // Check if GA is enabled and if current productId should support GA + // Check if GA is enabled, customer has opted in, and if current productId should support GA const products: string[] = !supportedProductIds ? [] : supportedProductIds.split(','); - if (!enabled || !products.includes(productId)) { + if (!optedIn || !enabled || !products.includes(productId)) { return; } @@ -159,7 +163,14 @@ export function useReactGA4Setup(config: Config, productId: string) { } catch (error) { console.error('Error initializing GA script\n', error); } - }, [enabled, measurementId, supportedProductIds, debugMode, productId]); + }, [ + enabled, + measurementId, + supportedProductIds, + debugMode, + productId, + optedIn, + ]); } export const enum CouponInfoBoxMessageType { diff --git a/packages/fxa-payments-server/src/routes/Product/index.tsx b/packages/fxa-payments-server/src/routes/Product/index.tsx index 57b7b2bc03..1b8b9b8618 100644 --- a/packages/fxa-payments-server/src/routes/Product/index.tsx +++ b/packages/fxa-payments-server/src/routes/Product/index.tsx @@ -108,7 +108,7 @@ export const Product = ({ ); } - useReactGA4Setup(config, productId); + useReactGA4Setup(config, productId, profile.result?.metricsEnabled); // Fetch plans on initial render, change in product ID, or auth change. useEffect(() => {