How to add analytics to SvelteKit

src/app.html is the HTML shell SvelteKit fills for every route — server-rendered, prerendered or SPA-mode. A tag there is present once on every page and is never re-inserted when the router swaps page content, which is exactly what an analytics script needs.

How to install VisitTrack on SvelteKit

1. 1

   Step 1: Copy your site id

   Copy your snippet from the VisitTrack install step or Settings → General. SITE_ID below is the placeholder.

2. 2

   Step 2: Add the tag to src/app.html

   Place it in <head>, before %sveltekit.head%.

   src/app.htmlCopy

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <link rel="icon" href="%sveltekit.assets%/favicon.png" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js"></script>
       %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
       <div style="display: contents">%sveltekit.body%</div>
     </body>
   </html>

3. 3

   Step 3: If you use kit.csp, allow visitrack.app

   SvelteKit can generate a Content-Security-Policy for you. Add the VisitTrack origin to script-src (the script) and connect-src (where it sends events).

   svelte.config.jsCopy

   const config = {
     kit: {
       csp: {
         directives: {
           "script-src": ["self", "https://visitrack.app"],
           "connect-src": ["self", "https://visitrack.app"],
         },
       },
     },
   };
   export default config;

4. 4

   Step 4: Build, deploy and browse

   vite dev runs on localhost, which is ignored. Deploy and click around the live site.

How to check VisitTrack is working on SvelteKit

1. Open the deployed site, then navigate between two routes.
2. VisitTrack's live view shows you within seconds; the Pages tab lists both routes.
3. DevTools → Network: one POST to visitrack.app/api/collect per navigation.

Does VisitTrack track SvelteKit page navigation?

SvelteKit's client router updates the URL with history.pushState (and replaceState for goto(url, { replaceState: true })). The tracker wraps both and listens for popstate, so links, goto() and back/forward are pageviews. Pageviews are keyed on the pathname, so updating only search params (?q=… in a search box) isn't counted again.

Link preloading (data-sveltekit-preload-data) fetches data on hover but doesn't change the URL, so it never creates a pageview.

How to track custom events and goals in SvelteKit

Call window.visitrack() in browser code — an event handler, onMount, or after a form action resolves with enhance. Use optional chaining, since server rendering has no window and a blocker may stop the script.

<script lang="ts">
  import { enhance } from "$app/forms";
</script>

<form method="POST" action="?/signup" use:enhance={() => {
  return async ({ result, update }) => {
    if (result.type === "success") window.visitrack?.("signup", { method: "email" });
    await update();
  };
}}>
  <input name="email" type="email" required />
  <button>Create account</button>
</form>

Plain clicks only need data-vt-goal="cta_click" on the element. With automatic events on (the default), any form submit also records a form_submit event named after the form's id, name or action.

Script options you might need on SvelteKit

All optional — add them to the same tag. Full reference: script configuration.

SvelteKit troubleshooting

Not on SvelteKit? See all 29 integration guides.