Add Google Analytics

Added Google Analytics to latest dev branch

resources/scripts/components/App.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
+import ReactGA from 'react-ga';
 import { hot } from 'react-hot-loader/root';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
@@ -48,6 +49,11 @@ const App = () => {
         store.getActions().settings.setSettings(SiteConfiguration!);
     }
 
+    useEffect(() => {
+        ReactGA.initialize(SiteConfiguration!.analytics);
+        ReactGA.pageview(location.pathname);
+    }, []);
+
     return (
         <>
             <GlobalStylesheet/>

resources/scripts/routers/AuthenticationRouter.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import ReactGA from 'react-ga';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import LoginContainer from '@/components/auth/LoginContainer';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
@@ -6,17 +7,23 @@ import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 import NotFound from '@/components/screens/NotFound';
 
-export default ({ location, history, match }: RouteComponentProps) => (
-    <div className={'pt-8 xl:pt-32'}>
-        <Switch location={location}>
-            <Route path={`${match.path}/login`} component={LoginContainer} exact/>
-            <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
-            <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
-            <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
-            <Route path={`${match.path}/checkpoint`}/>
-            <Route path={'*'}>
-                <NotFound onBack={() => history.push('/auth/login')}/>
-            </Route>
-        </Switch>
-    </div>
-);
+export default ({ location, history, match }: RouteComponentProps) => {
+    useEffect(() => {
+        ReactGA.pageview(location.pathname);
+    }, [ location.pathname ]);
+
+    return (
+        <div className={'pt-8 xl:pt-32'}>
+            <Switch location={location}>
+                <Route path={`${match.path}/login`} component={LoginContainer} exact/>
+                <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
+                <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
+                <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
+                <Route path={`${match.path}/checkpoint`} />
+                <Route path={'*'}>
+                    <NotFound onBack={() => history.push('/auth/login')} />
+                </Route>
+            </Switch>
+        </div>
+    );
+};

resources/scripts/routers/DashboardRouter.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
+import ReactGA from 'react-ga';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
@@ -8,24 +9,30 @@ import NotFound from '@/components/screens/NotFound';
 import TransitionRouter from '@/TransitionRouter';
 import SubNavigation from '@/components/elements/SubNavigation';
 
-export default ({ location }: RouteComponentProps) => (
-    <>
-        <NavigationBar/>
-        {location.pathname.startsWith('/account') &&
-        <SubNavigation>
-            <div>
-                <NavLink to={'/account'} exact>Settings</NavLink>
-                <NavLink to={'/account/api'}>API Credentials</NavLink>
-            </div>
-        </SubNavigation>
-        }
-        <TransitionRouter>
-            <Switch location={location}>
-                <Route path={'/'} component={DashboardContainer} exact/>
-                <Route path={'/account'} component={AccountOverviewContainer} exact/>
-                <Route path={'/account/api'} component={AccountApiContainer} exact/>
-                <Route path={'*'} component={NotFound}/>
-            </Switch>
-        </TransitionRouter>
-    </>
-);
+export default ({ location }: RouteComponentProps) => {
+    useEffect(() => {
+        ReactGA.pageview(location.pathname);
+    }, [ location.pathname ]);
+
+    return (
+        <>
+            <NavigationBar />
+            {location.pathname.startsWith('/account') &&
+                <SubNavigation>
+                    <div>
+                        <NavLink to={'/account'} exact>Settings</NavLink>
+                        <NavLink to={'/account/api'}>API Credentials</NavLink>
+                    </div>
+                </SubNavigation>
+            }
+            <TransitionRouter>
+                <Switch location={location}>
+                    <Route path={'/'} component={DashboardContainer} exact />
+                    <Route path={'/account'} component={AccountOverviewContainer} exact/>
+                    <Route path={'/account/api'} component={AccountApiContainer} exact/>
+                    <Route path={'*'} component={NotFound} />
+                </Switch>
+            </TransitionRouter>
+        </>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import ReactGA from 'react-ga';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import NavigationBar from '@/components/NavigationBar';
 import ServerConsole from '@/components/server/ServerConsole';
@@ -60,6 +61,10 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
         };
     }, [ match.params.id ]);
 
+    useEffect(() => {
+        ReactGA.pageview(location.pathname);
+    }, [ location.pathname ]);
+
     return (
         <React.Fragment key={'server-router'}>
             <NavigationBar/>

resources/scripts/state/settings.ts

@@ -7,6 +7,7 @@ export interface SiteSettings {
         enabled: boolean;
         siteKey: string;
     };
+    analytics: string;
 }
 
 export interface SettingsStore {

resources/views/admin/settings/index.blade.php

@@ -31,6 +31,13 @@
                                     <p class="text-muted"><small>This is the name that is used throughout the panel and in emails sent to clients.</small></p>
                                 </div>
                             </div>
+                            <div class="form-group col-md-4">
+                                <label class="control-label">Google Analytics</label>
+                                <div>
+                                    <input type="text" class="form-control" name="app:analytics" value="{{ old('app:analytics', config('app.analytics')) }}" />
+                                    <p class="text-muted"><small>This is your Google Analytics Tracking ID, Ex. UA-123723645-2</small></p>
+                                </div>
+                            </div>
                             <div class="form-group col-md-4">
                                 <label class="control-label">Require 2-Factor Authentication</label>
                                 <div>