feat(web-react): adds the possibility to track events through GA4 (#8231

)

Co-authored-by: Chris Collins <[email protected]>

datahub-web-react/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "dependencies": {
         "@analytics/amplitude": "0.0.3",
-        "@analytics/google-analytics": "^0.5.2",
+        "@analytics/google-analytics": "^1.0.7",
         "@analytics/mixpanel": "^0.3.1",
         "@ant-design/colors": "^5.0.0",
         "@ant-design/icons": "^4.3.0",

datahub-web-react/src/app/analytics/README.md

@@ -48,20 +48,17 @@ const config: any = {
 
 ### Google Analytics
 
-**Disclaimers**
-
--   This plugin requires use of Universal Analytics and does not yet support GA4. To create a Universal Analytics Property, follow [this guide](https://www.analyticsmania.com/other-posts/how-to-create-a-universal-analytics-property/).
--   Google Analytics lacks robust support for custom event properties. For that reason many of the DataHub events discussed above will not be fully populated. Instead, we map certain fields of the DataHub event to the standard `category`, `action`, `label` fields required by GA.
-
 1. Open `datahub-web-react/src/conf/analytics.ts`
-2. Uncomment the `googleAnalytics` field within the `config` object.
-3. Replace the sample `trackingId` with the one provided by Google Analytics.
+2. Uncomment the `googleAnalytics` field within the `config`.
+3. Replace the sample `measurementIds` with the one provided by Google Analytics.
 4. Rebuild & redeploy `datahub-frontend-react` to start tracking.
 
+Example:
+
 ```typescript
 const config: any = {
     googleAnalytics: {
-        trackingId: 'UA-24123123-01',
+        measurementIds: ['G-ATV123'],
     },
 };
 ```

datahub-web-react/src/app/analytics/plugin/googleAnalytics.ts

@@ -2,9 +2,9 @@ import googleAnalytics from '@analytics/google-analytics';
 import { Event, EventType } from '../event';
 import analyticsConfig from '../../../conf/analytics';
 
-const gaConfigs = analyticsConfig.googleAnalytics;
-const isEnabled: boolean = gaConfigs || false;
-const trackingId = isEnabled ? gaConfigs.trackingId : undefined;
+const ga4Configs = analyticsConfig.googleAnalytics;
+const isEnabled: boolean = ga4Configs || false;
+const measurementIds = isEnabled ? ga4Configs.measurementIds : undefined;
 
 const getLabelFromEvent = (event: Event) => {
     switch (event.type) {
@@ -21,11 +21,7 @@ const getLabelFromEvent = (event: Event) => {
 
 let wrappedGoogleAnalyticsPlugin;
 if (isEnabled) {
-    /**
-     * Init default GA plugin
-     */
-    const googleAnalyticsPlugin = googleAnalytics({ trackingId });
-
+    const googleAnalyticsPlugin = googleAnalytics({ measurementIds });
     /**
      * Lightweight wrapper on top of the default google analytics plugin
      * to transform DataHub Analytics Events into the Google Analytics event

datahub-web-react/src/conf/analytics.ts

@@ -1,7 +1,7 @@
 const config: any = {
     // Uncomment below to configure analytics.
     // googleAnalytics: {
-    //    trackingId: 'UA-24123123-01',
+    //    measurementIds: ['G-RTEGER123'],
     // },
     // mixpanel: {
     //    token: 'fad1285da4e618b618973cacf6565e61',