docs(website): fix pageview and download tracking

Author: antonreshetov

docs/website/.vitepress/components/global/AssetsDownload.vue

@@ -1,5 +1,18 @@
 <script setup lang="ts">
+import { event } from 'vue-gtag'
 import assets from '../../_data/assets.json'
+
+function trackDownload(platform: string, variant: string, url: string) {
+  if (!import.meta.env.VITE_GA)
+    return
+
+  event('download_click', {
+    platform,
+    variant,
+    link_url: url,
+    transport_type: 'beacon',
+  })
+}
 </script>
 
 <template>
@@ -9,6 +22,7 @@ import assets from '../../_data/assets.json'
     :href="assets.macM1"
     theme="brand"
     text="Download for Apple Silicon"
+    @click="trackDownload('macos', 'arm64', assets.macM1)"
   />
 
   <p>macOS 11.0+</p>
@@ -17,6 +31,7 @@ import assets from '../../_data/assets.json'
     :href="assets.mac"
     theme="brand"
     text="Download for Intel"
+    @click="trackDownload('macos', 'intel', assets.mac)"
   />
 
   <p>macOS 10.13+</p>
@@ -28,12 +43,14 @@ import assets from '../../_data/assets.json'
       :href="assets.win"
       theme="brand"
       text="Download for Windows"
+      @click="trackDownload('windows', 'installer', assets.win)"
     />
 
     <VPButton
       :href="assets.winPortable"
       theme="brand"
       text="Download for Windows (portable)"
+      @click="trackDownload('windows', 'portable', assets.winPortable)"
     />
   </div>
 
@@ -45,6 +62,7 @@ import assets from '../../_data/assets.json'
     :href="assets.linux"
     theme="brand"
     text="Download for Linux"
+    @click="trackDownload('linux', 'appimage', assets.linux)"
   />
 
   <p>Ubuntu</p>

docs/website/.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import type { EnhanceAppContext } from 'vitepress'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
 import DefaultTheme from 'vitepress/theme'
 import { h, watch } from 'vue'
+import { configure, pageview } from 'vue-gtag'
 import AppLink from '../components/global/AppLink.vue'
 import AppVersion from '../components/global/AppVersion.vue'
 import AssetsDownload from '../components/global/AssetsDownload.vue'
@@ -10,21 +11,21 @@ import SidebarSponsors from '../components/sponsors/SidebarSponsors.vue'
 import './styles.css'
 
 function initGtag(context: EnhanceAppContext) {
-  if (import.meta.env.SSR)
+  if (import.meta.env.SSR || !import.meta.env.VITE_GA)
     return
 
-  import('vue-gtag').then(({ configure, pageview }) => {
-    configure({
-      tagId: import.meta.env.VITE_GA,
-    })
-
-    watch(
-      () => context.router.route.data.relativePath,
-      () => {
-        pageview(context.router.route.path)
-      },
-    )
+  configure({
+    tagId: import.meta.env.VITE_GA,
+    config: { send_page_view: false },
   })
+
+  watch(
+    () => context.router.route.data.relativePath,
+    () => {
+      pageview(context.router.route.path)
+    },
+    { immediate: true, flush: 'post' },
+  )
 }
 
 export default {