From f4b1ab59e049cbb5e002b0d972a006cca57164b0 Mon Sep 17 00:00:00 2001 From: Seth Call Date: Mon, 24 Mar 2025 21:36:28 -0500 Subject: [PATCH] Cleaned up BrowserRouter, and added GA --- jam-ui/.env.development | 1 + jam-ui/.env.development.example | 3 ++- jam-ui/.env.production | 1 + jam-ui/.env.staging | 1 + jam-ui/package-lock.json | 9 ++++++++ jam-ui/package.json | 1 + jam-ui/src/App.js | 15 ++++++++----- .../components/utilities/AnalyticsTracker.js | 20 +++++++++++++++++ jam-ui/src/helpers/analytics.js | 22 +++++++++++++++++++ jam-ui/src/index.js | 6 ++++- jam-ui/src/layouts/JKLayout.js | 6 ++--- 11 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 jam-ui/src/components/utilities/AnalyticsTracker.js create mode 100644 jam-ui/src/helpers/analytics.js 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} /> - + ); };