add google analytics

frontend/package.json

@@ -18,6 +18,7 @@
     "react-audio-player": "0.14.0",
     "react-datepicker": "3.3.0",
     "react-dom": "^17.0.1",
+    "react-ga": "^3.3.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",

frontend/src/index.js

@@ -4,8 +4,14 @@ import { Provider } from 'react-redux'
 import { Route, Switch } from 'react-router' // react-router v4/v5
 import { ConnectedRouter } from 'connected-react-router'
 import configureStore, { history } from './redux-router/configureStore'
+import ReactGA from 'react-ga';
+
+
 import 'semantic-ui-css/semantic.min.css'
 
+// withTracker
+import withTracker from './withTracker';
+
 // Main
 import MainContainer from "./Main/MainContainer"
 
@@ -15,6 +21,8 @@ import ListSystemsContainer from "./System/ListSystemsContainer"
 // Call
 import CallPlayerContainer from "./Call/CallPlayerContainer"
 
+ReactGA.initialize(process.env.GOOGLE_ANALYTICS);
+
 const store = configureStore(/* provide initial state if any */)
 
 ReactDOM.render(
@@ -22,9 +30,9 @@ ReactDOM.render(
     <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
       <> { /* your usual react-router v4/v5 routing */ }
         <Switch>
-          <Route exact path="/" component={MainContainer} />
-          <Route exact path="/systems" component={ListSystemsContainer} />
-          <Route exact path="/system/:shortName" component={CallPlayerContainer} />
+          <Route exact path="/" component={withTracker(MainContainer)} />
+          <Route exact path="/systems" component={withTracker(ListSystemsContainer)} />
+          <Route exact path="/system/:shortName" component={withTracker(CallPlayerContainer)} />
           <Route render={() => (<div>Miss</div>)} />
         </Switch>
       </>

frontend/src/withTracker.js

@@ -0,0 +1,39 @@
+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;
+}

frontend/yarn.lock

@@ -8179,6 +8179,11 @@ react-fast-compare@^3.0.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

node_modules/.yarn-integrity

@@ -1,12 +0,0 @@
-{
-  "nodeVersion": "v10.15.3",
-  "modulesFolders": [
-    "node_modules"
-  ],
-  "flags": [],
-  "linkedModules": [],
-  "topLevelPatterns": [],
-  "lockfileEntries": {},
-  "files": [],
-  "artifacts": {}
-}