Using Fathom Analytics with Gatsbyjs and Next.js

During the recent redesign of this web site I wanted to control more of who I was giving user data to. The most obvious was analytics. Every user action on my previous website design was being sent to the big G.

About this same time I was reading Company of One. It’s a book, by Paul Jarvis, about starting small businesses and staying small. Part of the way through the book I wanted to know a bit more and realized he was running Fathom. Planets align… it turns out Fathom is a simple analytics platform focused on privacy. It doesn’t track your personal data and has a nice single-page interface.

A few days later I had paid for a year of Fathom service and needed to integrate it into two websites I was working on. The first was this website, which uses Gatsbyjs. The setup is ridiculously simple.

Create Your Site In Fathom

Before we start with Gatbsy, if you haven’t already created the site in Fathom you’ll need to log in to your account and go to Sites settings.

Fill in the site name with your site domain and click the Get site code button. You’ll then see a hovering menu that includes your new site id. If you previously created your site in Fathom, the site and the site id will be in the Sites list just above the Add a new site form. You can also click the site id to see more details. The details include and embed script and a button to verify the site code is working, once you have it in place.

Gatsbyjs Setup

As with many things Gatsbyjs there is already a plugin, gatsby-plugin-fathom. In your Gatsby project folder run, for npm or yarn:

# For npm users
npm install --save gatsby-plugin-fathom

# For yarn users
yarn add gatsby-plugin-fathom

Now in your gatsby-config.js file you just need to add the plugin config in the plugins array:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-fathom",
      options: {
        siteId: "YOUR-SITE-ID",
      },
    },
  ],
};

Note the siteId variable you need to fill in. Replace YOUR-SITE-ID with your fancy new Fathom site id, save and commit your changes, and push it to production. That’s it. In a few minutes you should be able to verify the site code on Fathom and start seeing analytics.

Next.js Setup

With my Gatsby website tracking in Fathom I now needed to get my consulting website set up. I decided to use Next.js for Ninebark.dev to compare it to Gatsby and expand my Reactjs knowledge.

Immediately it was clear there was not a quick plugin for Next.js. This allowed for some quality learning time.

After trying a few paths I landed on just using dangerouslySetInnerHTML to render the script in the footer. I’m using Next.js to generate a static site so this isn’t an issue. However, if you’re using Next.js server you may need to take additional steps to protect against XSS. Dev.to has a nice guide on using dangerouslySetInnerHTML safely.

In Next.js we need to place the Fathom tracking script ourselves. The script should go wherever you are defining the footer of your site. In my case it is inside the last div in my Footer component. Make sure to replace YOUR-SITE-ID with the site id from your Fathom site as explained above.

<script
  dangerouslySetInnerHTML={{
    __html: `
  (function(f, a, t, h, o, m){
  a[h]=a[h]||function(){
  (a[h].q=a[h].q||[]).push(arguments)
  };
  o=f.createElement('script'),
  m=f.getElementsByTagName('script')[0];
  o.async=1; o.src=t; o.id='fathom-script';
  m.parentNode.insertBefore(o,m)
  })(
    document,
    window,
    '//cdn.usefathom.com/tracker.js',
    'fathom'
  );
  fathom('set', 'siteId', 'YOUR-SITE-ID');
  fathom('trackPageview');
`,
  }}
/>

If you look in your Fathom site settings and click on the site ID you will see this same script with your site ID already in place, minus the dangerouslySetInnerHTML portion. You can now save your changes and push them to production. Once your production build is live go back to your Fathom account and verify the site code it working.

If you’re interested in privacy focused web analytics, give Fathom a shot and use my Fathom sign up affiliate link to get $10 off your first invoice. By using my affiliate link it supports this website and future content by giving a lifetime 25% referral commission.

Comments, questions, suggestions, or would like to talk about a web development project you need help with? Feel free to dm me on Twitter or fill out the contact form on my consulting website.