diff --git a/jam-ui/.env.development b/jam-ui/.env.development
index e4b92a39f..ff5bec081 100644
--- a/jam-ui/.env.development
+++ b/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
diff --git a/jam-ui/.env.development.example b/jam-ui/.env.development.example
index be784f83b..1c7ea91b8 100644
--- a/jam-ui/.env.development.example
+++ b/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
\ No newline at end of file
+REACT_APP_COOKIE_DOMAIN=.jamkazam.com
+REACT_APP_GOOGLE_ANALYTICS_ID=G-MC9BTWXWY4
\ No newline at end of file
diff --git a/jam-ui/.env.production b/jam-ui/.env.production
index 123f1c8f8..8519e994d 100644
--- a/jam-ui/.env.production
+++ b/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
diff --git a/jam-ui/.env.staging b/jam-ui/.env.staging
index b2eb30203..5cdb49cb9 100644
--- a/jam-ui/.env.staging
+++ b/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
diff --git a/jam-ui/package-lock.json b/jam-ui/package-lock.json
index 45d0c436d..111682fc1 100644
--- a/jam-ui/package-lock.json
+++ b/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",
diff --git a/jam-ui/package.json b/jam-ui/package.json
index 8d10c0bed..11deba462 100644
--- a/jam-ui/package.json
+++ b/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",
diff --git a/jam-ui/src/App.js b/jam-ui/src/App.js
index e6d69803e..d302565e8 100644
--- a/jam-ui/src/App.js
+++ b/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 (
-
-
-
+ return (
+ <>
+
+
+ >
+
);
};
diff --git a/jam-ui/src/components/utilities/AnalyticsTracker.js b/jam-ui/src/components/utilities/AnalyticsTracker.js
new file mode 100644
index 000000000..7515083cd
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/jam-ui/src/helpers/analytics.js b/jam-ui/src/helpers/analytics.js
new file mode 100644
index 000000000..7ac5a93c6
--- /dev/null
+++ b/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});
+ }
+};
\ No newline at end of file
diff --git a/jam-ui/src/index.js b/jam-ui/src/index.js
index 4b44b41a9..ab1e55fef 100644
--- a/jam-ui/src/index.js
+++ b/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(
-
+
+
+
,
document.getElementById('main')
diff --git a/jam-ui/src/layouts/JKLayout.js b/jam-ui/src/layouts/JKLayout.js
index 820b97859..a7efc7874 100644
--- a/jam-ui/src/layouts/JKLayout.js
+++ b/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 (
- }>
+ <>
@@ -37,7 +37,7 @@ const Layout = () => {
} position={toast.POSITION.BOTTOM_RIGHT} />
-
+ >
);
};