How toUse Fathom with Remix

If you want to use Fathom for your analytics and use Remix to build your app, you can configure it to work quite quickly.

Install Fathom Client:

npm install fathom-client

Then in your app/root file, import it together with useLocation from React Router.

import * as Fathom from "fathom-client";
import { useLocation } from "react-router-dom";

Finally, in an effect run Fathom.load and also Fathom.trackPageview(); after a location change.

let fathomLoaded = useRef(false);
let location = useLocation();

useEffect(
 function setupFathom() {
 if (!fathomLoaded.current) {
 Fathom.load("<YOUR_SITE_ID>", { includedDomains: ["<YOUR_DOMAIN>"] });
 fathomLoaded.current = true;
 } else {
 Fathom.trackPageview();
 }
 },
 [location]
);

With this, the first time the effect runs, it will load Fathom and set in the fathomLoaded ref the value true. From that moment, whenever the location object changes, it will call Fathom.trackPageview to track the pageview.

And that's it! This also works in any React Router application; to be honest, you don't even need Remix here.