Analytics I think?

package-lock.json

@@ -10326,6 +10326,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-analytics": {
+      "version": "5.22.1",
+      "resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.22.1.tgz",
+      "integrity": "sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ=="
+    },
     "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

@@ -30,6 +30,7 @@
     "passport-local": "^1.0.0",
     "passport-local-mongoose": "^6.0.1",
     "vue": "~2.6",
+    "vue-analytics": "^5.22.1",
     "vue-router": "~3.0",
     "vuex": "^3.1.1"
   },

src/components/GeneratePage.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="container">
     <h1 class="title">Loddgenerator</h1>
-    <p class="subtext">
-      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
-    </p>
+    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -58,6 +56,7 @@
 </template>
 
 <script>
+import { page, event } from "vue-analytics";
 import Vipps from "@/ui/Vipps";
 import Banner from "@/ui/Banner";
 
@@ -86,9 +85,23 @@ export default {
       this.generateColors();
     }
   },
+  mounted() {
+    if (window.location.hostname == "localhost") {
+      return;
+    }
+    this.track();
+  },
   methods: {
     generateColors: function(event, time) {
       if (time == 5) {
+        if (window.location.hostname == "localhost") {
+          return;
+        }
+        this.$ga.event({
+          eventCategory: "Ballots",
+          eventAction: "Generate",
+          eventValue: JSON.stringify(this.colors)
+        });
         return;
       }
       if (time == undefined) {
@@ -158,6 +171,9 @@ export default {
       if (number == 4) {
         return "blue";
       }
+    },
+    track() {
+      this.$ga.page("/generate");
     }
   }
 };

src/components/VinlottisPage.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import { page, event } from "vue-analytics";
 import PurchaseGraph from "@/ui/PurchaseGraph";
 import TotalBought from "@/ui/TotalBought";
 import Highscore from "@/ui/Highscore";
@@ -45,6 +46,17 @@ export default {
     Banner,
     Wines,
     Vipps
+  },
+  mounted() {
+    if (window.location.hostname == "localhost") {
+      return;
+    }
+    this.track();
+  },
+  methods: {
+    track() {
+      this.$ga.page("/");
+    }
   }
 };
 </script>

src/ui/Wines.vue

@@ -3,22 +3,25 @@
     <h3>Topp viner</h3>
     <ol>
       <li v-for="wine in wines">
-        <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null"
-          >{{ wine.name }} - sett {{ wine.occurences }} ganger,
-          {{ wine.rating }} i rating</span
-        >
+        <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null">
+          {{ wine.name }} - sett {{ wine.occurences }} ganger,
+          {{ wine.rating }} i rating
+        </span>
         <a
           :href="wine.vivinoLink"
           v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
-          >{{ wine.name }} - sett {{ wine.occurences }} ganger,
-          {{ wine.rating }} i rating</a
+          @click="wineClick(wine)"
         >
+          {{ wine.name }} - sett {{ wine.occurences }} ganger,
+          {{ wine.rating }} i rating
+        </a>
       </li>
     </ol>
   </div>
 </template>
 
 <script>
+import { event } from "vue-analytics";
 export default {
   data() {
     return { wines: [] };
@@ -32,6 +35,18 @@ export default {
       .filter(wine => wine.name != null && wine.name != "")
       .sort((a, b) => (a.occurences > b.occurences ? -1 : 1));
     this.wines = response;
+  },
+  methods: {
+    wineClick: function(wine) {
+      if (window.location.hostname == "localhost") {
+        return;
+      }
+      this.$ga.event({
+        eventCategory: "Wines",
+        eventAction: "click",
+        eventValue: `${wine.name} - ${wine.vivinoLink}`
+      });
+    }
   }
 };
 </script>

src/vinlottis-init.js

@@ -2,8 +2,12 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import { routes } from "@/routes/vinlottisRouter";
 import Vinlottis from "@/Vinlottis";
+import VueAnalytics from "vue-analytics";
 
 Vue.use(VueRouter);
+Vue.use(VueAnalytics, {
+  id: "UA-156846886-1"
+});
 
 const router = new VueRouter({
   routes: routes