SvelteKit

Before you begin: Create your Fathom account and add your website to get its site ID. Already have one? You’re ready to follow the steps below.

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. A huge thank you to Rick Cogley of eSolia for contributing the Svelte 5 update to this guide.

Setting up Fathom in SvelteKit

1. 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:

1. Install fathom-client:

npm install fathom-client

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

Note: Using Svelte 4? See the Svelte 4 example below.

<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  import { browser } from '$app/environment';
  import * as Fathom from 'fathom-client';

  let { children } = $props();

  onMount(() => {
    Fathom.load('YOUR-SITE-ID', {
      auto: false
    });
  });

  $effect(() => {
    if (browser) {
      const _pathname = $page.url.pathname;
      Fathom.trackPageview();
    }
  });
</script>

{@render children()}

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 onclick={handleClick}>Click me</button>

For events with monetary values (in cents):

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

Using Svelte 4?

If your project still uses Svelte 4, use the following layout setup and event syntax instead. The key differences are $: for reactivity (instead of $effect()), <slot /> for child content (instead of {@render children()}), and on:click for events (instead of onclick).

Layout setup (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
    });
  });

  $: $page.url.pathname, Fathom.trackPageview();
</script>

<slot />

Event tracking:

<script>
  import { trackEvent } from 'fathom-client';

  function handleClick() {
    trackEvent('Button Clicked');
  }
</script>

<button on:click={handleClick}>Click me</button>

Further customization

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

Ready to check your setup? Visit your published website, then open its Fathom dashboard to check for your first pageview. If it doesn’t appear, our installation troubleshooting guide will help.