Support home / Integrations

SvelteKit

Fathom Analytics works great with SvelteKit. Since SvelteKit is a single-page application framework, you'll want to track page views as users navigate between routes.

Setting up Fathom in SvelteKit

Add the Fathom script to your app.html file (located in the src folder). Add it just before the closing </head> tag:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR-SITE-ID" data-spa="auto" defer></script>

Note: Replace `YOUR-SITE-ID` with your actual Fathom site ID. You can find this in your Fathom site settings.

The data-spa="auto" attribute ensures Fathom properly tracks page views as users navigate between routes in your SvelteKit app.

Alternative: Using fathom-client

If you prefer more control over when and how Fathom loads, you can use the fathom-client package:

Install fathom-client:

npm install fathom-client

Create a layout component that initializes Fathom. In your src/routes/+layout.svelte:

<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  import * as Fathom from 'fathom-client';
 
  onMount(() => {
    Fathom.load('YOUR-SITE-ID', {
      auto: false
    });
  });
 
  // Track page views on route changes
  $: $page.url.pathname, Fathom.trackPageview();
</script>
 
<slot />

Tracking events

To track custom events, import and use the trackEvent function:

<script>
  import { trackEvent } from 'fathom-client';
  function handleClick() {
    trackEvent('Button Clicked');
  }
</script>
<button on:click={handleClick}>Click me</button>

For events with monetary values (in cents):

trackEvent('Purchase Completed', { _value: 9900 }); // $99.00

Further customization

To learn about all the options we offer, read our advanced documentation here.