Analytics for SvelteKit: A Quick Setup Guide

SvelteKit is a server-side rendering framework built on Svelte. Adding analytics requires handling both initial page loads and client-side navigation — the same SPA challenge as Next.js or Nuxt.

SvelteKit basics: how routing works

SvelteKit uses file-based routing. When a visitor navigates between pages, SvelteKit intercepts the navigation and updates the DOM without triggering a full page load.

The upshot: you need a tracker that captures soft navigations, not only the first full load. Prefer the official @antlytics/svelte component or the hosted tracker.js — both patch the History API and listen for popstate.

Option 1: `@antlytics/svelte` component (recommended)

Install the package and add <Analytics /> to your root layout:

npm install @antlytics/svelte
# or
pnpm add @antlytics/svelte

<!-- src/routes/+layout.svelte -->
<script>
  import { Analytics } from '@antlytics/svelte'
</script>

<Analytics trackingId="YOUR_TRACKING_ID" />
<slot />

Replace YOUR_TRACKING_ID with your actual UUID from Settings → Tracking Snippet in your Antlytics dashboard.

The component loads the hosted tracker.js (SPA navigations, 30-minute idle visits, sticky UTMs, engagement). No afterNavigate wiring or hand-rolled ingest calls required.

Optional apiHost prop: use your own domain when you set up a first-party proxy. See the SvelteKit docs.

Option 2: Hosted script in `app.html`

SvelteKit has an app.html file in src/ that is the HTML shell for every page. Add the hosted tracker there:

<!-- src/app.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
    <script
      defer
      src="https://www.antlytics.com/tracker.js"
      data-tracking-id="YOUR_TRACKING_ID"
      data-api-host="https://www.antlytics.com"
    ></script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

The hosted tracker patches history.pushState / replaceState and listens for popstate, so SvelteKit client-side navigations are captured without a custom afterNavigate hook. See Quick start.

Verifying it works

Start your SvelteKit dev server (npm run dev or pnpm dev).
Open the browser dev tools → Network tab.
Navigate between pages.
Look for the tracker.js script load and POST requests to api/ingest/pageview on each navigation.
Check your Antlytics dashboard for new pageviews.

SvelteKit 2 specifics

If you are on SvelteKit 2 (current stable), Option 1 and Option 2 both work the same way as on SvelteKit 1.

FAQ

Does this work with SSR enabled? Yes. The component and hosted tracker only run in the browser. Analytics code does not execute during server-side rendering.

Does this work with SvelteKit's prerender option? Yes. Prerendered pages are static HTML served to the browser, where the tracker executes normally.

Can I use the first-party proxy with SvelteKit? Yes. Set apiHost on <Analytics /> (or data-api-host on the script tag) to your domain and add a +server.js route that forwards to Antlytics. See First-party proxy.

What about Svelte without SvelteKit? Plain Svelte (without SvelteKit) has no built-in routing. Add the hosted tracker to your HTML shell. History API patches cover client-side routers; full page loads are tracked on each load.

Should I post manually to /api/ingest/pageview from afterNavigate? No. Prefer @antlytics/svelte or the hosted tracker.js so you get History patches, engagement, and the same behaviour as every other official install.