зеркало из https://github.com/mozilla/fxa.git
fix(payments): remove GA tracking for opted-out customers
Because: * Customers who have opted out of data collection and use should expect to navigate Subscription Platform without their data being tracked. This commit: * Updates the `useReactGA4Setup` to check whether customer has opted in to data collection before initializing. * Adds related test. Closes FXA-8639
This commit is contained in:
Родитель
e5292adf31
Коммит
7649a74fe8
|
@ -27,6 +27,7 @@ import {
|
||||||
CUSTOMER,
|
CUSTOMER,
|
||||||
IAP_CUSTOMER,
|
IAP_CUSTOMER,
|
||||||
SELECTED_PLAN,
|
SELECTED_PLAN,
|
||||||
|
PROFILE,
|
||||||
} from './mock-data';
|
} from './mock-data';
|
||||||
|
|
||||||
// eslint-disable-next-line import/first
|
// eslint-disable-next-line import/first
|
||||||
|
@ -118,11 +119,13 @@ describe('useReactGA4Setup', () => {
|
||||||
const Subject = ({
|
const Subject = ({
|
||||||
config,
|
config,
|
||||||
productId,
|
productId,
|
||||||
|
optedIn = true,
|
||||||
}: {
|
}: {
|
||||||
config: Config;
|
config: Config;
|
||||||
productId: string;
|
productId: string;
|
||||||
|
optedIn?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
useReactGA4Setup(config, productId);
|
useReactGA4Setup(config, productId, optedIn);
|
||||||
// Should always render
|
// Should always render
|
||||||
return <div data-testid="success">Render success</div>;
|
return <div data-testid="success">Render success</div>;
|
||||||
};
|
};
|
||||||
|
@ -198,6 +201,24 @@ describe('useReactGA4Setup', () => {
|
||||||
consoleError.mockRestore();
|
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(
|
||||||
|
<Subject
|
||||||
|
config={config}
|
||||||
|
productId="prod_GqM9ToKK62qjkK"
|
||||||
|
optedIn={profile.metricsEnabled}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(ReactGA.initialize).not.toBeCalled();
|
||||||
|
expect(queryByTestId('success')?.textContent).toEqual('Render success');
|
||||||
|
});
|
||||||
|
|
||||||
it('successfully initialize ReactGA4', () => {
|
it('successfully initialize ReactGA4', () => {
|
||||||
const config = mockConfig;
|
const config = mockConfig;
|
||||||
const { queryByTestId } = renderWithLocalizationProvider(
|
const { queryByTestId } = renderWithLocalizationProvider(
|
||||||
|
|
|
@ -116,16 +116,20 @@ export function usePaypalButtonSetup(
|
||||||
}, [config, setPaypalScriptLoaded, paypalButtonBase]);
|
}, [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 } =
|
const { enabled, measurementId, supportedProductIds, debugMode } =
|
||||||
config.googleAnalytics;
|
config.googleAnalytics;
|
||||||
|
|
||||||
useEffect(() => {
|
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
|
const products: string[] = !supportedProductIds
|
||||||
? []
|
? []
|
||||||
: supportedProductIds.split(',');
|
: supportedProductIds.split(',');
|
||||||
if (!enabled || !products.includes(productId)) {
|
if (!optedIn || !enabled || !products.includes(productId)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -159,7 +163,14 @@ export function useReactGA4Setup(config: Config, productId: string) {
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error initializing GA script\n', error);
|
console.error('Error initializing GA script\n', error);
|
||||||
}
|
}
|
||||||
}, [enabled, measurementId, supportedProductIds, debugMode, productId]);
|
}, [
|
||||||
|
enabled,
|
||||||
|
measurementId,
|
||||||
|
supportedProductIds,
|
||||||
|
debugMode,
|
||||||
|
productId,
|
||||||
|
optedIn,
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const enum CouponInfoBoxMessageType {
|
export const enum CouponInfoBoxMessageType {
|
||||||
|
|
|
@ -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.
|
// Fetch plans on initial render, change in product ID, or auth change.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
Загрузка…
Ссылка в новой задаче