Added analytics

.gitignore

@@ -4,6 +4,9 @@ logs/**
 /**/node_modules
 /**/dl
 
+#passwords
+auth.json
+
 #log files
 /**/*.log
 

package.json

@@ -9,18 +9,18 @@
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "papaparse": "^4.6.2"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.4",
     "css-loader": "^2.0.0",
+    "papaparse": "^4.6.2",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-ga": "^2.5.6",
     "react-markdown": "^4.0.4",
     "react-router-dom": "^4.3.1",
     "semantic-ui-react": "^0.83.0",

src/app.jsx

@@ -2,6 +2,9 @@ import React from "react";
 import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
 import { Header, Container, Divider } from "semantic-ui-react";
 
+//include tools
+import GA from './utilities/google_analytics.jsx';
+
 //include styles
 import "./styles/shared.css";
 
@@ -26,6 +29,7 @@ class App extends React.Component {
 			<div className="central">
 				<BrowserRouter>
 					<Container className="panel" style={{ display: "flex" }}>
+						{ GA.init() && <GA.RouteTracker /> }
 						<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
 						<LinkButton.Group widths="4">
 							<LinkButton to="/rules" className="noPadding">Rules</LinkButton>

src/utilities/google_analytics.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactGA from 'react-ga';
+import { Route } from 'react-router-dom';
+
+import auth from '../../auth.json';
+
+class GoogleAnalytics extends React.Component {
+  componentDidMount() {
+    this.logPageChange(
+      this.props.location.pathname,
+      this.props.location.search
+    );
+  }
+
+  componentDidUpdate({location: prevLocation}) {
+    const { location: { pathname, search } } = this.props;
+    const isDifferentPathname = pathname !== prevLocation.pathname;
+    const idDifferentSearch = search !== prevLocation.search;
+
+    if (isDifferentPathname || isDifferentSearch) {
+      this.logPageChange(pathname, search);
+    }
+  }
+
+  logPageChange(pathname, search = '') {
+    const page = pathname + search;
+    const { location } = window;
+    ReactGA.set({
+      page,
+      location: `${location.origin}${page}`,
+      ...this.props.options
+    });
+    ReactGA.pageview(page);
+  }
+
+  render() {
+    return null;
+  }
+}
+
+GoogleAnalytics.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+    search: PropTypes.string,
+  }).isRequired,
+  options: PropTypes.object
+}
+
+const RouteTracker = () =>
+  <Route component={GoogleAnalytics} />
+
+const init = (options = {}) => {
+  const env = auth.env || {};
+  const isGAEnabled = !!env.REACT_APP_GA_TRACKING_ID;
+
+  if (isGAEnabled) {
+    ReactGA.initialize(
+      env.REACT_APP_GA_TRACKING_ID, {
+        debug: env.REACT_APP_GA_DEBUG === 'true',
+        ...options
+      }
+    )
+  }
+
+  return isGAEnabled;
+}
+
+export default {
+  GoogleAnalytics,
+  RouteTracker,
+  init
+}
+
+