SvelteKit Analytics Without Cookies

In SvelteKit, every page loads from src/app.html. Add the Fusionaly script there once. Fusionaly then counts every page, also the pages that the SvelteKit router opens without a reload.

Before you start

You need a Fusionaly server, with your site's domain added as a website. Fusionaly takes events only from the domains you added. See Installation.

In the examples, replace analytics.example.com with the domain of your Fusionaly server.

Add the script

1. Open src/app.html.

2. Add the script to <head>, before %sveltekit.head%:

   src/app.html

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <script defer src="https://analytics.example.com/y/api/v1/sdk.js"></script>
       %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
       <div style="display: contents">%sveltekit.body%</div>
     </body>
   </html>

Page changes

The SvelteKit router changes pages with history.pushState, and Fusionaly counts a page view each time the path changes. A change to only the query string or the hash is not a new page view. So a filter that only changes ?sort= in the URL is not counted as a page.

Track events

Fusionaly counts page views and button clicks without any setup. To give an event your own name, use the data-fusionaly-event-name attribute. See Tracking.

Add the attribute in a component:

<a href="/pricing" data-fusionaly-event-name="pricing_clicked">Pricing</a>

For data that only the browser knows, call the SDK from a handler:

<script lang="ts">
  let { format = "csv" } = $props();
</script>

<button onclick={() => window.Fusionaly?.sendCustomEvent("report_exported", { format })}>
  Export
</button>

With TypeScript, declare the SDK in a .d.ts file that your tsconfig.json includes:

fusionaly.d.ts

declare global {
  interface Window {
    Fusionaly?: {
      sendCustomEvent(name: string, metadata?: Record<string, unknown>): void;
      sendPageView(): void;
    };
  }
}

export {};

Check that it works

1. Open your site in a normal browser window. Fusionaly skips automated browsers, such as Playwright, and browsers that send Do Not Track.
2. In the developer tools, open the network tab, and find a POST request to /x/api/v1/events. A 403 status means that your site's domain is not added as a website.
3. Open your Fusionaly dashboard. The visit shows up within about a minute.

Notes

• src/app.html has no conditions, so the script also loads in vite dev. Fusionaly refuses events from localhost, so your own tests never count.
• If you turn on kit.csp, add the domain of your Fusionaly server to script-src and connect-src.

Next steps

• Revenue Tracking: count purchases and their amounts.
• Section Tracking: count the sections that visitors see.
• Exclude your own visits: stop counting your own browser.
• AI Clients (MCP): ask Claude Code, Codex, or Cursor about your traffic.

Guides for other frameworks: Next.js, React, Astro, Nuxt, WordPress, Shopify, Webflow, Ghost, Hugo, and the generic guide.