Add Privacy-First Analytics to Your SvelteKit App

SvelteKit apps are built to be fast. Then developers add Google Analytics and ship 45KB of tracking JavaScript that sets cookies, requires consent banners, and defeats the purpose of choosing Svelte in the first place.

Measure.events is 900 bytes, uses no cookies, requires no consent banners, and has an MCP server so your AI tools can query your traffic data directly. Here’s how to set it up in SvelteKit.

Basic Setup

Add the tracking script to your app.html (SvelteKit’s HTML template):

<!-- src/app.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  %sveltekit.head%
  <script
    defer
    data-site-key="YOUR_SITE_KEY"
    src="https://lets.measure.events/api/script/YOUR_SITE_KEY"
  ></script>
</head>
<body>
  %sveltekit.body%
</body>
</html>

This captures every page load automatically. For static sites built with adapter-static, this is all you need.

SvelteKit uses client-side routing after the initial page load. To track navigation between pages, use the afterNavigate lifecycle hook in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import { afterNavigate } from '$app/navigation'

  afterNavigate(() => {
    if (typeof window !== 'undefined' && window.measure) {
      window.measure.trackPageview()
    }
  })
</script>

<slot />

The afterNavigate hook fires after every client-side navigation, including back/forward browser navigation. This gives you accurate pageview counts for your SPA routes.

Custom Event Tracking

Track user interactions from any Svelte component:

<script>
  function handleSignup() {
    window.measure?.track('signup', { plan: 'pro' })
    // ... rest of signup logic
  }
</script>

<button on:click={handleSignup}>Sign Up</button>

For reusable tracking, create a utility:

// src/lib/analytics.js
export function track(event, data = {}) {
  if (typeof window !== 'undefined') {
    window.measure?.track(event, data)
  }
}

Server-Side Rendering

The tracking script in app.html only executes client-side (the defer attribute ensures this). No special SSR handling is needed. Measure.events doesn’t set cookies, so there’s no server-side cookie management to worry about either.

If you’re using SvelteKit’s +page.server.js load functions, analytics tracking happens purely on the client — your server functions don’t need to know about it.

Why Svelte Developers Switch from GA4

Performance alignment. You chose Svelte because it compiles to minimal JavaScript. GA4 adds 45KB+ of runtime JavaScript that can’t be compiled away. Measure.events adds 900 bytes externally loaded.

No cookie consent banners. Measure.events doesn’t use cookies or track PII. For EU users, this means no consent banner cluttering your carefully designed Svelte UI.

MCP server. Ask your AI coding tools “what pages are getting traffic?” and get answers from your real data. No other analytics tool does this. For Svelte developers using Cursor or Claude, this is a workflow integration, not just a dashboard.

Adapter Compatibility

Measure.events works with all SvelteKit adapters:

adapter-auto — works out of the box
adapter-static — perfect fit; script loads on every static page
adapter-node — works; script is client-side only
adapter-vercel / adapter-netlify — works; no server-side dependencies

Getting Started

Sign up at lets.measure.events
Add the script tag to src/app.html
Add afterNavigate tracking to +layout.svelte
Optional: set up the MCP server for AI-powered analytics queries

Setup time: 3 minutes. Bundle impact: zero (external script with defer).