feat: SKFP-889 add google analytics

.env.schema

@@ -10,6 +10,9 @@ REACT_APP_NAMESPACE=dev
 # App lifecycle
 REACT_APP_MAINTENANCE_MODE=false
 
+# Google Analytics
+REACT_APP_MEASUREMENT_ID=
+
 # APIS
 REACT_APP_PERSONA_API=
 REACT_APP_USERS_API_URL=
@@ -20,7 +23,6 @@ REACT_APP_ARRANGER_PROJECT_ID=
 REACT_APP_CAVATICA_USER_BASE_URL=
 REACT_APP_VARIANT_CLUSTER_API=
 
-jkjdkljksjd;w
 # FENCES
 REACT_APP_KEY_MANAGER_API_URL=
 REACT_APP_FENCE_API_URL=

package.json

@@ -120,6 +120,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^17.0.2",
+    "react-ga4": "^2.1.0",
     "react-highlight-words": "^0.18.0",
     "react-intl-universal": "^2.4.8",
     "react-redux": "^7.2.6",

src/App.tsx

@@ -41,6 +41,7 @@ import Spinner from 'components/uiKit/Spinner';
 import NotificationContextHolder from 'components/utils/NotificationContextHolder';
 import { useLang } from 'store/global';
 import { DYNAMIC_ROUTES, STATIC_ROUTES } from 'utils/routes';
+import { initGa } from 'services/analytics';
 
 const loadableProps = { fallback: <Spinner size="large" /> };
 const Dashboard = loadable(() => import('views/Dashboard'), loadableProps);
@@ -53,6 +54,8 @@ const VariantEntity2 = loadable(() => import('views/VariantEntity'), loadablePro
 const FileEntity = loadable(() => import('views/FileEntity'), loadableProps);
 const ProfileSettings = loadable(() => import('views/Profile/Settings'), loadableProps);
 
+initGa();
+
 const App = () => {
   const lang = useLang();
   const { keycloak, initialized } = useKeycloak();

src/helpers/EnvVariables.ts

@@ -27,6 +27,8 @@ export default class EnvironmentVariables {
     REPORTS_API_URL: process.env.REACT_APP_REPORTS_API_URL,
     // MAINTENANCE
     MAINTENANCE_MODE: process.env.REACT_APP_MAINTENANCE_MODE,
+    // GA
+    MEASUREMENT_ID: process.env.REACT_APP_MEASUREMENT_ID,
   };
 
   static configFor(key: string): string {

src/provider/KeycloakProvider.tsx

@@ -6,6 +6,7 @@ import {
 import EnvVariables from "helpers/EnvVariables";
 import { ReactKeycloakProvider as KeycloakProvider } from "@react-keycloak/web";
 import keycloak from "auth/keycloak-api/keycloak";
+import { trackAuthSuccess } from "services/analytics";
 
 export interface IProvider {
   children: React.ReactNode;
@@ -16,6 +17,10 @@ const eventLogger = (eventType: AuthClientEvent, error?: AuthClientError) => {
     console.error("eventLogger ", "eventType ", eventType);
     console.error("eventLogger ", error);
   }
+
+  if (eventType === 'onAuthSuccess') {
+    trackAuthSuccess();
+  }
 };
 
 const Keycloak = ({ children }: IProvider): ReactElement => (

src/services/analytics.ts

@@ -0,0 +1,21 @@
+import EnvironmentVariables from 'helpers/EnvVariables';
+import ReactGA from 'react-ga4';
+
+const measurementId = EnvironmentVariables.configFor('MEASUREMENT_ID');
+const isDev = EnvironmentVariables.configFor('ENV') === 'development';
+const isGaActive = measurementId && !isDev;
+
+export const initGa = () => {
+  if (isGaActive) {
+    ReactGA.initialize(measurementId);
+  }
+};
+
+export const trackAuthSuccess = () => {
+  if (isGaActive) {
+    ReactGA.event({
+      category: 'Authentication',
+      action: 'login success',
+    });
+  }
+};