Added google analytics

package-lock.json

@@ -5678,6 +5678,11 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-ga": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.7.tgz",
+      "integrity": "sha512-UmATFaZpEQDO96KFjB5FRLcT6hFcwaxOmAJZnjrSiFN/msTqylq9G+z5Z8TYzN/dbamDTiWf92m6MnXXJkAivQ=="
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",

package.json

@@ -30,6 +30,7 @@
     "query-string": "^6.5.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-ga": "^2.5.7",
     "react-loadable": "^5.5.0",
     "react-markdown": "^4.0.8",
     "react-redux": "^7.0.3",

public/news/2019-05-30-01.md

@@ -0,0 +1,17 @@
+Update Log
+---
+_30 May 2019_
+
+So changes I'm making today:
+
+* Both incoming and outgoing combats are now visible.
+* Google analytics implemented.
+
+Known Bugs:
+
+* Someone's gold was negative. I have no idea how this happened.
+
+Today's goal:
+
+* Get some minor features working.
+

src/components/app.jsx

@@ -4,6 +4,7 @@ import Loadable from 'react-loadable';
 
 //other stuff
 import Footer from './panels/footer.jsx';
+import GA from './utilities/google_analytics.jsx';
 
 //lazy route loading (with error handling)
 const LazyRoute = (props) => {
@@ -53,6 +54,7 @@ export default class App extends React.Component {
 			<div className = 'central'>
 				<img className='banner' src={'/img/flag_scaled.png'} />
 				<BrowserRouter>
+					{ GA.init() && <GA.RouteTracker /> }
 					<Switch>
 						<LazyRoute exact path='/' component={() => import('./pages/home.jsx')} />
 						<LazyRoute path='/signup' component={() => import('./pages/signup.jsx')} />

src/components/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
+}
+
+