setup analytics for sponsor/partner links

Author: yyx990803

.vitepress/theme/components/SponsorsGroup.vue

@@ -21,12 +21,16 @@ onMounted(async () => {
     },
     { rootMargin: '0px 0px 300px 0px' }
   )
-  observer.observe(container)
+  observer.observe(container!)
   onUnmounted(() => observer.disconnect())
 
   // load data
   await load()
 })
+
+function track(sponsorID: string) {
+  fathom.trackGoal(`sponsor-click-${placement}-${sponsorID}`, 0)
+}
 </script>
 
 <template>
@@ -42,6 +46,7 @@ onMounted(async () => {
         :href="url"
         target="_blank"
         rel="sponsored noopener"
+        @click="track(name)"
       >
         <picture v-if="img.endsWith('png')">
           <source
@@ -57,6 +62,7 @@ onMounted(async () => {
       v-if="placement !== 'page' && tier !== 'special'"
       href="/sponsor/"
       class="sponsor-item action"
+      @click="track('INTEREST')"
       >Your logo</a
     >
   </div>

.vitepress/theme/components/sponsors.ts

@@ -2,6 +2,12 @@
 
 import { ref } from 'vue'
 
+declare global {
+  const fathom: {
+    trackGoal: (id: string, value: number) => any
+  }
+}
+
 export interface Sponsor {
   url: string
   img: string

src/partners/components/PartnerCard.vue

@@ -19,6 +19,10 @@ const {
   flipLogo,
   website
 } = data
+
+function track(id: string, linkType: string) {
+  fathom.trackGoal(`partner-click-${id}-${linkType}`, 0)
+}
 </script>
 
 <template>
@@ -29,7 +33,7 @@ const {
     :href="'/partners/' + normalizeName(name) + '.html'"
   >
     <div class="info">
-      <a :href="website.url" target="_blank">
+      <a :href="website.url" target="_blank" @click="track(name, 'logo')">
         <img
           class="logo dark"
           v-if="hero && flipLogo"

src/partners/components/PartnerPage.vue

@@ -13,9 +13,15 @@ const p = (data as Partner[]).find(
   (p) => normalizeName(p.name) === partner
 )!
 
+const { name, description, hiring, contact, website } = p
+
 function genMailLink(email: string) {
   return `mailto:${email}?subject=Looking for a Vue.js Partner`
 }
+
+function track(id: string, linkType: string) {
+  fathom.trackGoal(`partner-click-${id}-${linkType}`, 0)
+}
 </script>
 
 <template>
@@ -29,19 +35,30 @@ function genMailLink(email: string) {
     <PartnerCard hero page :data="p" />
 
     <div class="description">
-      <h2>About {{ p.name }}</h2>
-      <p v-for="desc in p.description" v-html="desc"></p>
+      <h2>About {{ name }}</h2>
+      <p v-for="desc in description" v-html="desc"></p>
     </div>
 
     <div class="actions">
-      <a :href="p.website.url" target="_blank">Visit Website</a>
-      <a class="contact" :href="genMailLink(p.contact)" target="_blank"
+      <a
+        :href="website.url"
+        target="_blank"
+        @click="track(name, 'website')"
+        >Visit Website</a
+      >
+      <a
+        class="contact"
+        :href="genMailLink(contact)"
+        target="_blank"
+        @click="track(name, 'tracking')"
         >Contact</a
       >
     </div>
 
-    <div class="hiring" v-if="p.hiring">
-      <a :href="p.hiring">{{ p.name }} is hiring!</a>
+    <div class="hiring" v-if="hiring">
+      <a :href="hiring" @click="track(name, 'hiring')"
+        >{{ name }} is hiring!</a
+      >
     </div>
   </div>
 </template>