Adding gtag / google analytics tracking into Vue app (w/auto tracking from…

Adding gtag / google analytics tracking into Vue app (w/auto tracking from router). Added details to README

.env.development

-VUE_APP_OPENSHOT_API_URL=https://cloud.openshot.org
\ No newline at end of file
+VUE_APP_OPENSHOT_API_URL=https://cloud.openshot.org
+VUE_APP_GA_ID=UA-4381101-5
\ No newline at end of file

.env.production

-VUE_APP_OPENSHOT_API_URL=https://cloud.openshot.org
\ No newline at end of file
+VUE_APP_OPENSHOT_API_URL=https://cloud.openshot.org
+VUE_APP_GA_ID=UA-4381101-5
\ No newline at end of file

README.md

@@ -89,4 +89,10 @@ npm run lint
 ```
 
 ### Customize configuration
+Configuration variables are stored in `.env` and `vue.config.js` files.
+
+- `VUE_APP_GA_ID`: Global site tag (gtag.js) for tracking on Google Analytics
+- `VUE_APP_OPENSHOT_API_URL`: URL of your own OpenShot Cloud API instance
+- `publicPath`: Relative path where this app will be served by your production web server
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

package-lock.json

@@ -5648,9 +5648,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -11333,6 +11333,11 @@
         }
       }
     },
+    "vue-gtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-2.0.1.tgz",
+      "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -22,6 +22,7 @@
     "core-js": "^3.6.5",
     "uuid": "^8.3.2",
     "vue": "^3.0.0",
+    "vue-gtag": "^2.0.1",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },

src/main.js

@@ -2,8 +2,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
 import "bootstrap/dist/css/bootstrap.min.css"
 import "bootstrap"
+import VueGtag from "vue-gtag";
+
+// Global site tag (gtag.js)
+const ga_config = {
+    config: { id: process.env.VUE_APP_GA_ID }
+}
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(VueGtag, ga_config, router).use(store).use(router).mount('#app')