Add GA events

5 files changed, 29 insertions, 10 deletions

diff --git a/src/InstallNotification.vue b/src/InstallNotification.vue
index 22e7a8c..a60ec9c 100644
--- a/src/InstallNotification.vue
+++ b/src/InstallNotification.vue
@@ -29,15 +29,25 @@ export default Vue.component('install-notification', {
   },
   methods: {
     promptInstall: function(p) {
+      this.$ga.event('PWA', 'available');
       p.preventDefault();
       this.deferredPrompt = p;
+      this.deferredPrompt.userChoice.then((choiceResult) => {
+        this.$ga.event('PWA', 'popup', choiceResult.outcome);
+        this.deferredPrompt = null;
+      });
+    },
+    installed: function(e) {
+      this.$ga.event('PWA', 'installed');
     },
   },
   created: function() {
     window.addEventListener('beforeinstallprompt', this.promptInstall);
+    window.addEventListener('appinstalled', this.installed);
   },
   destroyed: function() {
     window.removeEventListener('beforeinstallprompt', this.promptInstall);
+    window.removeEventListener('appinstalled', this.installed);
   },
 });
 </script>
diff --git a/src/IntroBox.vue b/src/IntroBox.vue
index 918a6de..d146f2f 100644
--- a/src/IntroBox.vue
+++ b/src/IntroBox.vue
@@ -13,7 +13,7 @@
         The data can be imprecise and can be contrary to your personal experience.
       </p>
       <p>
-        This site shares visitor data with Google Analytics and Google AdSense which store cookies. If you do not want that, you can <a href="https://tools.google.com/dlpage/gaoptout">use the Google Analytics opt out service</a> and <a href="http://www.youronlinechoices.com/">opt out of targeted advertisements</a>.
+        This site shares visitor data with Google Analytics and Google AdSense which store cookies. If you do not want that, you can <a @click="this.$ga.disable()">opt out of Google Analytics</a> and <a href="http://www.youronlinechoices.com/">opt out of targeted advertisements</a>.
       </p>
     </div>
   </div>
diff --git a/src/RouterParamMixin.js b/src/RouterParamMixin.js
index 62f5cd9..6172d55 100644
--- a/src/RouterParamMixin.js
+++ b/src/RouterParamMixin.js
@@ -5,6 +5,7 @@ export default {
         return this.$route.query.actor || '*Kensei*';
       },
       set: function(value) {
+        this.$ga.event('Hero', 'update', value);
         const query = Object.assign({}, this.$route.query, { actor: value });
         this.$router.push({ query });
       },
@@ -14,6 +15,7 @@ export default {
         return this.$route.query.mode || 'blitz_pvp_ranked';
       },
       set: function(value) {
+        this.$ga.event('Mode', 'update', value);
         const query = Object.assign({}, this.$route.query, { mode: value });
         this.$router.push({ query });
       },
diff --git a/src/index.html b/src/index.html
index d4e5348..c0e4ea1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,13 +18,6 @@
         enable_page_level_ads: true
       });
     </script>
-    <script async src="//www.googletagmanager.com/gtag/js?id=UA-118868480-1"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-118868480-1');
-    </script>
     <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.3.54/css/materialdesignicons.min.css">
     <link rel="manifest" href="/dist/manifest.json">
     <link rel="shortcut icon" type="image/x-icon" href="/dist/assets/TalentGrab_square.jpg">
diff --git a/src/index.js b/src/index.js
index 18eb719..9f511cf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import Buefy from 'buefy'
 import 'buefy/lib/buefy.css'
 import Ads from 'vue-google-adsense';
+import VueAnalytics from 'vue-analytics'
 
 import App from './App.vue';
 import ModeTab from './ModeTab.vue';
@@ -12,8 +13,8 @@ import ModeTab from './ModeTab.vue';
 
 Vue.use(VueRouter);
 Vue.use(Buefy);
-Vue.use(require('vue-script2'))
-Vue.use(Ads.Adsense)
+Vue.use(require('vue-script2'));
+Vue.use(Ads.Adsense);
 
 const router = new VueRouter({
   routes: [ {
@@ -23,14 +24,27 @@ const router = new VueRouter({
   } ]
 });
 
+Vue.use(VueAnalytics, {
+  id: 'UA-118868480-1',
+  router,
+  debug: {
+    sendHitTask: process.env.NODE_ENV === 'production',
+    enabled: process.env.NODE_ENV !== 'production',
+  }
+});
+
 new Vue({
   router,
   el: '#app',
   render: h => h(App),
   mounted: function() {
+    if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
+      this.$ga.event('PWA', 'started');
+    }
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/service-worker.js').then((registration) => {
         if (typeof registration.update == 'function') {
+          this.$ga.event('PWA', 'update');
           registration.update();
         }
       });