React

Before you begin: Create your Fathom account and add your website to get its site ID. Already have one? You’re ready to follow the steps below.

Fathom Analytics works great with React applications. Whether you’re 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 doesn’t 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 you’re using React Router or similar client-side routing, you’ll want to use the fathom-client package for proper page view tracking:

1. Install fathom-client:

npm install fathom-client

2. 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;
}

3. 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 don’t 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.

Ready to check your setup? Visit your published website, then open its Fathom dashboard to check for your first pageview. If it doesn’t appear, our installation troubleshooting guide will help.