Cleaned up BrowserRouter, and added GA

jam-ui/.env.development

@@ -9,5 +9,6 @@ REACT_APP_BITBUCKET_COMMIT=dev
 REACT_APP_ENV=development
 REACT_APP_RECAPTCHA_ENABLED=false
 REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B
+REACT_APP_GOOGLE_ANALYTICS_ID=G-MC9BTWXWY4
 PUBLIC_URL=
 REACT_APP_COOKIE_DOMAIN=.jamkazam.local

jam-ui/.env.development.example

@@ -7,4 +7,5 @@ REACT_APP_API_BASE_URL=http://www.jamkazam.local:3000/api
 REACT_APP_BITBUCKET_BUILD_NUMBER=dev
 REACT_APP_BITBUCKET_COMMIT=dev
 REACT_APP_ENV=development
-REACT_APP_COOKIE_DOMAIN=.jamkazam.com
+REACT_APP_COOKIE_DOMAIN=.jamkazam.com
+REACT_APP_GOOGLE_ANALYTICS_ID=G-MC9BTWXWY4

jam-ui/.env.production

@@ -8,3 +8,4 @@ REACT_APP_ENV=production
 REACT_APP_RECAPTCHA_ENABLED=true
 REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B
 REACT_APP_COOKIE_DOMAIN=.jamkazam.com
+REACT_APP_GOOGLE_ANALYTICS_ID=G-SPTNJRW7WB

jam-ui/.env.staging

@@ -8,3 +8,4 @@ REACT_APP_ENV=staging
 REACT_APP_RECAPTCHA_ENABLED=false
 REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B
 REACT_APP_COOKIE_DOMAIN=.staging.jamkazam.com
+REACT_APP_GOOGLE_ANALYTICS_ID=G-8W0GTL53NT

jam-ui/package-lock.json

@@ -2790,6 +2790,8 @@
     },
     "@fingerprintjs/fingerprintjs": {
       "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@fingerprintjs/fingerprintjs/-/fingerprintjs-4.6.0.tgz",
+      "integrity": "sha512-g2z4lF2saGxVT+AQSmJhPSwW/hBn8vnFJMW6UYOMl9ipJT7re0RZbr2+lB2eCZj/lJ89wWc21FMA14v9iOKroQ==",
       "requires": {
         "tslib": "^2.4.1"
       }
@@ -16871,11 +16873,18 @@
     },
     "react-flatpickr": {
       "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/react-flatpickr/-/react-flatpickr-3.10.6.tgz",
+      "integrity": "sha512-Gg2zYFs+EoY7PNSk6lkiRyXV3nYmCp+ps29B4XFgZ1O4txOu6TvfHK2YCKT9zCpXbk5CcIGKMlvbupivWzy1+A==",
       "requires": {
         "flatpickr": "^4.6.2",
         "prop-types": "^15.5.10"
       }
     },
+    "react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+    },
     "react-google-recaptcha": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",

jam-ui/package.json

@@ -61,6 +61,7 @@
     "react-dropzone": "^10.2.2",
     "react-es6-progressbar.js": "^1.1.0",
     "react-flatpickr": "^3.10.6",
+    "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.11.1",
     "react-https-redirect": "^1.1.0",

jam-ui/src/App.js

@@ -1,17 +1,20 @@
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import React, { useEffect } from 'react';
 import Layout from './layouts/JKLayout';
+import AnalyticsTracker from "./components/utilities/AnalyticsTracker";
 
 import 'react-toastify/dist/ReactToastify.min.css';
 import 'react-datetime/css/react-datetime.css';
 import 'react-image-lightbox/style.css';
 
+
 const App = () => {
 
-  return (
-    <Router basename={process.env.PUBLIC_URL}>
-      <Layout />
-    </Router>
+    return (
+      <>
+          <AnalyticsTracker />
+          <Layout />
+      </>
+
   );
 };
 

jam-ui/src/components/utilities/AnalyticsTracker.js

@@ -0,0 +1,20 @@
+// AnalyticsTracker.js
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { initGA, logPageView } from "../../helpers/analytics";
+
+const AnalyticsTracker = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+        initGA();
+    }, []);
+    useEffect(() => {
+        console.log("Logging page view for", location.pathname + location.search);
+        logPageView(location.pathname + location.search);
+    }, [location]);
+
+    return null; // it doesn't render anything
+};
+
+export default AnalyticsTracker;

jam-ui/src/helpers/analytics.js

@@ -0,0 +1,22 @@
+import ReactGA from "react-ga4";
+
+var initialized = false;
+
+export const initGA = () => {
+    console.log("init GA");
+    if(process.env.REACT_APP_GOOGLE_ANALYTICS_ID) {
+        console.log("initialized GA with ", process.env.REACT_APP_GOOGLE_ANALYTICS_ID);
+        ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_ID);
+        initialized = true;
+    }
+    else {
+        initialized = false;
+        console.log("no GA ID found");
+    }
+};
+
+export const logPageView = (path) => {
+    if(initialized) {
+        ReactGA.send({hitType: "pageview", page: path});
+    }
+};

jam-ui/src/index.js

@@ -4,6 +4,8 @@ import 'react-app-polyfill/stable';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import HttpsRedirect from 'react-https-redirect';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 import App from './App';
 import Main from './Main';
 import './helpers/initFA';
@@ -12,7 +14,9 @@ import './i18n/config';
 ReactDOM.render(
   <HttpsRedirect disabled={process.env.NODE_ENV === 'development'}>
     <Main>
-      <App />
+        <Router basename={process.env.PUBLIC_URL}>
+            <App />
+        </Router>
     </Main>
   </HttpsRedirect>,
   document.getElementById('main')

jam-ui/src/layouts/JKLayout.js

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import { CloseButton, Fade } from '../components/common/Toast';
 
@@ -28,7 +28,7 @@ const Layout = () => {
   }, []);
 
   return (
-    <Router fallback={<span />}>
+      <>
       <Switch>
         <Route path="/errors" component={ErrorLayout} />
         <Route path="/auth" component={AuthBasicLayout} />
@@ -37,7 +37,7 @@ const Layout = () => {
       </Switch>
       <ToastContainer transition={Fade} closeButton={<CloseButton />} position={toast.POSITION.BOTTOM_RIGHT} />
       <BuildMeta />
-    </Router>
+      </>
   );
 };