feat: plausible track phone and calendly links (#742)

voorhoede · Sep 8, 2023 · 98615ac · 98615ac
1 parent 8d77eee
commit 98615ac
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/app-button/app-button.vue b/src/components/app-button/app-button.vue
@@ -16,6 +16,7 @@
     :href="to"
     target="_blank"
     rel="noreferrer noopener"
+    @click="trackExternalLink(to)"
   >
     <span v-if="primary || small">{{ label }}</span>
     <template v-else>{{ label }} &rarr;</template>
@@ -71,6 +72,13 @@
         }
       },
     },
+    methods:{
+      trackExternalLink(url) {
+        const hostname = new URL(url).hostname
+        if (url.startsWith('tel:')) useTrackEvent('Click on phone number');
+        if (hostname === 'calendly.com') useTrackEvent('Schedule a meeting');
+      }
+    }
   }
 </script>
 

diff --git a/src/components/app-footer/app-footer.vue b/src/components/app-footer/app-footer.vue
@@ -46,14 +46,14 @@
             <a
               :href="`tel:${ cleanedPhoneNumber }`"
               class="app-footer__link"
-              @click="trackLink('phone')"
+              @click="trackPhoneLink()"
             >{{ app.phoneNumber }}</a>
           </li>
           <li class="app-footer__list-item">
             <a
               :href="`mailto:${ app.emailAddress }`"
               class="app-footer__link"
-              @click="trackLink('email')"
+              @click="trackEmailLink()"
             >{{ app.emailAddress }}</a>
           </li>
         </ul>
@@ -242,8 +242,11 @@ export default {
       })
       this.observer.observe(contactElement)
     },
-    trackLink (linkType) {
-      useTrackEvent(`Click on ${linkType}`);
+    trackPhoneLink () {
+      useTrackEvent('Click on phone number');
+    },
+    trackEmailLink () {
+      useTrackEvent('Click on email');
     },
     unobserveContact () {
       this.observer.unobserve(this.$refs.contact)

diff --git a/src/pages/[language]/contact/index.vue b/src/pages/[language]/contact/index.vue
@@ -109,7 +109,11 @@
   }
 
   function trackLink(contactType) {
-    useTrackEvent(`Click on ${contactType}`);
+    if (contactType === 'phone') {
+      useTrackEvent('Click on phone number');
+    } else {
+      useTrackEvent(`Click on ${contactType}`);
+    }
   }
 </script>