Skip to content

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 install fathom-client
yarn add fathom-client
bun add fathom-client
import { useLocation } from '@remix-run/react'
import { load, trackPageview } from 'fathom-client'
import { useEffect } from 'react'

export const Fathom = () => {
  const location = useLocation()

  // Load Fathom Analytics when the component is mounted
  useEffect(() => {
    // mark[11:19]
    load('<SITE_ID>') // Replace `<SITE_ID>` with your site ID like `KNWIOETX`
  }, [])

  // Trigger page views when the location changes
  useEffect(() => {
    trackPageview()
  }, [location.pathname, location.search])

  return null
}

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

// focus
import { Fathom } from '~/components/Fathom'

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

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.