[WEB-2395] Add GA4 page view and sign up redirect tracking

Dockerfile

@@ -60,6 +60,7 @@ ARG REALM_HOST
 ARG PORT=3000
 ARG SERVICE_NAME=blip
 ARG ROLLBAR_POST_SERVER_TOKEN
+ARG REACT_APP_GAID
 ARG I18N_ENABLED=false
 ARG RX_ENABLED=false
 ARG PENDO_ENABLED=true
@@ -71,6 +72,7 @@ ENV \
   PORT=$PORT \
   SERVICE_NAME=$SERVICE_NAME \
   ROLLBAR_POST_SERVER_TOKEN=$ROLLBAR_POST_SERVER_TOKEN \
+  REACT_APP_GAID=$REACT_APP_GAID \
   I18N_ENABLED=$I18N_ENABLED \
   RX_ENABLED=$RX_ENABLED \
   PENDO_ENABLED=$PENDO_ENABLED \

app/bootstrap.js

@@ -14,6 +14,7 @@
  */
 
 import React from 'react';
+import ReactGA from 'react-ga4';
 import { render } from 'react-dom';
 import bows from 'bows';
 import _ from 'lodash';
@@ -28,7 +29,7 @@ import api from './core/api';
 import personUtils from './core/personutils';
 import detectTouchScreen from './core/notouch';
 
-/* global __DEV_TOOLS__ */
+/* global __DEV_TOOLS__, __REACT_APP_GAID__ */
 
 // For React developer tools
 window.React = React;
@@ -59,6 +60,7 @@ appContext.props = {
 };
 
 appContext.init = callback => {
+  __REACT_APP_GAID__ && ReactGA.initialize(__REACT_APP_GAID__, { gtagOptions: { 'send_page_view': false } });
 
   function beginInit() {
     initNoTouch();

app/pages/signup/signup.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import ReactGA from 'react-ga4';
 import { connect } from 'react-redux';
 import { translate, Trans} from 'react-i18next';
 import { bindActionCreators } from 'redux';
@@ -168,6 +169,14 @@ export let Signup = translate()(class extends React.Component {
         options.loginHint = inviteEmail;
       }
       keycloak.register(options);
+
+      if (ReactGA.isInitialized) {
+        ReactGA.event({
+          category: 'redirect',
+          action: 'Keycloak Sign Up',
+          label: inviteEmail ? 'Has inviteEmail' : 'No inviteEmail',
+        });
+      }
     }
 
     let content = isLoading || keycloakConfig.initialized ? null : (

app/routes.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
+import ReactGA from 'react-ga4';
 import async from 'async';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { push } from 'connected-react-router';
@@ -326,6 +327,21 @@ export const getRoutes = (appContext) => {
   return (
     <Route path='/' {...props} render={routeProps => (
       <AppComponent {...routeProps} {...props}>
+        <Route
+          path="/"
+          render={({ location }) => {
+            if (ReactGA.isInitialized) {
+              ReactGA.send({
+                hitType: 'pageview',
+                page: location?.pathname + location?.search + location?.hash,
+                'page_search': location.search,
+                'page_hash': location.hash,
+              });
+            }
+            return null;
+          }}
+        />
+
         <Switch>
           <Route exact path='/' render={routeProps => (<Gate onEnter={boundRequireNoAuth} key={routeProps.match.path}><Login {...routeProps} {...props} /></Gate>)} />
           <Route path='/login' render={routeProps => (<Gate onEnter={boundRequireNoAuth} key={routeProps.match.path}><Login {...routeProps} {...props} /></Gate>)} />

config.webpack.js

@@ -27,6 +27,7 @@ const defineEnvPlugin = new webpack.DefinePlugin({
   __PENDO_ENABLED__: JSON.stringify(process.env.PENDO_ENABLED || true),
   __VERSION__: JSON.stringify(VERSION),
   __ROLLBAR_POST_CLIENT_TOKEN__: JSON.stringify(ROLLBAR_POST_CLIENT_TOKEN),
+  __REACT_APP_GAID__: JSON.stringify(process.env.REACT_APP_GAID || null),
   __VERSION_SHA__: JSON.stringify(VERSION_SHA),
   __DEV__: isDev,
   __TEST__: false,

config/local.example.js

@@ -35,12 +35,14 @@ const environments = {
 };
 
 const apiHost = environments.dev;
+const reactAppGAID = ' ';
 const uploadApi = apiHost;
 
 module.exports = {
   listLinkedPackages: () => console.log(Object.keys(linkedPackages).join(',')),
   linkedPackages,
   featureFlags,
   apiHost,
+  reactAppGAID,
   uploadApi,
 };

package.json

@@ -130,6 +130,7 @@
     "react": "16.12.0",
     "react-dates": "21.8.0",
     "react-dom": "16.12.0",
+    "react-ga4": "2.1.0",
     "react-hooks-testing-library": "0.6.0",
     "react-hot-loader": "4.12.19",
     "react-i18next": "7.13.0",

webpack.config.js

@@ -21,6 +21,7 @@ const isProd = (process.env.NODE_ENV === 'production');
 const linkedPackages = (isDev || isTest) ? _.get(optional('./config/local'), 'linkedPackages', {}) : {};
 const apiHost = _.get(optional('./config/local'), 'apiHost', process.env.API_HOST || null);
 const uploadApi = _.get(optional('./config/local'), 'uploadApi', process.env.UPLOAD_API || null);
+const reactAppGAID = _.get(optional('./config/local'), 'reactAppGAID', process.env.REACT_APP_GAID || null);
 const featureFlags = _.get(optional('./config/local'), 'featureFlags', {
   i18nEnabled: process.env.I18N_ENABLED || false,
   rxEnabled: process.env.RX_ENABLED || false,
@@ -158,6 +159,7 @@ const plugins = [
     __PENDO_ENABLED__: JSON.stringify(featureFlags.pendoEnabled),
     __VERSION__: JSON.stringify(VERSION),
     __ROLLBAR_POST_CLIENT_TOKEN__: JSON.stringify(ROLLBAR_POST_CLIENT_TOKEN),
+    __REACT_APP_GAID__: JSON.stringify(reactAppGAID),
     __VERSION_SHA__: JSON.stringify(VERSION_SHA),
     __DEV__: isDev,
     __TEST__: isTest,

yarn.lock

@@ -15587,6 +15587,11 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+[email protected]:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
+
 react-helmet-async@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"