add umami analytics loader

This commit is contained in:
Elijah Duffy
2025-12-16 17:21:40 -08:00
parent 086326326c
commit 1ead8431a7
3 changed files with 91 additions and 1 deletions

View File

@@ -55,5 +55,8 @@
},
"keywords": [
"svelte"
]
],
"dependencies": {
"@types/umami": "^2.10.1"
}
}

9
pnpm-lock.yaml generated
View File

@@ -7,6 +7,10 @@ settings:
importers:
.:
dependencies:
'@types/umami':
specifier: ^2.10.1
version: 2.10.1
devDependencies:
'@eslint/compat':
specifier: ^1.4.0
@@ -480,6 +484,9 @@ packages:
'@types/node@24.10.4':
resolution: {integrity: sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==}
'@types/umami@2.10.1':
resolution: {integrity: sha512-CvOEMq+BFOUXj8yciq4hPsdOt0o9KBg5jQXnF1FrdOMKZMxJiwryyZNLa9Ud2NVO6nXSwU22YMKR3E+Xhbo+DA==}
'@typescript-eslint/eslint-plugin@8.50.0':
resolution: {integrity: sha512-O7QnmOXYKVtPrfYzMolrCTfkezCJS9+ljLdKW/+DCvRsc3UAz+sbH6Xcsv7p30+0OwUbeWfUDAQE0vpabZ3QLg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1451,6 +1458,8 @@ snapshots:
dependencies:
undici-types: 7.16.0
'@types/umami@2.10.1': {}
'@typescript-eslint/eslint-plugin@8.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.2)(typescript@5.9.3))(eslint@9.39.2)(typescript@5.9.3)':
dependencies:
'@eslint-community/regexpp': 4.12.2

78
src/lib/Umami.svelte Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts">
import { dev } from '$app/environment';
import { onMount } from 'svelte';
import type { TrackingManager } from './tracking.svelte.ts';
interface Props {
/**
* The URL of the Umami instance. For example: https://umami.example.com.
* Do not include a trailing slash, the script path will be appended
* automatically (default: /script.js).
*/
umamiURL: string;
/** Website ID to associate tracking data as configured in Umami */
websiteID: string;
/**
* Tracking manager to handle user consent for tracking. If omitted,
* tracking will always be enabled.
*/
trackingManager?: TrackingManager;
}
let { umamiURL, websiteID, trackingManager }: Props = $props();
const consentGranted = $derived(trackingManager ? trackingManager.consent === true : true);
// Development overrides to prevent dirty analytics
const devConsoleTag = $derived(`[dev][consent: ${consentGranted ? 'granted' : 'revoked'}]`);
const devOverride = {
track: (...args: unknown[]): Promise<string> | undefined => {
console.log(`${devConsoleTag}: Track called with:`, ...args);
return undefined;
},
identify: (...args: unknown[]): Promise<void> => {
console.log(`${devConsoleTag}: Identify called with:`, ...args);
return Promise.resolve();
}
};
// No-consent quiet override
const noConsentOverride = {
track: (..._args: unknown[]): Promise<string> | undefined => {
return undefined;
},
identify: (..._args: unknown[]): Promise<void> => {
return Promise.resolve();
}
};
// If a tracking manager is provided, use it to manage consent state
$effect(() => {
if (trackingManager) {
trackingManager.createService({
onConsent: () => {
return true;
},
onRevoke: () => {
window.umami = noConsentOverride;
return true;
}
});
}
});
if (dev) console.log('[dev]: Umami tracking disabled');
onMount(() => {
if (dev) {
// In development mode, override the umami global object
window.umami = devOverride;
}
});
</script>
<svelte:head>
{#if !dev && consentGranted}
<script defer src="{umamiURL}/script.js" data-website-id={websiteID}></script>
{/if}
</svelte:head>