feat: trigger web analytics on leaf download event (#49)

* feat: trigger web analytics on leaf download event

* docs: add comment

* format

Author: wling-art

.vitepress/theme/components/download/components/BuildCard.vue

@@ -3,11 +3,18 @@ import { ApiBuild, getBuildLink } from "../downloadApi";
 import { Icon } from "@iconify/vue";
 import { useDateFormat, useTimeAgo } from "@vueuse/core";
 import { getVerStatus } from "../versionStatus";
+import { trackDownloadEvent } from "../umami";
 
 const props = defineProps<{
   build: ApiBuild;
   version: string;
 }>();
+
+function onDownloadClick() {
+  trackDownloadEvent({
+    version: props.version,
+  });
+}
 </script>
 
 <template>
@@ -32,7 +39,7 @@ const props = defineProps<{
       ({{ useTimeAgo(build.time) }})
     </span>
 
-    <a class="file" :href="getBuildLink(version, build)">
+    <a class="file" :href="getBuildLink(version, build)" @click="onDownloadClick">
       <Icon icon="lucide:file-box" class="file-icon" />
       {{ build.downloads.primary.name }}
     </a>

.vitepress/theme/components/download/components/LatestBuild.vue

@@ -2,13 +2,20 @@
 import { ApiBuild, getBuildLink } from "../downloadApi";
 import { useTranslation } from "../useTranslation";
 import { getVerStatus } from "../versionStatus";
+import { trackDownloadEvent } from "../umami";
 
 const props = defineProps<{
   build: ApiBuild;
   version: string;
 }>();
 
 const { t } = useTranslation();
+
+function onDownloadClick() {
+  trackDownloadEvent({
+    version: props.version,
+  });
+}
 </script>
 
 <template>
@@ -17,7 +24,10 @@ const { t } = useTranslation();
       {{ build.build }}
     </div>
 
-    <a :class="['download-button', 'status-button', getVerStatus(version).cssClass]" :href="getBuildLink(version, build)"
+    <a
+      :class="['download-button', 'status-button', getVerStatus(version).cssClass]"
+      :href="getBuildLink(version, build)"
+      @click="onDownloadClick"
       >{{ t("actions.download") }} Leaf {{ version }}</a
     >
   </div>

.vitepress/theme/components/download/old/OldDownloadPage.vue

@@ -7,6 +7,7 @@ import { branchesToVers, getLatestStable, getVerInfo, Version } from "../version
 import Markdown from "../../Markdown.vue";
 import { useData } from "vitepress";
 import VersionInfoCard from "../components/VersionInfoCard.vue";
+import { trackDownloadEvent } from "../umami";
 
 // States
 const versions = ref<Array<Version>>([]);
@@ -227,6 +228,14 @@ function refreshVersionInfo() {
   }
 }
 watch(selectedVersion, refreshVersionInfo);
+
+function trackOldDownloadClick() {
+  if (!selectedVersion.value || !downloadAsset.value) return;
+
+  trackDownloadEvent({
+    version: selectedVersion.value.name,
+  });
+}
 </script>
 
 <template>
@@ -380,7 +389,11 @@ watch(selectedVersion, refreshVersionInfo);
               </div>
 
               <div class="dl-download-actions">
-                <a :href="downloadAsset.browser_download_url" class="dl-button primary download">
+                <a
+                  :href="downloadAsset.browser_download_url"
+                  class="dl-button primary download"
+                  @click="trackOldDownloadClick"
+                >
                   <Icon icon="lucide:download" />
                   <span>{{ t("actions.download") }}</span>
                 </a>

.vitepress/theme/components/download/umami.ts

@@ -0,0 +1,26 @@
+/**
+ * Umami tracking function type definition.
+ * @see https://v2.umami.is/docs/tracker-functions#event-data
+ */
+type UmamiTrack = (eventName: string, data?: Record<string, unknown>) => void;
+
+type UmamiWindow = Window & {
+    umami?: {
+        track?: UmamiTrack;
+    };
+};
+
+interface DownloadEventData {
+    version: string;
+}
+
+export function trackDownloadEvent(data: DownloadEventData): void {
+    if (typeof window === "undefined") return;
+
+    const track = (window as UmamiWindow).umami?.track;
+    if (!track) return;
+
+    track("leaf-download", {
+        version: data.version
+    });
+}

package.json

@@ -1,5 +1,6 @@
 {
     "devDependencies": {
+        "@types/semver": "^7.7.1",
         "@vueuse/core": "^14.2.1",
         "prettier": "3.8.1",
         "sass": "^1.98.0",