How do you forget the script?

src/lib/components/ContactPanel.svelte

@@ -34,6 +34,8 @@
                         target="_blank"
                         rel="noopener noreferrer"
                         aria-describedby={link.description ? descriptionId : undefined}
+                        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,6 +35,8 @@
                     contactOpen = true;
                     shareOpen = false;
                 }}
+                data-umami-event="header button"
+                data-umami-event-label="contact"
             >
                 <IconContact size={20} />
             </button>
@@ -47,6 +49,8 @@
                 shareOpen = true;
                 contactOpen = false;
             }}
+            data-umami-event="header button"
+            data-umami-event-label="share"
         >
             <IconShare size={20} />
         </button>
@@ -98,6 +102,8 @@
                         contactOpen = true;
                         shareOpen = false;
                     }}
+                    data-umami-event="hero card button"
+                    data-umami-event-label="contact"
                 >
                     <IconContact size={20} />
                     <span>Contact</span>
@@ -111,6 +117,8 @@
                     shareOpen = true;
                     contactOpen = false;
                 }}
+                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">
+<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

@@ -57,7 +57,13 @@
                     />
                 </div>
             {/if}
-            <button type="button" class="panel-btn" onclick={copyLink}>
+            <button
+                type="button"
+                class="panel-btn"
+                onclick={copyLink}
+                data-umami-event="share panel item"
+                data-umami-event-label="copy"
+            >
                 <IconCopy size={20} />
                 {copied ? 'Copied!' : 'Copy link'}
             </button>
@@ -67,12 +73,20 @@
                 onclick={onclose}
                 target="_blank"
                 rel="noopener noreferrer"
+                data-umami-event="share panel item"
+                data-umami-event-label="email"
             >
                 <IconEmail size={20} />
                 Email link
             </a>
             {#if canShare}
-                <button type="button" class="panel-btn" onclick={share}>
+                <button
+                    type="button"
+                    class="panel-btn"
+                    onclick={share}
+                    data-umami-event="share panel item"
+                    data-umami-event-label="device share"
+                >
                     <IconShare size={20} />
                     Share…
                 </button>

src/lib/components/ThemeToggle.svelte

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

src/lib/config.ts

@@ -2,6 +2,8 @@
  * App config: own-property hostnames for UTM attribution, variant hostnames, GA IDs.
  */
 
+import { ContentVariant } from './data/constants';
+
 export const OWN_PROPERTY_HOSTS = [
     'mifi.ventures',
     'cal.mifi.ventures',
@@ -9,20 +11,25 @@ export const OWN_PROPERTY_HOSTS = [
     'mifi.bio',
 ] as const;
 
-export const VARIANT_HOSTS: Record<'dev' | 'bio', string> = {
+export const VARIANT_HOSTS: Record<ContentVariant, string> = {
-    dev: 'mifi.dev',
+    [ContentVariant.DEV]: 'mifi.dev',
-    bio: 'mifi.bio',
+    [ContentVariant.BIO]: 'mifi.bio',
 };
 
-export const GA_MEASUREMENT_IDS: Record<'dev' | 'bio', string> = {
+export const GA_MEASUREMENT_IDS: Record<ContentVariant, string> = {
-    dev: 'G-P8V832WDM8',
+    [ContentVariant.DEV]: 'G-P8V832WDM8',
-    bio: 'G-885B0KYWZ1',
+    [ContentVariant.BIO]: 'G-885B0KYWZ1',
+};
+
+export const UMAMI_MEASUREMENT_IDS: Record<ContentVariant, string> = {
+    [ContentVariant.DEV]: 'ac7e751b-4ce3-49f2-80e0-f430b292b72a',
+    [ContentVariant.BIO]: 'cf44669d-10c1-4982-ad79-282aed4237e5',
 };
 
 /** theme-color meta values per variant (match tokens-{variant}.css --color-bg) */
-export const THEME_COLORS: Record<'dev' | 'bio', { light: string; dark: string }> = {
+export const THEME_COLORS: Record<ContentVariant, { light: string; dark: string }> = {
-    dev: { light: '#f5f4f8', dark: '#131118' }, // hsl(260 20% 98%) / hsl(260 18% 8%)
+    [ContentVariant.DEV]: { light: '#f5f4f8', dark: '#131118' }, // hsl(260 20% 98%) / hsl(260 18% 8%)
-    bio: { light: '#f4f6f9', dark: '#111318' }, // hsl(220 22% 98%) / hsl(220 18% 8%)
+    [ContentVariant.BIO]: { light: '#f4f6f9', dark: '#111318' }, // hsl(220 22% 98%) / hsl(220 18% 8%)
 };
 
 export const UTM_MEDIUM = 'link';

src/routes/+layout.server.ts

@@ -1,5 +1,10 @@
 import contentData from '$lib/data/links.json';
-import { VARIANT_HOSTS, GA_MEASUREMENT_IDS, THEME_COLORS } from '$lib/config';
+import {
+    VARIANT_HOSTS,
+    GA_MEASUREMENT_IDS,
+    THEME_COLORS,
+    UMAMI_MEASUREMENT_IDS,
+} from '$lib/config';
 import type { Site, ContentData, ProcessedLink } from '$lib/data/types';
 import type { LayoutServerLoad } from './$types';
 import { ContentVariant, HeroLayout } from '$lib/data/constants';
@@ -18,6 +23,7 @@ export type LayoutServerDataOut = {
     };
     variant: string;
     gaMeasurementId: string;
+    umamiMeasurementId: string;
     /** theme-color meta values for current variant */
     themeColorLight: string;
     themeColorDark: string;
@@ -67,6 +73,7 @@ export const load: LayoutServerLoad<LayoutServerDataOut> = (): LayoutServerDataO
         links: { sections },
         variant,
         gaMeasurementId: GA_MEASUREMENT_IDS[variant],
+        umamiMeasurementId: UMAMI_MEASUREMENT_IDS[variant],
         themeColorLight: themeColors.light,
         themeColorDark: themeColors.dark,
     };

src/routes/+layout.svelte

@@ -40,6 +40,11 @@
     <!-- Google tag (gtag.js): ID passed via data-ga-id for CSP (no inline script) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id={data.gaMeasurementId}"></script>
     <script defer src="/assets/js/ga-init.js" data-ga-id={data.gaMeasurementId}></script>
+    <script
+        defer
+        src="https://analytics.mifi.holdings/script.js"
+        data-website-id={data.umamiMeasurementId}
+    ></script>
 
     <link rel="stylesheet" href="/assets/tokens-{data.variant}.css" />
 
@@ -94,3 +99,11 @@
 </header>
 {@render children()}
 <Footer />
+<img
+    src="https://analytics.mifi.holdings/p/wQ9GYnLIg"
+    alt=""
+    width="1"
+    height="1"
+    role="presentation"
+    loading="eager"
+/>

src/routes/__tests__/layout.server.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { load } from '../+layout.server';
+import { UMAMI_MEASUREMENT_IDS } from '$lib/config';
 import { ContentVariant } from '$lib/data/constants';
 import type { ContentData } from '$lib/data/types';
 
@@ -95,7 +96,9 @@ describe('+layout.server', () => {
     it('gaMeasurementId matches variant', () => {
         process.env.CONTENT_VARIANT = ContentVariant.DEV;
         expect(load().gaMeasurementId).toMatch(/^G-/);
+        expect(load().umamiMeasurementId).toBe(UMAMI_MEASUREMENT_IDS[ContentVariant.DEV]);
         process.env.CONTENT_VARIANT = ContentVariant.BIO;
         expect(load().gaMeasurementId).toMatch(/^G-/);
+        expect(load().umamiMeasurementId).toBe(UMAMI_MEASUREMENT_IDS[ContentVariant.BIO]);
     });
 });

src/routes/__tests__/layout.test.ts

@@ -15,9 +15,12 @@ describe('+layout (LayoutData)', () => {
             links: { sections: [] },
             variant: 'dev',
             gaMeasurementId: 'G-xxx',
+            umamiMeasurementId: 'UM-xxx',
         };
         expect(mockData.site).toHaveProperty('title');
         expect(mockData.site).toHaveProperty('url');
+        expect(mockData).toHaveProperty('umamiMeasurementId');
+        expect(mockData).toHaveProperty('gaMeasurementId');
         expect(mockData).toHaveProperty('variant');
         expect(mockData.links).toHaveProperty('sections');
     });