Constructing an internet site utilizing the Remix.run net app framework? This tutorial will educate you find out how to add privacy-first analytics to your Remix web site with Fathom.
The best way to arrange Fathom in your Remix web site
-
Signal into your account with Fathom, and create a brand new web site.
-
Open the settings for that web site, and search for Script settings. Hit the clipboard icon to repeat the Script tag on your web site.
You web site’s embed code shall be on the script settings web page. Hit the clipboard button to repeat the code -
Open up your Remix web site in your IDE of alternative. open
root.tsx(orroot.jsxin case you’re utilizing JavaScript as a substitute of TypeScript), and paste your embed code proper earlier than the<Script />tag:
return (
<html lang="en">
<head>
<Meta />
<Hyperlinks />
</head>
<physique>
<Structure>
<Outlet />
</Structure>
<ScrollRestoration />
<script
src="https://cdn.usefathom.com/script.js"
data-site="TRSSCIOR"
defer
/>
<Scripts />
<LiveReload />
</physique>
</html>
);
Observe: ☝🏽 I’ve edited the <script> tag right here to be self closing, relatively than having <script></script>. It ought to work both manner.
- Begin your web site with
npm run devoryarn devand go to any web page (you’ll have to hit reload in case you had the web page open already). It’s best to see this mirrored in your fathom dashboard in actual time!
You will know it is working if you see a dwell customer in your fathom dashboard
Check out Fathom – it is nice!
I have been utilizing Fathom for years, and am a contented paying buyer. If you would like to offer it a shot, you will get $10 off of Fathom if you use my referral hyperlink https://usefathom.com/ref/DPSSYB to get began.
Should you loved this video
