add umami events

src/components/DlRow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="row" class="dl-row">
+    <div v-if="row" class="dl-row" ref="container">
         <span class="label">{{ row.label }}:</span>
 
         <strapi-content class="content" :content="row.content" />
@@ -7,7 +7,31 @@
 </template>
 
 <script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
 const props = defineProps({ row: Object })
+
+const container = ref()
+const links = ref([])
+
+const onLinkClick = (e) => {
+    window?.umami?.track(`${props.row.label} link clicked`, {
+        linkText: e.target?.innerText,
+    })
+}
+
+onMounted(() => {
+    links.value = Array.from(container.value?.querySelectorAll('a'))
+
+    links.value.forEach((link) => {
+        link.addEventListener('click', onLinkClick)
+    })
+})
+onBeforeUnmount(() => {
+    links.value.forEach((link) => {
+        link.removeEventListener('click', onLinkClick)
+    })
+})
 </script>
 
 <style lang="scss">

src/components/site/Footer.vue

@@ -2,7 +2,7 @@
     <footer class="site-footer">
         <p class="p-small">&copy; {{ currentYear }} Nic Wands</p>
 
-        <button class="info-button" @click="infoWindowOpen = !infoWindowOpen">
+        <button class="info-button" @click="toggleInfoWindow">
             <img src="/images/info.gif" alt="Info" />
         </button>
 
@@ -42,6 +42,14 @@ onClickOutside(infoWindow, () => {
 const currentYear = computed(() => {
     return new Date().getFullYear()
 })
+
+const toggleInfoWindow = () => {
+    if (!infoWindowOpen.value) {
+        window?.umami?.track('Info Window')
+    }
+
+    infoWindowOpen.value = !infoWindowOpen.value
+}
 </script>
 
 <style lang="scss">