Ben Borgers / Posts /

How to add Fathom Analytics to Gatsby

January 23, 2021 by @benborgers

Fathom offers simple and privacy-focused analytics that you can use for your Gatsby site.

Using the new hosted Fathom script, you can just drop this snippet into the <head> of every Gatsby page you want to track. (You can use a package like react-helmet with gatsby-plugin-react-helmet to insert things into the HTML head).

<script src="https://cdn.usefathom.com/script.js" spa="auto" site="ABCDEF" defer></script>

Make sure to change the site code to your site ID. You can also use your Fathom custom domain instead of the default src.

With Fathom's new tracking script, the spa="auto" attribute will make it automatically work with Gatsby, so you no longer need to use a Gatsby plugin to help Fathom detect when the page changes.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...