Add initial support for Google Analytics

conf/configuration.go

@@ -32,6 +32,7 @@ type configOptions struct {
 	CoverArtPriority string
 	CoverJpegQuality int
 	UIWelcomeMessage string
+	GATrackingID     string
 
 	// DevFlags. These are used to enable/disable debugging and incomplete features
 	DevLogSourceLine           bool
@@ -81,6 +82,7 @@ func init() {
 	viper.SetDefault("coverartpriority", "embedded, cover.*, folder.*, front.*")
 	viper.SetDefault("coverjpegquality", 75)
 	viper.SetDefault("uiwelcomemessage", "")
+	viper.SetDefault("gatrackingid", "")
 
 	// DevFlags. These are used to enable/disable debugging and incomplete features
 	viper.SetDefault("devlogsourceline", false)

server/app/serve_index.go

@@ -33,6 +33,7 @@ func ServeIndex(ds model.DataStore, fs http.FileSystem) http.HandlerFunc {
 			"loginBackgroundURL":      policy.Sanitize(conf.Server.UILoginBackgroundURL),
 			"welcomeMessage":          policy.Sanitize(conf.Server.UIWelcomeMessage),
 			"enableTranscodingConfig": conf.Server.EnableTranscodingConfig,
+			"gaTrackingId":            conf.Server.GATrackingID,
 		}
 		j, err := json.Marshal(appConfig)
 		if err != nil {

server/app/serve_index_test.go

@@ -103,6 +103,17 @@ var _ = Describe("ServeIndex", func() {
 		Expect(config).To(HaveKeyWithValue("enableTranscodingConfig", true))
 	})
 
+	It("sets the gaTrackingId", func() {
+		conf.Server.GATrackingID = "UA-12345"
+		r := httptest.NewRequest("GET", "/index.html", nil)
+		w := httptest.NewRecorder()
+
+		ServeIndex(ds, fs)(w, r)
+
+		config := extractAppConfig(w.Body.String())
+		Expect(config).To(HaveKeyWithValue("gaTrackingId", "UA-12345"))
+	})
+
 	It("sets the version", func() {
 		r := httptest.NewRequest("GET", "/index.html", nil)
 		w := httptest.NewRecorder()

ui/package-lock.json

@@ -13621,6 +13621,11 @@
         "@babel/runtime": "^7.4.5"
       }
     },
+    "react-ga": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.0.0.tgz",
+      "integrity": "sha512-IKqqCtSMe0IfSRNvbHAiwXwIXbuza4VvHvB/2N3hEiMFGSjv8fNI6obPH6bkDdIjDpwzbUqKs8895OxBckWJ2g=="
+    },
     "react-icon-base": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-icon-base/-/react-icon-base-2.1.0.tgz",

ui/package.json

@@ -16,6 +16,7 @@
     "react-admin": "^3.6.1",
     "react-dom": "^16.13.1",
     "react-drag-listview": "^0.1.7",
+    "react-ga": "^3.0.0",
     "react-jinke-music-player": "^4.13.1",
     "react-measure": "^2.3.0",
     "react-redux": "^7.2.0",

ui/src/App.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
 import { createHashHistory } from 'history'
 import { Admin, Resource } from 'react-admin'
@@ -19,9 +20,18 @@ import themeReducer from './personal/themeReducer'
 import { addToPlaylistDialogReducer } from './dialogs/dialogState'
 import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
+import config from './config'
 
 const history = createHashHistory()
 
+if (config.gaTrackingId) {
+  ReactGA.initialize(config.gaTrackingId)
+  history.listen((location) => {
+    ReactGA.pageview(location.pathname)
+  })
+  ReactGA.pageview(window.location.pathname)
+}
+
 const App = () => (
   <Provider
     store={createAdminStore({

ui/src/config.js

@@ -8,6 +8,7 @@ const defaultConfig = {
   loginBackgroundURL: 'https://source.unsplash.com/random/1600x900?music',
   enableTranscodingConfig: true,
   welcomeMessage: '',
+  gaTrackingId: '',
 }
 
 let config