feat: add support to consent management protocol v2 to main

packages/react/src/__tests__/__snapshots__/index.test.ts.snap

@@ -248,6 +248,10 @@ Object {
     "GA": [Function],
     "GA4": [Function],
     "GTM": [Function],
+    "GoogleConsentType": Object {
+      "Denied": "denied",
+      "Granted": "granted",
+    },
     "Integration": [Function],
     "Omnitracking": [Function],
     "Riskified": [Function],

packages/react/src/analytics/integrations/GA4/GA4.ts

@@ -15,6 +15,7 @@
 import {
   PageType as analyticsPageTypes,
   TrackType as analyticsTrackTypes,
+  type ConsentData,
   type EventData,
   integrations,
   type LoadIntegrationEventData,
@@ -36,6 +37,7 @@ import {
   OPTION_DATA_LAYER_NAME,
   OPTION_DEBUG_MODE,
   OPTION_ENABLE_AUTOMATIC_PAGE_VIEWS,
+  OPTION_GOOGLE_CONSENT_CONFIG,
   OPTION_LOAD_SCRIPT_FUNCTION,
   OPTION_MEASUREMENT_ID,
   OPTION_NON_INTERACTION_EVENTS,
@@ -46,6 +48,7 @@ import {
   OPTION_SET_CUSTOM_USER_ID_PROPERTY,
 } from './constants.js';
 import { each, get, merge } from 'lodash-es';
+import { GoogleConsentMode } from '../shared/index.js';
 import { validateFields } from './validation/optionsValidator.js';
 import defaultSchemaEventsMap from '../shared/validation/eventSchemas.js';
 import eventValidator from '../shared/validation/eventValidator.js';
@@ -70,6 +73,7 @@ import type {
  * Google Analytics 4 Integration.
  */
 class GA4 extends integrations.Integration<GA4IntegrationOptions> {
+  private googleConsentMode!: GoogleConsentMode;
   private enableAutomaticPageViews!: boolean;
   private schemaEventsMap!: Schemas;
   private initializePromise!: Promise<void>;
@@ -100,7 +104,7 @@ class GA4 extends integrations.Integration<GA4IntegrationOptions> {
     strippedDownAnalytics: StrippedDownAnalytics,
   ) {
     super(options, loadData, strippedDownAnalytics);
-    this.initialize(options);
+    this.initialize(options, loadData);
     this.onSetUser(loadData);
   }
 
@@ -111,9 +115,13 @@ class GA4 extends integrations.Integration<GA4IntegrationOptions> {
    * Initializes member variables from options and tries to initialize Google
    * Analytics 4.
    *
-   * @param options - Options passed for the GA4 integration.
+   * @param options   - Options passed for the GA4 integration.
+   * @param loadData              - Analytics's load event data.
    */
-  initialize(options: GA4IntegrationOptions) {
+  initialize(
+    options: GA4IntegrationOptions,
+    loadData: LoadIntegrationEventData,
+  ) {
     this.optionsValidationResultsMap = validateFields(options);
 
     this.measurementId = options[OPTION_MEASUREMENT_ID];
@@ -148,9 +156,33 @@ class GA4 extends integrations.Integration<GA4IntegrationOptions> {
       true,
     );
 
+    this.googleConsentMode = new GoogleConsentMode(
+      this.getDataLayerName(),
+      loadData.consent,
+      get(options, OPTION_GOOGLE_CONSENT_CONFIG),
+    );
+
     this.loadGtagScript(options);
   }
 
+  getDataLayerName(): string {
+    return get(this.options, OPTION_DATA_LAYER_NAME, DEFAULT_DATA_LAYER_NAME);
+  }
+
+  /**
+   * Sets the consent object. This method is called by analytics whenever the consent
+   * changes, so there's no need to validate if it has changed or not.
+   *
+   * @param consent - Object to be written on the dataLayer.
+   *
+   * @returns This allows chaining of class methods.
+   */
+  override setConsent(this: this, consent: ConsentData): this {
+    this.googleConsentMode.updateConsent(consent);
+
+    return this;
+  }
+
   /**
    * Send page events to GA4.
    *
@@ -725,9 +757,7 @@ class GA4 extends integrations.Integration<GA4IntegrationOptions> {
    * @param options - User configured options.
    */
   internalLoadScript(options: GA4IntegrationOptions) {
-    const customDataLayerAttr = options[OPTION_DATA_LAYER_NAME]
-      ? options[OPTION_DATA_LAYER_NAME]
-      : DEFAULT_DATA_LAYER_NAME;
+    const customDataLayerAttr = this.getDataLayerName();
     const debugMode = options[OPTION_DEBUG_MODE] || false;
     const script = document.createElement('script');
 

packages/react/src/analytics/integrations/GA4/constants.ts

@@ -19,5 +19,6 @@ export const OPTION_SCHEMAS = 'schemas';
 export const OPTION_DATA_LAYER_NAME = 'dataLayerName';
 export const OPTION_SET_CUSTOM_USER_ID_PROPERTY = 'setCustomUserIdProperty';
 export const OPTION_DEBUG_MODE = 'debugMode';
+export const OPTION_GOOGLE_CONSENT_CONFIG = 'googleConsentConfig';
 
 export const GA4_UNIQUE_EVENT_ID = 'blackoutAnalyticsEventId';

packages/react/src/analytics/integrations/GA4/types/index.ts

@@ -10,6 +10,7 @@ import type {
 import type {
   OPTION_DATA_LAYER_NAME,
   OPTION_ENABLE_AUTOMATIC_PAGE_VIEWS,
+  OPTION_GOOGLE_CONSENT_CONFIG,
   OPTION_LOAD_SCRIPT_FUNCTION,
   OPTION_MEASUREMENT_ID,
   OPTION_NON_INTERACTION_EVENTS,
@@ -21,6 +22,8 @@ import type {
 } from '../constants.js';
 import type { Schema } from '../../shared/types/shared.types.js';
 
+import { type GoogleConsentModeConfig } from '../../shared/index.js';
+
 export type Schemas = Record<string, Schema>;
 
 export interface GA4IntegrationOptions extends IntegrationOptions {
@@ -34,6 +37,7 @@ export interface GA4IntegrationOptions extends IntegrationOptions {
   [OPTION_DATA_LAYER_NAME]?: string;
   [OPTION_LOAD_SCRIPT_FUNCTION]?: () => Promise<void>;
   [OPTION_ON_PRE_PROCESS_COMMANDS]?: OnPreProcessCommandsHandler;
+  [OPTION_GOOGLE_CONSENT_CONFIG]?: GoogleConsentModeConfig;
 }
 
 export type ProductMappings = Record<string, string | string[]>;

packages/react/src/analytics/integrations/GTM/GTM.ts

@@ -23,6 +23,8 @@ import {
   DATA_LAYER_SET_USER_EVENT,
   EVENT_SCHEMAS_KEY,
   EVENTS_MAPPER_KEY,
+  GOOGLE_CONSENT_CONFIG_KEY,
+  GTM_DATA_LAYER,
   GTM_LABEL_PREFIX,
   GTM_TYPE_ERROR_PREFIX,
   INVALID_FUNCTION_ERROR_SUFFIX,
@@ -46,6 +48,7 @@ import {
 } from '@farfetch/blackout-analytics';
 import { get, isEqual, isPlainObject, merge } from 'lodash-es';
 import { getContextParameters, getUserParameters } from './utils.js';
+import { GoogleConsentMode } from '../shared/index.js';
 import eventSchemas from '../shared/validation/eventSchemas.js';
 import eventsMapper from './eventsMapper.js';
 import eventValidator from '../shared/validation/eventValidator.js';
@@ -61,6 +64,7 @@ import type { Schemas } from '../GA/index.js';
  * GTM Integration.
  */
 class GTM extends integrations.Integration<GTMIntegrationOptions> {
+  protected googleConsentMode!: GoogleConsentMode;
   protected consentKey?: string;
   protected contextKey?: string;
   protected setUserKey?: string;
@@ -132,6 +136,12 @@ class GTM extends integrations.Integration<GTMIntegrationOptions> {
     options: GTMIntegrationOptions,
     loadData: LoadIntegrationEventData,
   ) {
+    this.googleConsentMode = new GoogleConsentMode(
+      GTM_DATA_LAYER,
+      loadData.consent,
+      get(options, GOOGLE_CONSENT_CONFIG_KEY),
+    );
+
     this.runGTMScript(options);
     this.setConsent(loadData.consent as ConsentData);
     this.setContext(loadData.context);
@@ -175,6 +185,7 @@ class GTM extends integrations.Integration<GTMIntegrationOptions> {
    * @returns This allows chaining of class methods.
    */
   override setConsent(this: this, consent: ConsentData): this {
+    this.googleConsentMode.updateConsent(consent);
     this.write({
       consent,
       event: this.consentKey as string,

packages/react/src/analytics/integrations/GTM/constants.ts

@@ -11,6 +11,8 @@ export const SET_USER_KEY = 'userKey';
 export const SET_USER_FN_KEY = 'onSetUser';
 export const EVENTS_MAPPER_KEY = 'eventsMapper';
 export const EVENT_SCHEMAS_KEY = 'eventSchemas';
+export const GOOGLE_CONSENT_CONFIG_KEY = 'googleConsentConfig';
+export const GTM_DATA_LAYER = 'dataLayer';
 
 export const GTM_LABEL_PREFIX = 'Google Tag Manager -';
 export const GTM_TYPE_ERROR_PREFIX = `${GTM_LABEL_PREFIX} TypeError:`;

packages/react/src/analytics/integrations/GTM/gtmTag.ts

@@ -1,5 +1,7 @@
 /* eslint-disable */
 
+import { GTM_DATA_LAYER } from './constants.js';
+
 /**
  * Script from google tag manager.
  *
@@ -18,4 +20,4 @@ export default (containerId: string) =>
     j.async = true;
     j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
     f.parentNode.insertBefore(j, f);
-  })(window, document, 'script', 'dataLayer', containerId);
+  })(window, document, 'script', GTM_DATA_LAYER, containerId);

packages/react/src/analytics/integrations/GTM/types/index.ts

@@ -2,6 +2,7 @@ import type {
   CONTAINER_ID_KEY,
   EVENT_SCHEMAS_KEY,
   EVENTS_MAPPER_KEY,
+  GOOGLE_CONSENT_CONFIG_KEY,
   SET_CONSENT_KEY,
   SET_CONTEXT_FN_KEY,
   SET_CONTEXT_KEY,
@@ -18,6 +19,8 @@ import type {
 import type { Schemas } from '../../GA/index.js';
 import type URLParse from 'url-parse';
 
+import { type GoogleConsentModeConfig } from '../../shared/index.js';
+
 export type EventMappers = Record<
   string,
   (data: EventData<TrackTypesValues>) => unknown
@@ -32,6 +35,7 @@ export interface GTMIntegrationOptions extends IntegrationOptions {
   [SET_USER_FN_KEY]?: (user: UserData) => void;
   [EVENTS_MAPPER_KEY]?: EventMappers;
   [EVENT_SCHEMAS_KEY]?: Schemas;
+  [GOOGLE_CONSENT_CONFIG_KEY]?: GoogleConsentModeConfig;
 }
 
 export type GTMEventContext = {

packages/react/src/analytics/integrations/index.ts

@@ -2,6 +2,10 @@ import { integrations } from '@farfetch/blackout-analytics';
 
 const { Integration, Omnitracking } = integrations;
 
+export {
+  type GoogleConsentModeConfig,
+  GoogleConsentType,
+} from './shared/index.js';
 export { Integration };
 export { Omnitracking };
 export { default as GA, validationSchemaBuilder } from './GA/index.js';