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:
Meghan Sardesai 2023-11-30 01:03:03 -05:00
Родитель e5292adf31
Коммит 7649a74fe8
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 9A46BEBC2E8A3934
3 изменённых файлов: 38 добавлений и 6 удалений

Просмотреть файл

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