React

Fathom Analytics works great with React applications. Whether youre using Create React App, Vite, or another React setup, the integration is straightforward.

Note: If you're using a React framework like Next.js, Remix, or Gatsby, check out our dedicated integration guides for those instead.

Simple setup (static sites)

If your React app doesnt use client-side routing (e.g., React Router), you can simply add the Fathom script to your index.html file:

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

Note: Replace `YOUR-SITE-ID` with your actual Fathom site ID. You can find this in your Fathom site settings.

With React Router (SPA)

If youre using React Router or similar client-side routing, youll want to use the fathom-client package for proper page view tracking:

Install fathom-client:

npm install fathom-client

Create a Fathom component that tracks page views on route changes:

// src/components/Fathom.tsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import * as Fathom from 'fathom-client';

export function FathomAnalytics() {
  const location = useLocation();

  useEffect(() => {
    Fathom.load('YOUR-SITE-ID', {
      auto: false
    });
  }, []);

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

  return null;
}

Add the component to your app, inside your Router:

// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { FathomAnalytics } from './components/Fathom';

function App() {
  return (
    <BrowserRouter>
      <FathomAnalytics />
      <Routes>
        {/* Your routes here */}
      </Routes>
    </BrowserRouter>
  );
}

Using the data-spa attribute

Alternatively, if you dont need programmatic control, you can add the script to your index.html with the data-spa attribute:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR-SITE-ID" data-spa="auto" defer></script>

This tells Fathom to automatically detect and track client-side navigation.

Tracking events

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

import { trackEvent } from 'fathom-client';

function SignupButton() {
  const handleClick = () => {
    trackEvent('Signup Button Clicked');
    // ... rest of your click handler
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

For events with monetary values (in cents):

trackEvent('Purchase Completed', { _value: 9900 }); // $99.00

Environment variables

For better flexibility, store your site ID in an environment variable:

// Vite
Fathom.load(import.meta.env.VITE_FATHOM_SITE_ID);

// Create React App
Fathom.load(process.env.REACT_APP_FATHOM_SITE_ID);

Further customization

To learn about all the options we offer, read our advanced documentation here.

If you still have questions or require help with anything, please reach out to us and we'll happily get things sorted out for you.

[Fathom Analytics]

We've counted billions of pageviews for thousands of customers, all without ever compromising anyone's digital privacy. We hope you'll join us.

2018-2026 Fathom Analytics.

Get started

Learn

Our software

Legal

Details

Web Proxy Viewer | New URL | Original Page