Using Fathom Analytics with Next.js

Learn how to integrate Fathom Analytics with Next.js.
Last updated on August 30, 2024
Frameworks

Fathom Analytics is a privacy-focused alternative to traditional analytics tools. This guide will show you how to integrate Fathom with your Next.js application.

First, install the Fathom client package:

npm install fathom-client

Create a new file called app/fathom.tsx in your project:

app/fathom.tsx
'use client';
import { load, trackPageview } from 'fathom-client';
import { useEffect, Suspense } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
function TrackPageView() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
load(process.env.NEXT_PUBLIC_FATHOM_ID, {
auto: false
});
}, []);
useEffect(() => {
if (!pathname) return;
trackPageview({
url: pathname + searchParams?.toString(),
referrer: document.referrer
});
}, [pathname, searchParams]);
return null;
}
export function FathomAnalytics() {
return (
<Suspense fallback={null}>
<TrackPageView />
</Suspense>
);
}

This component does the following:

  1. Loads the Fathom script when the component mounts
  2. Tracks pageviews when the route changes

Note: Ensure you add your Fathom ID to your .env file.

Add the Fathom component to your root app/layout.tsx file:

app/layout.tsx
import { FathomAnalytics } from './fathom';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<FathomAnalytics />
{children}
</body>
</html>
);
}
  1. The Fathom component is a client component (e.g. "use client")
  2. We use usePathname() and useSearchParams() to track route changes
  3. The Fathom script is loaded with auto: false to prevent automatic pageview tracking

To track custom events, you can use the trackEvent function from fathom-client:

import { trackEvent } from 'fathom-client';
// In your component
const handleClick = () => {
trackEvent('GOAL_ID', 0); // 0 is the value (optional)
};

Replace 'GOAL_ID' with the actual goal ID from your Fathom dashboard.

By following this guide, you'll have Fathom Analytics integrated into your Next.js application, providing privacy-focused analytics for your site.

Couldn't find the guide you need?