From 1b430fba481a2daffb13b7eb4157320b79f2c56e Mon Sep 17 00:00:00 2001
From: Bart Mesuere <Bart.Mesuere@UGent.be>
Date: Fri, 28 Jul 2023 11:38:46 +0000
Subject: [PATCH] fix google analytics

---
 dashboard/package.json                   | 1 +
 dashboard/src/components/StationCard.vue | 6 +++---
 dashboard/src/components/StationsMap.vue | 8 +++++---
 dashboard/src/main.ts                    | 6 ++++++
 dashboard/src/views/Dashboard.vue        | 5 +++--
 dashboard/yarn.lock                      | 5 +++++
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 014a6f53..d0b62e14 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -15,6 +15,7 @@
     "roboto-fontface": "*",
     "topojson-client": "^3.1.0",
     "vue": "^3.2.0",
+    "vue-gtag-next": "^1.14.0",
     "vue-router": "^4.0.0",
     "vuetify": "^3.0.0",
     "webfontloader": "^1.0.0"
diff --git a/dashboard/src/components/StationCard.vue b/dashboard/src/components/StationCard.vue
index 9560ffe4..4a598560 100644
--- a/dashboard/src/components/StationCard.vue
+++ b/dashboard/src/components/StationCard.vue
@@ -89,7 +89,7 @@ import { computed, PropType } from 'vue';
 
 import { useVlinderStore } from '@/store/app';
 
-//import { event } from 'vue-gtag';
+import { useGtag } from 'vue-gtag-next';
 
 import LandUseGraph from './LandUseGraph.vue';
 
@@ -117,8 +117,8 @@ const activeProperties = computed<WeatherProperty[]>(() => {
 });
 
 function removeFromList() {
-  // TODO
-  //event('station_deselect', { event_category: 'stations', value: props.station.id });
+  const { event } = useGtag()
+  event('station_deselect', { event_category: 'stations', value: props.station.id });
   vlinderStore.deselectStationById(props.station.id);
 }
 </script>
diff --git a/dashboard/src/components/StationsMap.vue b/dashboard/src/components/StationsMap.vue
index 72562229..29a2fa74 100644
--- a/dashboard/src/components/StationsMap.vue
+++ b/dashboard/src/components/StationsMap.vue
@@ -34,7 +34,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 
 import { useVlinderStore } from '@/store/app';
 
-//import { event } from 'vue-gtag';
+import { useGtag } from 'vue-gtag-next';
 
 import TooltipCard from './TooltipCard.vue';
 
@@ -73,7 +73,8 @@ onMounted(async () => {
 
 // adds or removes a station to the list of selected stations
 function toggleStation (stationId: string): void {
-  //event('station_toggle', { event_category: 'stations', value: stationId });
+  const { event } = useGtag();
+  event('station_toggle', { event_category: 'stations', value: stationId });
   vlinderStore.toggleStationById(stationId);
 }
 
@@ -86,7 +87,8 @@ watch(selectedStations, () => {
 
 // when a different property is selected, we have to manually update the D3 map
 watch(selectedProperty, () => {
-  //event('property_change', { event_category: 'properties', value: selectedProperty.value });
+  const { event } = useGtag();
+  event('property_change', { event_category: 'properties', value: selectedProperty.value });
   if (map) {
     map.updateProperty(selectedProperty.value);
   }
diff --git a/dashboard/src/main.ts b/dashboard/src/main.ts
index 67faeb0a..1b74ac10 100644
--- a/dashboard/src/main.ts
+++ b/dashboard/src/main.ts
@@ -13,12 +13,18 @@ import { createApp } from 'vue'
 // Plugins
 import { registerPlugins } from '@/plugins'
 
+import VueGtag from "vue-gtag-next";
+
 import router from '@/router'
 
 const app = createApp(App)
 
 registerPlugins(app)
 
+app.use(VueGtag, {
+  property: { id: 'G-YY7WRV394E' },
+})
+
 app.use(router)
 
 app.mount('#app')
diff --git a/dashboard/src/views/Dashboard.vue b/dashboard/src/views/Dashboard.vue
index 98df980d..dc24b9db 100644
--- a/dashboard/src/views/Dashboard.vue
+++ b/dashboard/src/views/Dashboard.vue
@@ -64,6 +64,7 @@ import StationSelector from '@/components/StationSelector.vue';
 import StationCard from '@/components/StationCard.vue';
 import StationsMap from '@/components/StationsMap.vue';
 
+import { useGtag } from 'vue-gtag-next';
 
 import { weatherProperties as wp } from '../app/weatherProperties';
 
@@ -154,8 +155,8 @@ function scheduleFetch(f: Function): void {
   }, 60000);
 }
 function removeFromList (id: string): void {
-  //TODO
-  //event('station_deselect', { event_category: 'stations', value: id });
+  const { event } = useGtag()
+  event('station_deselect', { event_category: 'stations', value: id });
   vlinderStore.deselectStationById(id);
 }
 </script>
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index adb0ac93..d66a61df 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -1992,6 +1992,11 @@ vue-eslint-parser@^9.1.1, vue-eslint-parser@^9.3.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-gtag-next@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/vue-gtag-next/-/vue-gtag-next-1.14.0.tgz#793aef0b90dff4213b9f3a79827cd99b06e678dd"
+  integrity sha512-iJl+cOG2GU5NuxqzSSIpt03WVOvZqyKB9TOy7d55KiuvRklcnb2nlqxW5B/a3/sbIt7fla+XEkRyMCcoz0zAHw==
+
 vue-router@^4.0.0:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.4.tgz#382467a7e2923e6a85f015d081e1508052c191b9"