How to add Fathom Analytics to Gatsby

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.