Use Fathom Anaytics with Remix.run

Fathom Analytics is a Google Analytics alternative that's privacy-friendly and GDPR compliant.

Fathom Analytics Setup

If you don't have an account yet, you can start for free.

Once you account is setup, create a new site.

Create a new site on Fathom Analytics

After creating the site, you'll get prompted with a Site ID. That'll be needed later.

Embed Code on Fathom Analytics

Integration in Remix.run

First install the fathom-client library.

npm

yarn

bun


_10npm install fathom-client

app/components/Fathom.tsx


_19import { useLocation } from '@remix-run/react'
_19import { load, trackPageview } from 'fathom-client'
_19import { useEffect } from 'react'
_19
_19export const Fathom = () => {
_19  const location = useLocation()
_19
_19  // Load Fathom Analytics when the component is mounted
_19  useEffect(() => {
_19    load('<SITE_ID>') // Replace `<SITE_ID>` with your site ID like `KNWIOETX`
_19  }, [])
_19
_19  // Trigger page views when the location changes
_19  useEffect(() => {
_19    trackPageview()
_19  }, [location.pathname, location.search])
_19
_19  return null
_19}

Now you just have to use the Fathom component. Your root.tsx file is the perfect place for this.

app/root.tsx


_23import { Fathom } from '~/components/Fathom'
_23
_23export default function App() {
_23  return (
_23    <html lang="en" className="h-full antialiased">
_23      <head>
_23        <meta charSet="utf-8" />
_23        <meta name="viewport" content="width=device-width, initial-scale=1" />
_23        <Meta />
_23        <Links />
_23      </head>
_23      <body className="flex h-full bg-zinc-50 dark:bg-black">
_23        <Fathom />
_23        <Layout>
_23          <Outlet />
_23        </Layout>
_23        <ScrollRestoration />
_23        <Scripts />
_23        <LiveReload />
_23      </body>
_23    </html>
_23  )
_23}

And that's it! Fathom Analytics is setup and ready.

AdBlockers vs Fathom Analytics

Don't forget to disable or configure your AdBlocker if you use one. Most AdBlockers will block resources from usefathom.com as it's a tracking service.