Refine tracking

src/lib/components/ContactPanel.svelte

@@ -34,7 +34,8 @@
                         target="_blank"
                         rel="noopener noreferrer"
                         aria-describedby={link.description ? descriptionId : undefined}
-                        data-umami-event={`contact panel ${link.label} link`}
+                        data-umami-event="contact panel item"
+                        data-umami-event-label={link.label}
                     >
                         {#if link.icon}
                             <LinkIcon href={link.href} icon={link.icon} label={link.label} />

src/lib/components/Hero.svelte

@@ -35,7 +35,8 @@
                     contactOpen = true;
                     shareOpen = false;
                 }}
-                data-umami-event="header contact button"
+                data-umami-event="header button"
+                data-umami-event-label="contact"
             >
                 <IconContact size={20} />
             </button>
@@ -48,7 +49,8 @@
                 shareOpen = true;
                 contactOpen = false;
             }}
-            data-umami-event="header share button"
+            data-umami-event="header button"
+            data-umami-event-label="share"
         >
             <IconShare size={20} />
         </button>
@@ -100,7 +102,8 @@
                         contactOpen = true;
                         shareOpen = false;
                     }}
-                    data-umami-event="hero contact button"
+                    data-umami-event="hero card button"
+                    data-umami-event-label="contact"
                 >
                     <IconContact size={20} />
                     <span>Contact</span>
@@ -114,7 +117,8 @@
                     shareOpen = true;
                     contactOpen = false;
                 }}
-                data-umami-event="hero share button"
+                data-umami-event="hero card button"
+                data-umami-event-label="share"
             >
                 <IconShare size={20} />
                 <span>Share</span>

src/lib/components/Link.svelte

@@ -5,7 +5,14 @@
     let { href, icon, label, description }: ProcessedLink = $props();
 </script>
 
-<a {href} rel="noopener noreferrer" target="_blank" class="link" data-umami-event={`${label} link`}>
+<a
+    {href}
+    rel="noopener noreferrer"
+    target="_blank"
+    class="link"
+    data-umami-event={`link click`}
+    data-umami-event-label={label}
+>
     <span class="icon" aria-hidden="true">
         <LinkIcon {href} {icon} {label} />
     </span>

src/lib/components/Panel.svelte

@@ -64,6 +64,8 @@
                 aria-label="Close"
                 bind:this={closeBtnEl}
                 onclick={onclose}
+                data-umami-event="panel button"
+                data-umami-event-label="close"
             >
                 <span aria-hidden="true">×</span>
             </button>

src/lib/components/SharePanel.svelte

@@ -61,7 +61,8 @@
                 type="button"
                 class="panel-btn"
                 onclick={copyLink}
-                data-umami-event="share panel copy"
+                data-umami-event="share panel item"
+                data-umami-event-label="copy"
             >
                 <IconCopy size={20} />
                 {copied ? 'Copied!' : 'Copy link'}
@@ -72,7 +73,8 @@
                 onclick={onclose}
                 target="_blank"
                 rel="noopener noreferrer"
-                data-umami-event="share panel email link"
+                data-umami-event="share panel item"
+                data-umami-event-label="email"
             >
                 <IconEmail size={20} />
                 Email link
@@ -82,7 +84,8 @@
                     type="button"
                     class="panel-btn"
                     onclick={share}
-                    data-umami-event="share panel device share"
+                    data-umami-event="share panel item"
+                    data-umami-event-label="device share"
                 >
                     <IconShare size={20} />
                     Share…

src/lib/components/ThemeToggle.svelte

@@ -45,7 +45,8 @@
         aria-label="Close theme menu"
         tabindex="-1"
         onclick={() => (expanded = false)}
-        data-umami-event="theme toggle close"
+        data-umami-event="theme toggle button"
+        data-umami-event-label="close"
     ></button>
 {/if}
 
@@ -65,7 +66,8 @@
             aria-current={current === 'light' ? 'true' : undefined}
             title="Light"
             onclick={() => handleClick('light')}
-            data-umami-event="theme toggle light"
+            data-umami-event="theme toggle button"
+            data-umami-event-label="light"
         >
             <Sun size={24} />
         </button>
@@ -77,7 +79,8 @@
             aria-current={current === 'dark' ? 'true' : undefined}
             title="Dark"
             onclick={() => handleClick('dark')}
-            data-umami-event="theme toggle dark"
+            data-umami-event="theme toggle button"
+            data-umami-event-label="dark"
         >
             <Moon size={24} />
         </button>
@@ -89,7 +92,8 @@
             aria-current={current === 'auto' ? 'true' : undefined}
             title="Auto (system)"
             onclick={() => handleClick('auto')}
-            data-umami-event="theme toggle auto"
+            data-umami-event="theme toggle button"
+            data-umami-event-label="auto"
         >
             <SunMoon size={24} />
         </button>