In this post we'll walk through how to use Fathom Analytics with a SvelteKit website.

• Problem: SvelteKit and Fathom Analytics are new, have little documentation
• Solution: Document common workflows
• Results:
  • Understand how to use Fathom Analytics with SvelteKit
  • Copy / paste code snippets for integration

Fathom Analytics

Fathom Analytics is a simple, privacy-first web analytics service.

I like it because it's:

• Simple and Usable (way easier than Google Analytics)
• Privacy-first (so we can skip the awful cookie popups eveywhere and avoid legal trouble)
• Relatively cheap ($15 / 100k data points / month)

I like the service a lot and have been migrating my sites away from Google Analytics over to Fathom - more on that in a future post.

Want to try Fathom Analytics? Get $10 off your first Fathom purchase

Fathom + SvelteKit

Now that we understand what Fathom is, let's move to using Fathom Analytics in our SvelteKit site.

Get your Fathom Analytics embed code

We'll use a Fathom Analytics embed to on our site to enable analytics every time a webpage is loaded. Each webpage has a unique ID that makes sure this data is logged to the right place so you can see it in your dashboard.

This HTML script code looks something like this:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>

Which loads a tiny bit of JavaScript into your webpage so it can log a user visited your page.

Now we just need to find YOUR_SITE_ID so Fathom logs this to the correct place.

If you're configuring a new site in Fathom, the easiest way to get your embed code is:

• Create a new site in the Fathom dashboard
• Add a Site name, click Next
• Grab your Site ID or copy the HTML Embed Code

If you have an existing site configured in Fathom, you can get your embed code by:

• Going to Settings
• Navigate to the Sites tab
• Find your site in the sites list and click its name
• Go to the Script settings tab
• Grab your Embed code

Embed Fathom Analytics in SvelteKit

Now that we have our HTML embed code, we can implement it in our SvelteKit site.

For most analytics usecases we'll want to have analytics on every page. SvelteKit's layout pages provide a template that every other page in the subtree use. This makes it a great place to implement analytics.

So for this implementation, we'll use:

• File: +layout.svelte - to add it to the "template" for the entire subtree
• Component: svelte:head - to add it to the resulting HTML head section

So in your layout file, this will look something like:

routes/+layout.svelte

<svelte:head>
    <script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>
</svelte:head>

Remember: Replace YOUR_SITE_ID with your Fathom Analytics site id.

Testing Fathom Analytics + SvelteKit

Theoretically this should work, but it's always good to test what we've built.

To test our Fathom Analytics integratoin with SvelteKit, we can:

• Run your SvelteKit site
• Navigate to it (usually on localhost)
• Verify: Fathom Analytics logs a page view for your site

Next Steps

You should now have analytics powered by Fathom working on your SvelteKit site!

If you'd like to get a full, runnable example project (including all source code) for a SvelteKit site with working Fathom integration, join the HAMINIONs membership. HAMINIONs get full source code access to all code examples I build and share in my tutorials.

If you want to try Fathom Analytics - Use this link to get $10 off your first Fathom bill.