SvelteKit

The Satsu component from satsu-analytics/svelte starts the tracker on mount. Render it once in the root layout and it follows client-side navigation.

Setup

Run init

It signs you in, creates the site, writes the environment variable and adds the component to src/routes/+layout.svelte (creating it when missing).

npx satsu-analytics init

Skip to Verify it works if init finished. To do it by hand, continue with the next steps.

Or install the package yourself

npm install satsu-analytics

Set the site ID

Create a site in the dashboard (Sites → your site → install) and put its ID into .env:

sh
PUBLIC_SATSU_SITE=YOUR_ID

The component falls back to PUBLIC_SATSU_SITE when you don't pass site.

Add the component

In src/routes/+layout.svelte:

svelte
<script lang="ts">
  import Satsu from "satsu-analytics/svelte";
 
  let { children } = $props();
</script>
 
{@render children()}
<Satsu />

Verify it works

Run npm run dev. On localhost the tracker itself is not loaded; the component sends one dev ping per page load so the install check can confirm the setup, and it is never counted or shown in your stats. After you deploy, follow Verify it works to see the first real visit.

Next: track custom events and type them from your goals. Prefer no package? Put the script tag in src/app.html.