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
-
Sign into your account with Fathom, and create a new site.
-
Open the settings for that site, and look for Script settings. Hit the clipboard icon to copy the Script tag for your site.
You site's embed code will be on the script settings page. Hit the clipboard button to copy the code -
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:
1return (2<html lang="en">3<head>4<Meta />5<Links />6</head>7<body>8<Layout>9<Outlet />10</Layout>11<ScrollRestoration />1213<script14src="https://cdn.usefathom.com/script.js"15data-site="TRSSCIOR"16defer17/>18<Scripts />19<LiveReload />20</body>21</html>22);
Note: ☝🏽 I've edited the <script> tag here to be self closing, rather than having <script></script>. It should work either way.
- 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
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
- I wrote a post when I initially adopted fathom, called Why I switched to Fathom for analytics
- Make sure to subscribe to my YouTube channel
