Analytics for SvelteKit

SvelteKit compiles away the framework and ships minimal JavaScript. BetterMeter matches that efficiency — under 1KB, no cookies, no build plugin required. Add the tracker to app.html and analytics are live in seconds.

Option 1: app.html (recommended)

The simplest integration. SvelteKit's app.html is the shell template for every page. Add the script once and it covers your entire app.

src/app.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
    <script
      defer
      data-site="your-domain.com"
      src="https://bettermeter.com/api/script"
    ></script>
  </body>
</html>

Option 2: +layout.svelte

If you prefer component-level control, use Svelte's <svelte:head> in your root layout. This approach lets you conditionally load the tracker based on environment or user preference.

src/routes/+layout.svelte

<svelte:head>
  <script
    defer
    data-site="your-domain.com"
    src="https://bettermeter.com/api/script"
  ></script>
</svelte:head>

<!-- Svelte 5 -->
{@render children()}

<!-- Svelte 4: use <slot /> instead -->

Works with every adapter

01 adapter-auto — Deploys to Vercel, Netlify, or Cloudflare. BetterMeter works on all of them.
02 adapter-node — Self-hosted Node.js server. Tracker loads from your domain.
03 adapter-static — Fully static output. The script tag is in every generated HTML file.
04 adapter-cloudflare — Edge deployment. Sub-millisecond page loads, tracked accurately.

File-Based Routes

Clean URL analytics

SPA Navigation

History API tracked

Any Adapter

Vercel, CF, Node, static

No Cookies

Privacy-first

AI Detection

See AI-driven visits

Bot Tracking

Crawlers separated

Analytics for React →

Documentation

Read the Docs →