Support home / Integrations

Remix

Fathom Analytics works great with Remix apps. Since Remix is a single-page application framework, you'll want to track page views as users navigate between routes.

Setting up Fathom in Remix

Install the fathom-client package:

npm install fathom-client

Create a Fathom component to handle tracking. Create a new file at app/components/Fathom.tsx:

import { useLocation } from "@remix-run/react";
import { load, trackPageview } from "fathom-client";
import { useEffect } from "react";
 
export function Fathom() {
  const location = useLocation();
 
  useEffect(() => {
    load("YOUR-SITE-ID", {
      auto: false,
    });
  }, []);
 
  useEffect(() => {
    trackPageview();
  }, [location.pathname, location.search]);
 
  return null;
}

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

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

import { Fathom } from "~/components/Fathom";
 
export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Fathom />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Tracking events

To track custom events in your Remix app, use the trackEvent function:

import { trackEvent } from "fathom-client";
 
// Track a simple event
trackEvent("Button Clicked");
 
// Track an event with a value (in cents for monetary values)
trackEvent("Purchase Completed", { _value: 9900 });

Using environment variables

For better flexibility across environments, you can pass the site ID as an environment variable:

// In your Fathom component
load(window.ENV.FATHOM_SITE_ID, {
  auto: false,
});

For more details on setting up environment variables in Remix, see the Remix environment variables documentation.

Further customization

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