Fathom is a popular privacy-first web analytics provider. Custom analytics events allow you to track custom data and get more out of your web analytics. In this post we'll walk through how to log Fathom analytics events from your SvelteKit website.

• Problem: Sparse examples for Fathom + SvelteKit
• Solution: Document example integrations
• Results:
  • Overview of how Fathom + SvelteKit integrate
  • Example Fathom analytics event integration
  • Links to full source code

Fathom Analytics

Fathom Analytics is my favorite web analytics provider and my default for all projects in 2023.

I like Fathom because it's:

• Simple
• Privacy-first
• Cheap

Thus I believe it's a Simple Scalable System and I like those.

I've talked extensively about Fathom previously so I'll stop here and link to those for further reading:

• Use Fathom Analytics with SvelteKit
• Fathom Analytics - Dashboard Walkthrough

If you're interested in trying out Fathom, use this link to get $10 off Fathom Analytics.

Analytics Events

Analytics Events are typically custom events that you send to your analytics provider. This is useful for adding extra context / information about your visitors to better understand how your website is performing.

An example usecase is if you're selling things you probably want to know what pages are converting best. You probably have a lot of traffic that hits different pages on your site, but being able to cut into the traffic that ends up buying things allows you to analyze the cut of traffic that is likely most valuable to your business.

CreationCycle sell page with Fathom Analytics event logging

This is exactly what I do on Creation Cycle - my product cycle template site. I log analytics events when someone navigates to the checkout page which allows me to see what pages / sources (Google, YouTube, etc) are bringing in the most leads to inform my marketing strategy going forward.

Fathom dashboard screenshot - analytics events for CreationCycle

Fathom allows you to easily filter your data by a given event, making it very easy to perform these kinds of analyses.

For more on Fathom and how to filter analyses, see: Fathom Analytics - Dashboard Walkthrough

Logging Analytics Events from SvelteKit

Now we'll log our Fathom Analytics event from SvelteKit.

Overview

Fathom already logs a lot of core information for us by simply including it on our webpage - visitors, time on site, referrers, etc. So typically when we want to log an analytics event, it's to track something that we care about that Fathom doesn't track by default (like the checkout example we talked about previously).

In this walkthrough, we're going to emit a Fathom event when a button is clicked on our SvelteKit site. This is a common case and also is easily generalizable to other usecases (like element clicks, page loads, etc) so should be a useful example.

Prerequisites

• Fathom in SvelteKit

We're not going to go in-depth into how to load Fathom into SvelteKit in this post though we will show all the code necessary to do so. For more information on this, see: Use Fathom Analytics with SvelteKit.

Fathom + SvelteKit

Get the full example project source code by becoming a HAMINIONs member.

For our example, we're just going to use the root routes.

• routes/+layout.svelte - The root template for our site
• routes/+page.svelte - The root route for our site MYURL/

Fathom and SvelteKit example site screenshot

+layout.svelte - Download Fathom script on every page.

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

<main>
	(Layout)
	<slot />
</main>

• The +layout.svelte serves as a template for all other pages in this folder tree. It's common to include analytics scripts here so you get analytics on every page.
• YOUR_SITE_ID is a placeholder for the actual Fathom site ID you want to log to. You can find this in Settings.

+page.svelte - Creating the page and logging on button click.

<script lang="ts">
	const onButtonClickHandler = () => {
		try {
			console.log("Logging to Fathom")
			// @ts-ignore - non-type-safe usage of lib
			fathom.trackGoal("YOUR_EVENT_ID", 0)
		} catch(e) {
			console.warn("Failed to log to Fathom!")
		}
	}
</script>

<section>
	<div>
		<button
			on:click={onButtonClickHandler}>
			Log to Fathom
		</button>
	</div>
</section>

• We've created a simple button and attached an onClick handler using on:click. This handler logs a fathom event.
• YOUR_EVENT_ID is a placeholder for the actual event you want to log. Note you will need to create an event and get a corresponding ID before Fathom will start counting them.

Next Steps

You should now be able to log Fathom analytics events from SvelteKit!

This code should be relatively easy to copy / paste and customize for your own usecases. HAMINIONs members also get full source code access to the example project I created to test this code - Fathom analytics events from SvelteKit, run with Docker and Docker Compose (Example Project Source Code).