Sitecheck Website checks og monitorering
Tools & Analytics

How to Set Up Fathom Analytics on Your Website (2026 Guide)

Sitecheck Team

A step-by-step guide to installing Fathom Analytics on your website — no cookie banner needed, GDPR compliant out of the box, and live in under 15 minutes.

Getting accurate, privacy-compliant analytics on your website doesn't require a complex setup. Fathom Analytics is designed to be live in minutes — a single script tag, no cookie consent configuration, and a dashboard that works on first load.

Here's exactly how to get it running.

Step 1: Create Your Fathom Account 🚀

Head to Fathom Analytics and sign up. Fathom offers a free trial so you can test it fully before paying. Pricing starts at $15/month for up to 100,000 monthly pageviews, and you can add unlimited sites to a single account — which makes it especially good value if you manage multiple projects.

Once you're logged in, click Add a new site and enter your domain name. Fathom will generate a unique site ID (a short code like ABCDE) that's embedded in your tracking script.

Step 2: Add the Tracking Script ✍️

Fathom gives you a single script tag to paste into your site's <head>:

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

Replace YOURSITE with your actual site ID from the dashboard. The defer attribute means it loads after the rest of your page, so it doesn't block rendering — a key reason Fathom has essentially zero impact on your Core Web Vitals.

The script is under 2KB. That's it. No Tag Manager container, no additional configuration file, no consent management platform integration required.

Where to add it

  • Static HTML: Paste before </head> in your base layout or template.
  • WordPress: Use a plugin like Insert Headers and Footers or add it directly to your theme's header.php via wp_head(). Fathom also has an official WordPress plugin.
  • Shopify: Paste into the <head> section of your theme.liquid file under Online Store → Themes → Edit code.
  • Webflow: Go to Project Settings → Custom Code and paste in the Head Code section.
  • Ghost: Add to Settings → Code injection → Site Header.

Step 3: Set Up for JavaScript Frameworks 🧩

If you're running a React, Next.js, Vue, or Nuxt app, the static script tag approach won't track route changes inside your SPA. Fathom maintains an official npm package for this:

npm install fathom-client

For Next.js (App Router), add a tracking component to your root layout:

'use client';
import { useEffect } from 'react';
import * as Fathom from 'fathom-client';
import { usePathname, useSearchParams } from 'next/navigation';

export default function FathomTracker() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    Fathom.load('YOURSITE', {
      includedDomains: ['yourdomain.com'],
    });
  }, []);

  useEffect(() => {
    Fathom.trackPageview();
  }, [pathname, searchParams]);

  return null;
}

This fires a pageview on every route change, giving you accurate traffic data across all your app's pages.

Step 4: Track Goals and Conversions 🎯

Fathom lets you define goals — named conversion events you care about. Create a goal in the Fathom dashboard (give it a name like "Newsletter Signup" and optionally set a monetary value), and Fathom will give you an event ID.

Then trigger it wherever relevant in your code:

// Vanilla JS
window.fathom.trackEvent('Newsletter Signup');

// With the fathom-client package
import * as Fathom from 'fathom-client';
Fathom.trackEvent('Newsletter Signup');

Goals show up in your dashboard alongside traffic, giving you a full picture of which pages and referrers are actually driving conversions — not just visits.

If your site has European visitors, enabling EU data isolation in Fathom ensures their data is processed and stored on EU servers and never transferred to the US. This directly addresses the GDPR compliance issue at the heart of the Schrems II ruling that has made Google Analytics legally problematic across Europe.

To enable it, go to your site settings in Fathom and toggle on EU Isolation. Your script URL will update automatically. No other changes needed.

Once Fathom is your only analytics tool and you've removed Google Analytics, check whether your cookie consent banner still needs to fire for analytics cookies. If Fathom is your only tracker and you're not running other cookie-based tools, you may no longer need a consent banner for analytics at all.

This is a meaningful UX improvement. Cookie banners reduce trust, interrupt the user experience, and depress conversion rates. Removing one (legitimately, not by hiding it) is a direct business win alongside the compliance benefit.

Verify Everything is Working ✅

Back in the Fathom dashboard, visit your website in a new browser tab and watch for a real-time visitor to appear. Fathom shows live visitor counts in the dashboard, so you can confirm the script is firing within seconds of installing it.

You can also use your browser's network tab to verify the script is loading from cdn.usefathom.com and that pageview requests are being sent correctly.

The Sitecheck Angle 🔗

Once your Fathom setup is live, run a Sitecheck scan to see the performance difference. Removing Google Analytics (and optionally, Google Tag Manager) and replacing with a 2KB Fathom script is one of the most impactful third-party script changes you can make for your PageSpeed score and Core Web Vitals.

Before/after comparisons on Sitecheck are a clean way to quantify exactly how much your LCP and INP improve when you trim third-party script weight.

Start your Fathom free trial here — and while you're at it, check your current site performance to see where you stand before making the switch.