Merge pull request #152 from WatWowMap/google-analytics

Google Analytics

Author: TurtIeSocks

README.md

@@ -212,6 +212,12 @@ ReactMap supports multiple domain config options. Under the "multiDomain" object
 }
 ```
 
+## Using the .env File
+- From the root of the directory `cp example.env .env`
+- `nano .env`
+- If you want to use Google Analytics, you can add your ID here. Only use debug mode during development.
+- You can also set a title for the map if you want it to load it up a bit faster compared to the default Map title.
+
 ## Credits
 
 - [MapJS](https://github.com/WatWowMap/MapJS)

example.env

@@ -0,0 +1,3 @@
+GOOGLE_ANALYTICS_ID=
+ANALYTICS_DEBUG_MODE=false
+TITLE=Map

package.json

@@ -32,6 +32,7 @@
     "copy-webpack-plugin": "^8.1.0",
     "css-loader": "^5.1.4",
     "css-minimizer-webpack-plugin": "^2.0.0",
+    "dotenv": "^10.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -88,8 +89,10 @@
     "ohbem": "^1.3.0",
     "passport": "^0.4.1",
     "passport-discord": "https://github.com/tonestrike/passport-discord.git",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-ga": "^3.3.0",
     "react-i18next": "^11.9.0",
     "react-leaflet": "3.1.0",
     "react-leaflet-markercluster": "3.0.0-rc1",

server/src/services/ui/clientOptions.js

@@ -62,7 +62,7 @@ module.exports = function clientOptions(perms) {
     clientValues[key] = {}
     Object.entries(options).forEach(option => {
       const [name, meta] = option
-      clientMenus[key][name].value = clientSideOptions[key][name] || meta.value
+      clientMenus[key][name].value = clientSideOptions[key][name] || meta.value || false
       clientMenus[key][name].disabled = !meta.perm.some(x => perms[x])
       clientValues[key][name] = meta.value
       if (meta.sub) clientMenus[key][name].sub = {}

src/components/App.jsx

@@ -14,6 +14,7 @@ import UIcons from '@services/Icons'
 import Fetch from '@services/Fetch'
 import Auth from './Auth'
 import Login from './Login'
+import RouteChangeTracker from './RouteChangeTracker'
 
 const client = new ApolloClient({
   uri: '/graphql',
@@ -63,7 +64,6 @@ export default function App() {
     }
     setServerSettings({ ...data, Icons })
   }
-
   useEffect(() => {
     getServerSettings()
   }, [])
@@ -72,6 +72,7 @@ export default function App() {
     <Suspense fallback="Loading translations...">
       <ApolloProvider client={client}>
         <Router>
+          {(serverSettings && serverSettings.googleAnalytics) && <RouteChangeTracker />}
           <Switch>
             <Route exact path="/">
               {serverSettings && <Auth serverSettings={serverSettings} />}

src/components/ConfigSettings.jsx

@@ -5,13 +5,15 @@ import extend from 'extend'
 import { ThemeProvider } from '@material-ui/styles'
 import { useMediaQuery } from '@material-ui/core'
 
+import Utility from '@services/Utility'
 import { useStore, useStatic } from '@hooks/useStore'
 import setTheme from '@assets/mui/theme'
 import Map from './Map'
 
 export default function ConfigSettings({
   serverSettings, match, paramLocation, paramZoom,
 }) {
+  Utility.analytics('Discord', serverSettings.user ? `${serverSettings.user.username} (${serverSettings.user.id})` : 'Not Logged In', 'Permissions', true)
   if (serverSettings.error) {
     return (
       <Redirect

src/components/Map.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import { TileLayer, useMap } from 'react-leaflet'
 
+import Utility from '@services/Utility'
 import { useStatic, useStore } from '@hooks/useStore'
 import Nav from './layout/Nav'
 import QueryData from './QueryData'
@@ -17,6 +18,8 @@ const userSettingsCategory = category => {
 }
 
 export default function Map({ serverSettings: { config: { map: config, tileServers }, Icons }, params }) {
+  Utility.analytics(window.location.pathname)
+
   const map = useMap()
   const filters = useStore(state => state.filters)
   const settings = useStore(state => state.settings)

src/components/QueryData.jsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useQuery } from '@apollo/client'
+
+import Utility from '@services/Utility'
 import Query from '@services/Query'
 import RobustTimeout from '@classes/RobustTimeout'
 import Clustering from './Clustering'
@@ -24,6 +26,7 @@ export default function QueryData({
   category, available, filters, staticFilters, staticUserSettings,
   userSettings, perms, Icons, userIcons,
 }) {
+  Utility.analytics('Data', `${category} being fetched`, category, true)
   const [timeout] = useState(() => new RobustTimeout(getPolling(category)))
 
   const trimFilters = useCallback(requestedFilters => {

src/components/RouteChangeTracker.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { withRouter } from 'react-router-dom'
+import ReactGA from 'react-ga'
+
+const RouteChangeTracker = ({ history }) => {
+  history.listen((location) => {
+    ReactGA.set({ page: location.pathname })
+    ReactGA.pageview(location.pathname)
+  })
+
+  return <div />
+}
+
+export default withRouter(RouteChangeTracker)

src/components/layout/Nav.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Dialog, useMediaQuery } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
 
+import Utility from '@services/Utility'
 import useStyles from '@hooks/useStyles'
 import { useStore, useStatic } from '@hooks/useStore'
 import FloatingBtn from './FloatingBtn'
@@ -42,6 +43,7 @@ export default function Nav({ map, setManualParams, Icons }) {
   }
 
   const toggleDialog = (open, category, type, filter) => (event) => {
+    Utility.analytics('Menu Toggle', `Open: ${open}`, `Category: ${category} Menu: ${type}`)
     if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
       return
     }