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(() => {