BlogPodcastAbout💌 Tiny Improvements

How to add Fathom Analytics to your Remix.run app

Building a website using the Remix.run web app framework? This tutorial will teach you how to add privacy-first analytics to your Remix site with Fathom.

How to set up Fathom on your Remix site

  1. Sign into your account with Fathom, and create a new site.

  2. Open the settings for that site, and look for Script settings. Hit the clipboard icon to copy the Script tag for your site.

    Script settings for one of my sites on Fathom's dashboard
    You site's embed code will be on the script settings page. Hit the clipboard button to copy the code
  3. Open up your Remix site in your IDE of choice. open root.tsx (or root.jsx if you're using JavaScript instead of TypeScript), and paste your embed code right before the <Script /> tag:

return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Layout>
<Outlet />
</Layout>
<ScrollRestoration />
<script
src="https://cdn.usefathom.com/script.js"
data-site="TRSSCIOR"
defer
/>
<Scripts />
<LiveReload />
</body>
</html>
);

Note: ☝🏽 I've edited the <script> tag here to be self closing, rather than having <script></script>. It should work either way.

  1. Start your site with npm run dev or yarn dev and visit any page (you may have to hit reload if you had the page open already). You should see this reflected in your fathom dashboard in real time!
    You'll know it's working when you see a live visitor on your fathom dashboard
    You'll know it's working when you see a live visitor on your fathom dashboard

Try out Fathom - it's great!

I've been using Fathom for years, and am a happy paying customer. If you'd like to give it a shot, you can get $10 off of Fathom when you use my referral link https://usefathom.com/ref/DPSSYB to get started.

If you enjoyed this video

Mike Bifulco headshot

Subscribe to Tiny Improvements

Learn about designing & building great products for the web, and my philosophy for living a life you love in an ever-changing world.

    Typically once a week, straight from me to you. 😘 Unsubscribe anytime.


    Get in touch to → Sponsor Tiny Improvements

    ***
    © 2019-2023 Mike Bifulco

    Get in touch to → Sponsor Tiny Improvements

    Disclaimer: 👋🏽 Hi there. I work as a Product Builder at [Incognito Mode]. These are my opinions, and not necessarily the views of my employer.
    Built with Next. Source code on GitHub.

    More great resources

    Articles about React.jsArticles about Remix.runArticles about Next.jsArticles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityBrowse all topics →