Add back Google Analytics

frontend/public/index.html

@@ -27,7 +27,18 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- with help from: https://javascript.plainenglish.io/the-ultimate-guide-to-google-analytics-ua-ga4-on-react-or-anything-else-ec9dc84c0211-->
     <title>%REACT_APP_SITE_NAME%</title>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" >
+    </script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '%REACT_APP_GOOGLE_ANALYTICS%', { send_page_view: false })
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/app.js

@@ -0,0 +1,39 @@
+
+
+import { Routes ,Route } from 'react-router-dom';
+import { usePageTracking } from "./tracking";
+
+import 'semantic-ui-css/semantic.min.css'
+
+// Main
+import Main from "./Main/Main"
+
+// System
+import ListSystems from "./System/ListSystems"
+
+// Call
+import Calls from "./Call/Calls"
+
+import AboutComponent from "./About/AboutComponent"
+
+// Event
+import ListEvents from "./Event/ListEvents"
+import ViewEvent from "./Event/ViewEvent"
+
+
+const App = () => {
+usePageTracking();
+
+return (
+        <Routes>
+          <Route exact path="/" element={<Main/>} />
+          <Route exact path="/systems" element={<ListSystems/>} />
+          <Route exact path="/system/:shortName" element={<Calls/>} />
+          <Route exact path="/events" element={<ListEvents/>} />
+          <Route exact path="/events/:id" element={<ViewEvent/>} />
+          <Route exact path="/about" element={<AboutComponent/>} />
+        </Routes>
+)
+}
+
+export default App;

frontend/src/index.js

@@ -1,30 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { Routes ,Route } from 'react-router-dom';
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from 'react-redux'
-import configureStore, { history } from './redux-router/configureStore'
+import configureStore from './redux-router/configureStore'
 
-import 'semantic-ui-css/semantic.min.css'
-
-// withTracker
-//import withTracker from './withTracker';
-
-// Main
-import Main from "./Main/Main"
-
-// System
-import ListSystems from "./System/ListSystems"
-
-// Call
-import Calls from "./Call/Calls"
-
-import AboutComponent from "./About/AboutComponent"
-
-// Event
-
-import ListEvents from "./Event/ListEvents"
-import ViewEvent from "./Event/ViewEvent"
+import App from "./app"
 
 const store = configureStore(/* provide initial state if any */)
 
@@ -32,16 +12,8 @@ const container = document.getElementById('root');
 const root = createRoot(container);
 root.render(
   <Provider store={store}>
-  <BrowserRouter>
-        <Routes>
-          <Route exact path="/" element={<Main/>} />
-          <Route exact path="/systems" element={<ListSystems/>} />
-          <Route exact path="/system/:shortName" element={<Calls/>} />
-          <Route exact path="/events" element={<ListEvents/>} />
-          <Route exact path="/events/:id" element={<ViewEvent/>} />
-          <Route exact path="/about" element={<AboutComponent/>} />
-
-        </Routes>
-        </BrowserRouter>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </Provider>
 )

frontend/src/tracking.js

@@ -0,0 +1,15 @@
+
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const usePageTracking = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.gtag("event", "page_view", {
+      page_path: location.pathname + location.search + location.hash,
+      page_search: location.search,
+      page_hash: location.hash,
+    });
+  }, [location]);
+};

frontend/src/withTracker.js

@@ -1,39 +0,0 @@
-import React, { Component } from 'react';
-import ReactGA from 'react-ga';
-
-export default function withTracker(WrappedComponent, options = {}) {
-  const trackPage = (page) => {
-    ReactGA.set({
-      page,
-      ...options
-    });
-    ReactGA.pageview(page);
-  };
-
-  const HOC = class extends Component {
-    componentDidMount() {
-      const {
-        location: { pathname: page }
-      } = this.props;
-      trackPage(page);
-    }
-
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      const {
-        location: { pathname: currentPage }
-      } = this.props;
-      const nextPage = nextProps.location.pathname;
-
-      if (currentPage !== nextPage) {
-        trackPage(nextPage);
-      }
-    }
-
-    render() {
-      return <WrappedComponent {...this.props} />;
-    }
-  };
-
-  return HOC;
-}

prod.env.example

@@ -21,10 +21,6 @@ export REACT_APP_SOCKET_SERVER=wss://socket.${DOMAIN_NAME}
 export REACT_APP_ACCOUNT_SERVER="${PROTOCOL}account.${DOMAIN_NAME}"
 export REACT_APP_ADMIN_SERVER="${PROTOCOL}admin.${DOMAIN_NAME}"
 export REACT_APP_COOKIE_DOMAIN=".${DOMAIN_NAME}"
-
-export TWITTER_CONSUMER_KEY=""
-export TWITTER_CONSUMER_SECRET=""
-export TWITTER_ACCESS_TOKEN_KEY=""
-export TWITTER_ACCESS_TOKEN_SECRET=""
+export REACT_APP_GOOGLE_ANALYTICS=""