How to add analytics to SvelteKit

SvelteKit renders every page through src/app.html, so the tracker sits there once. Client-side navigation through SvelteKit's router counts as pageviews.

No cookies, no banner ~3 KB script About 2 minutes

Before you start

Create a free Cool Analytics account and add your site. You'll get a site ID — replace YOUR_SITE_ID in the code below with it. The dashboard shows the snippet with your ID already filled in.

Install on SvelteKit

  1. 1Open src/app.html.
  2. 2Paste the snippet inside <head>, before %sveltekit.head%.
  3. 3Build and deploy. Navigation between pages is tracked automatically.
src/app.html
<head>
  <meta charset="utf-8" />
  <script defer src="https://coolanalytics.dev/hb.js" data-site="YOUR_SITE_ID"></script>
  %sveltekit.head%
</head>

Check that it works

Open your live site in a new tab, then open your Cool Analytics dashboard. Your visit appears on the live map within seconds — with the page you're on, where you came from and your browser.

Nothing showing up? Make sure you're looking at the published site (not a preview or editor), that an ad blocker isn't blocking the script, and that you're not testing on localhost.

Track signups, purchases and clicks

Pageviews, sources, countries and outbound link clicks are tracked automatically. For the moments that matter to you, send a custom event. Events named like a signup show up as signups, and events with an amount show up as revenue — on the live map and per traffic source.

custom events
// anywhere in your SvelteKit site's browser code
window.hb?.track("signup");

// with an amount, it shows up as revenue
window.hb?.track("purchase", { amount: 49 });

SvelteKit tips

  • Client-side route changes are tracked automatically — the script listens to the browser history, so there's no router hook to wire up.
  • Works the same with adapter-static, adapter-node, Vercel, Netlify or Cloudflare adapters — it's just HTML.
  • Visits from localhost are ignored so your own development doesn't count. To test locally, add data-dev="1" to the script tag for a moment — then remove it.

Want to keep your own visits out of the stats? Open your site once with #hb-ignore at the end of the URL. That browser is excluded until you visit with #hb-track.

SvelteKit analytics FAQ

Can I add it in +layout.svelte instead?+

You can, with <svelte:head>, but app.html is simpler and guarantees the script is on every page including error pages.

How do I track a form submission?+

In your submit handler or after a successful form action, call window.hb?.track('contact').

Does it work with plain Svelte (no Kit)?+

Yes — put the snippet in the index.html of your Vite + Svelte project.

See who's on your SvelteKit site right now.

One line of code. No cookies. 7 days free.