feat(analytics-js-integrations): onboard ga4 v2 hybrid mode (#1802)

Author: utsabc

packages/analytics-js-common/src/constants/destDisplayNamesToFileNamesMap.ts

@@ -40,6 +40,8 @@ import {
   TVSquaredDirectoryName,
   GA4DisplayName,
   GA4DirectoryName,
+  GA4_V2DisplayName,
+  GA4_V2DirectoryName,
   MoEngageDisplayName,
   MoEngageDirectoryName,
   AmplitudeDisplayName,
@@ -180,6 +182,7 @@ const destDisplayNamesToFileNamesMap: Record<string, string> = {
   [FullstoryDisplayName]: FullstoryDirectoryName,
   [TVSquaredDisplayName]: TVSquaredDirectoryName,
   [GA4DisplayName]: GA4DirectoryName,
+  [GA4_V2DisplayName]: GA4_V2DirectoryName,
   [MoEngageDisplayName]: MoEngageDirectoryName,
   [AmplitudeDisplayName]: AmplitudeDirectoryName,
   [PendoDisplayName]: PendoDirectoryName,

packages/analytics-js-common/src/constants/destinationNames.ts

@@ -62,6 +62,10 @@ export {
   DISPLAY_NAME as GA4DisplayName,
   DIR_NAME as GA4DirectoryName,
 } from './integrations/GA4/constants';
+export {
+  DISPLAY_NAME as GA4_V2DisplayName,
+  DIR_NAME as GA4_V2DirectoryName,
+} from './integrations/GA4_V2/constants';
 export {
   DISPLAY_NAME as GoogleAdsDisplayName,
   DIR_NAME as GoogleAdsDirectoryName,

packages/analytics-js-common/src/constants/integrations/GA4_V2/constants.ts

@@ -0,0 +1,19 @@
+const DIR_NAME = 'GA4_V2';
+const NAME = 'GA4_V2';
+const DISPLAY_NAME = 'Google Analytics 4 (GA4) V2';
+
+const DISPLAY_NAME_TO_DIR_NAME_MAP = { [DISPLAY_NAME]: DIR_NAME };
+const CNameMapping = {
+  [NAME]: NAME,
+  'Google Analytics 4 V2': NAME,
+  'Google analytics 4 V2': NAME,
+  'google analytics 4 V2': NAME,
+  'Google Analytics4 V2': NAME,
+  'Google analytics4 V2': NAME,
+  'google analytics4 V2': NAME,
+  'Google Analytics 4 (GA4) V2': NAME,
+  'google analytics 4 (ga4) V2': NAME,
+  GoogleAnalytics4V2: NAME,
+};
+
+export { NAME, CNameMapping, DISPLAY_NAME_TO_DIR_NAME_MAP, DISPLAY_NAME, DIR_NAME };

packages/analytics-js-common/src/v1.1/utils/client_server_name.js

@@ -22,6 +22,7 @@ const clientToServerNames = {
   FULLSTORY: 'Fullstory',
   TVSQUARED: 'TVSquared',
   GA4: 'Google Analytics 4 (GA4)',
+  GA4_V2: 'Google Analytics 4 (GA4) V2',
   MOENGAGE: 'MoEngage',
   AM: 'Amplitude',
   PENDO: 'Pendo',

packages/analytics-js-common/src/v1.1/utils/config_to_integration_names.js

@@ -20,6 +20,7 @@ const configToIntNames = {
   FULLSTORY: 'Fullstory',
   TVSQUARED: 'TVSquared',
   GA4: 'GA4',
+  GA4_V2: 'GA4_V2',
   MOENGAGE: 'MoEngage',
   AM: 'Amplitude',
   PENDO: 'Pendo',

packages/analytics-js-common/src/v1.1/utils/integration_cname.js

@@ -14,6 +14,7 @@ import { CNameMapping as FacebookPixel } from '../../constants/integrations/Face
 import { CNameMapping as Fullstory } from '../../constants/integrations/Fullstory/constants';
 import { CNameMapping as GA } from '../../constants/integrations/GA/constants';
 import { CNameMapping as GA4 } from '../../constants/integrations/GA4/constants';
+import { CNameMapping as GA4_V2 } from '../../constants/integrations/GA4_V2/constants';
 import { CNameMapping as GoogleAds } from '../../constants/integrations/GoogleAds/constants';
 import { CNameMapping as GoogleOptimize } from '../../constants/integrations/GoogleOptimize/constants';
 import { CNameMapping as GoogleTagManager } from '../../constants/integrations/GoogleTagManager/constants';
@@ -98,6 +99,7 @@ const commonNames = {
   ...Fullstory,
   ...GA,
   ...GA4,
+  ...GA4_V2,
   ...GA360,
   ...GoogleAds,
   ...GoogleOptimize,

packages/analytics-js-integrations/.size-limit.js

@@ -6,11 +6,11 @@ module.exports = [
   {
     name: 'All Integrations - Legacy - CDN',
     path: 'dist/cdn/legacy/js-integrations/*.min.js',
-    limit: '93 KiB',
+    limit: '95.3 KiB',
   },
   {
     name: 'All Integrations - Modern - CDN',
     path: 'dist/cdn/modern/js-integrations/*.min.js',
-    limit: '88 KiB',
+    limit: '91 KiB',
   },
 ];

packages/analytics-js-integrations/src/integrations/GA4/browser.js

@@ -39,6 +39,7 @@ export default class GA4 {
     this.overrideClientAndSessionId = config.overrideClientAndSessionId || false;
     this.sdkBaseUrl =
       removeTrailingSlashes(config.sdkBaseUrl) || 'https://www.googletagmanager.com';
+    this.isExtendedGa4_V2 = config.isExtendedGa4_V2 || false;
     ({
       shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
       propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
@@ -70,7 +71,7 @@ export default class GA4 {
       gtagParameterObject.cookie_prefix = 'rs';
       gtagParameterObject.client_id = this.analytics.getAnonymousId();
       gtagParameterObject.session_id = this.analytics.getSessionId();
-    } else {
+    } else if(!this.isExtendedGa4_V2){
       // Cookie migration logic
       const clientCookie = this.cookie.get('rs_ga');
       const defaultGA4Cookie = this.cookie.get('_ga');
@@ -260,4 +261,15 @@ export default class GA4 {
       },
     };
   }
+
+  // Is used in GA4_V2
+  getClientDetails() {
+    return {
+      clientId: this.clientId,
+      sessionId: this.sessionId,
+      sessionNumber: this.sessionNumber,
+    };
+  }
 }
+
+

packages/analytics-js-integrations/src/integrations/GA4_V2/browser.js

@@ -0,0 +1,87 @@
+import {
+  NAME,
+  DISPLAY_NAME,
+} from '@rudderstack/analytics-js-common/constants/integrations/GA4_V2/constants';
+import { isDefinedAndNotNull } from '../../utils/commonUtils';
+import Logger from '../../utils/logger';
+import { GA4 } from '../GA4';
+
+const logger = new Logger(DISPLAY_NAME);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default class GA4_V2 extends GA4 {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+
+    const newConfig = { ...config };
+    /**
+     * Sample configData
+     * "{\"ACCOUNT\":\"321500532\",\"PROPERTY\":\"449999397\",\"DATA_STREAM\":{\"value\":\"G-Q3C88MMDW1\",\"type\":\"gtag\"},\"MEASUREMENT_PROTOCOL_SECRET\":\"sample_secret\"}";
+     */
+
+    if (isDefinedAndNotNull(config.configData)) {
+      const configDetails = JSON.parse(config.configData);
+      newConfig.propertyId = configDetails.PROPERTY;
+      newConfig.typesOfClient = configDetails.DATA_STREAM.type;
+      if (newConfig.typesOfClient !== 'gtag') {
+        logger.error('Invalid typesOfClient. Please select gtag');
+      }
+      newConfig.measurementId = configDetails.DATA_STREAM.value;
+    }
+
+    if (!isDefinedAndNotNull(newConfig.measurementId)) {
+      logger.error('Measurement ID is required for GA4');
+    }
+    
+    newConfig.isExtendedGa4_V2 = true;
+    super(newConfig, analytics, destinationInfo);
+    this.analytics = analytics;
+    this.name = NAME;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  init() {
+    return super.init();
+  }
+
+  isLoaded() {
+    return super.isLoaded();
+  }
+
+  isReady() {
+    return super.isReady();
+  }
+
+  identify(rudderElement) {
+    return super.identify(rudderElement);
+  }
+
+  track(rudderElement) {
+    return super.track(rudderElement);
+  }
+
+  page(rudderElement) {
+    return super.page(rudderElement);
+  }
+
+  group(rudderElement) {
+    return super.group(rudderElement);
+  }
+
+  getDataForIntegrationsObject() {
+    const { clientId, sessionId, sessionNumber } = super.getClientDetails();
+    return {
+      [DISPLAY_NAME]: {
+        clientId,
+        sessionId,
+        sessionNumber,
+      },
+    };
+  }
+}

packages/analytics-js-integrations/src/integrations/GA4_V2/index.js

@@ -0,0 +1 @@
+export { default as GA4_V2 } from './browser';