fix google analytics

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"

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>

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);
   }

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')

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>

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"