Add Google Analytics

Added Google Analytics to latest dev branch

app/Http/Requests/Admin/Settings/BaseSettingsFormRequest.php

@@ -19,6 +19,7 @@ class BaseSettingsFormRequest extends AdminFormRequest
             'app:name' => 'required|string|max:255',
             'pterodactyl:auth:2fa_required' => 'required|integer|in:0,1,2',
             'app:locale' => ['required', 'string', Rule::in(array_keys($this->getAvailableLanguages()))],
+            'app:analytics' => 'nullable|string',
         ];
     }
 
@@ -31,6 +32,7 @@ class BaseSettingsFormRequest extends AdminFormRequest
             'app:name' => 'Company Name',
             'pterodactyl:auth:2fa_required' => 'Require 2-Factor Authentication',
             'app:locale' => 'Default Language',
+            'app:analytics' => 'Google Analytics',
         ];
     }
 }

app/Http/ViewComposers/AssetComposer.php

@@ -37,6 +37,7 @@ class AssetComposer
                 'enabled' => config('recaptcha.enabled', false),
                 'siteKey' => config('recaptcha.website_key') ?? '',
             ],
+            'analytics' => config('app.analytics') ?? '',
         ]);
     }
 }

app/Providers/SettingsServiceProvider.php

@@ -21,6 +21,7 @@ class SettingsServiceProvider extends ServiceProvider
     protected $keys = [
         'app:name',
         'app:locale',
+        'app:analytics',
         'recaptcha:enabled',
         'recaptcha:secret_key',
         'recaptcha:website_key',

package.json

@@ -23,6 +23,7 @@
         "path": "^0.12.7",
         "query-string": "^6.7.0",
         "react": "^16.13.1",
+        "react-ga": "^3.1.2",
         "react-dom": "npm:@hot-loader/react-dom",
         "react-fast-compare": "^3.2.0",
         "react-google-recaptcha": "^2.0.1",

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) => (
+export default ({ location, history, match }: RouteComponentProps) => {
-    <div className={'pt-8 xl:pt-32'}>
+    useEffect(() => {
-        <Switch location={location}>
+        ReactGA.pageview(location.pathname);
-            <Route path={`${match.path}/login`} component={LoginContainer} exact/>
+    }, [ location.pathname ]);
-            <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
+
-            <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
+    return (
-            <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
+        <div className={'pt-8 xl:pt-32'}>
-            <Route path={`${match.path}/checkpoint`}/>
+            <Switch location={location}>
-            <Route path={'*'}>
+                <Route path={`${match.path}/login`} component={LoginContainer} exact/>
-                <NotFound onBack={() => history.push('/auth/login')}/>
+                <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
-            </Route>
+                <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
-        </Switch>
+                <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
-    </div>
+                <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) => (
+export default ({ location }: RouteComponentProps) => {
-    <>
+    useEffect(() => {
-        <NavigationBar/>
+        ReactGA.pageview(location.pathname);
-        {location.pathname.startsWith('/account') &&
+    }, [ location.pathname ]);
-        <SubNavigation>
+
-            <div>
+    return (
-                <NavLink to={'/account'} exact>Settings</NavLink>
+        <>
-                <NavLink to={'/account/api'}>API Credentials</NavLink>
+            <NavigationBar />
-            </div>
+            {location.pathname.startsWith('/account') &&
-        </SubNavigation>
+                <SubNavigation>
-        }
+                    <div>
-        <TransitionRouter>
+                        <NavLink to={'/account'} exact>Settings</NavLink>
-            <Switch location={location}>
+                        <NavLink to={'/account/api'}>API Credentials</NavLink>
-                <Route path={'/'} component={DashboardContainer} exact/>
+                    </div>
-                <Route path={'/account'} component={AccountOverviewContainer} exact/>
+                </SubNavigation>
-                <Route path={'/account/api'} component={AccountApiContainer} exact/>
+            }
-                <Route path={'*'} component={NotFound}/>
+            <TransitionRouter>
-            </Switch>
+                <Switch location={location}>
-        </TransitionRouter>
+                    <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>

yarn.lock

@@ -5569,6 +5569,11 @@ react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-ga@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.1.2.tgz#e13f211c51a2e5c401ea69cf094b9501fe3c51ce"
+  integrity sha512-OJrMqaHEHbodm+XsnjA6ISBEHTwvpFrxco65mctzl/v3CASMSLSyUkFqz9yYrPDKGBUfNQzKCjuMJwctjlWBbw==
+
 react-google-recaptcha@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"