Use Fathom Analytics with SvelteKit
Date: 2023-02-16 | sveltekit | fathom-analytics | tutorial
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
- Understand how to use Fathom Analytics with SvelteKit
- Copy / paste code snippets for integration
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>
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 IDor copy the
HTML Embed Code
If you have an existing site configured in Fathom, you can get your embed code by:
- Going to
- Navigate to the
- Find your site in the sites list and click its name
- Go to the
- Grab your
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:
+layout.svelte- to add it to the "template" for the entire subtree
svelte:head- to add it to the resulting HTML head section
So in your
layout file, this will look something like:
<svelte:head> <script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script> </svelte:head>
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
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.