Scott Spence

Posted on Jan 2, 2020 • Updated on Jun 2, 2020 • Originally published at scottspence.com

Track Custom Events With Fathom Analytics

#react #gatsby #javascript #webdev

In this guide I'm going to go through how to track custom events in a Gatsby site using Fathom analytics.

Preamble

At the end of last month (November 2019) I started using Fathom Analytics in place of Google Analytics.

I wanted a simpler way to track visitors to my sites and Fathom offers that with a great, really intuitive interface and simple design.

So far, I love it, and would like to recommend it to others! Fathom have an awesome affiliate program where every customer can take part!

For every paying customer I refer with my unique code, I'll get a 25% lifetime commission on that customers payments, and if you use that code too you'll get a $10 discount on your first invoice.

For now here's some of the Fathom marketing copy.

Why Fathom?

You don't need to display those cookie notices as they don't use cookies, nor do they track invasive data.
They are focused on privacy for website visitors, they don't track visitors, save their personal information, or need it to be profitable.
They have hundreds of customers and track tens of millions of page views per month, so they may be a small company, but they're doing big things!
They can handle viral content, so your site won't slow down because of them, an they wont ever stop tracking for you because of a spike in popularity.
All of the plans allow for unlimited websites to be tracked and receive top-notch customer support. Plans start at $14 a month.

Do you use Google Analytics (GA) for any of your sites? I've used it in the past and it gives the sort of information you'd expect but it can be quite confusing to navigate and find that information.

What you get with Fathom out of the box is very similar to GA, but it's all there on one page. You get the standard metrics like, 'Unique visits', 'Page views', 'Avg time on site' and 'Bounce rate'.

There's also the breakdown of the most popular pages and referring sites.

The difference (apart from the simple to use interface), you're not giving away your visitors data to the big G!

Want to track what users of your site are clicking and navigating to?

But say you want to track how many times a user of your site clicked a particular button or link?

📺 Here's a video detailing the process.

Set-up Fathom account

If you want to follow along you're going to need a Fathom Analytics account, if you haven't already got one then please consider signing up with my affiliate link, my unique code will get you a $10 discount off of your first invoice! 🤝

Add/Config Fathom Gatsby plugin

In this guide I'm going to use a Gatsby starter gatsby-starter-business which is a nice starter with some of the relevant things I'd want to track. Things like the pricing page and how many people submit a contact form.

In the gatsby-config.js plugins array the config looks pretty similar to this:

{
  resolve: `gatsby-plugin-fathom`,
  options: {
    siteId: process.env.GATSBY_FATHOM_TRACKING_ID_MY_AWESOME_SITE,
    // or use the site ID in plaintext
    // siteId: 'PBZRRJHH',
  },
},

In the example I'm doing I'm hard-coding in the site ID but you can use environment variables if you like.

Push to Netlify and test

For the purposes of the guide I build and push the site to Netlify then check in the console on the browser that fathom is available as a global function.

I can now check my Fathom dashboard to see that the site has a visitor.

Cool, cool! That's Fathom Analytics configured for the site, now to the custom events.

Create goals in Fathom Analytics

To track events in Fathom I'll first need to set up a goal! This will give a unique ID that I can pass to the Fathom global function that's on my configured site.

So, to get to the goal section of my site I'll scroll to the bottom of the configured site's dashboard and click the Show more data toggle.

This will reveal the Goals section where I can configure goals. In this example I'll be adding goals for about, pricing, blog, contact-us and form-submit.

Each time I save the goal I'm given a JavaScript snippet to use, like: fathom('trackGoal', 'CYAZA98C', 0); , this is what I'm going to be adding into my code example.

Use React Context API to make an analytics provider

I'm going to use the React context API to create an analytics provider to be used throughout the app.

import React, { createContext, useContext, useEffect } from 'react';

const AnalyticsContext = createContext({});

export const AnalyticsProvider = ({ children }) => {
  useEffect(() => {
    if (typeof window.fathom === 'undefined') {
      window.fathom = (x, y, z) => {
        console.log(`I'm a fake Fathom`, x, y, z);
      };
    }
  }, []);

  const logClicks = goalId => {
    window.fathom('trackGoal', goalId, 0);
  };

  return <AnalyticsContext.Provider value={logClicks}>{children}</AnalyticsContext.Provider>;
};

export const useAnalytics = () => {
  return useContext(AnalyticsContext);
};

In this example I'm defining one function to be available via the context provider and passed in with value but I could add in many functions here for different event types.

The useEffect hook is for when I'm on the dev server and don't want to be submitting data to Fathom, I'll instead get a console message.

As high up the component tree as possible, I'm going to add the provider.

Add custom event tracking for Fathom

In this example there's a Layout component I can add the provider to, this wraps all of the components in the application so the provider can be accessed throughout the site.

Then use in the areas I want to track a goal I'll use the useAnalytics hook.

const NavBar = ({ toggleNavbar, isActive }) => {
  const fa = useAnalytics();
  return (
    // other wrapping elements
    <Link
      onClick={() => {
        fa('CDDZY97C');
      }}
      className="navbar-item"
      to="/about">
      About
    </Link>
    // other wrapping elements
  );
};

Wrap up

Ok, time for me to review what I just did and what you'll need to do if you're looking to do the same:

Set up Fathom account
Add and configure the Fathom Gatsby plugin
Push the configured site to Netlify to test configuration.
Add custom tracking code in the shape of a React Context API Provider
Wrap the app in the AnalyticsProvider
Consume the analytics provider function to log the event to the fathom global function.

🥁 Demo site: https://gatsby-starter-business-fathom.netlify.com

📈 Demo Fathom Dashboard: https://app.usefathom.com/share/nymdtplm/gatsby-starter-business

🤝 Affiliate link for $10 of off your first month of Fathom Analytics: https://usefathom.com/ref/HG492L

Thanks for reading 🙏

That’s all folks! If there is anything I have missed, or if there is a better way to do something then please let me know.

Follow me on Twitter or Ask Me Anything on GitHub.

Oldest comments (6)

Frederik • Jan 3 '20

Thank you for this post Scott! I Haven't heard about Fathom before. Let me point out some things that came to my mind while reading:

While they claim to no collect "invasive data", they process data which is considered PII under some legislation, especially in the EU. Also they store hashed PII, which is not anonymous but only pseudonymous. Therefore you might still need banners and opt-ins for this.
If they don't use cookies, it might be harder for privacy plugins to avoid being tracked. This may be good for the website owner but does not respect the users intent to opt out via browser plugins.
Google might not be the best company to give your users data to, but they are well watched and under regulation. This does not apply to smaller companies like Fathom, so their business practice is not properly disclosed. This makes it difficult to judge the contractual obligations that might come with user tracking.
Besides that, Fathom offers way less functionality compared to Google Analytics or Piwik. This may be enough for some use cases, but the products are not comparable at all in my opinion.

All the best,
Frederik

Jack Ellis • Jan 3 '20

Our data stance can be found here: usefathom.com/data. We're making more changes in 2020 to make things even clearer, as there's a lot of grey area in varioius legislation.
We don't track users. Most analytics products will highlight all actions an individual took. We hold aggregates
Our business model relies on us not to collect tracking information. Google is an advertising company. Google does not have a history of putting privacy first, we do. See: en.wikipedia.org/wiki/Privacy_conc...
Fathom isn't for everyone but a large share of the market don't need to be using Google for their needs

Frederik • Jan 4 '20

Hey Jack, thank you for your reply! Great to have a direct conversation :-)

Let me comment on your points:

Disclosing what you are doing with the collected data is a great first step! On your anonymization-page, you are stating that IP addresses are used to generate hashed user ids. Both is PII under the GDPR, which not only concerns storage but also processing of data. This means users need to be able to opt out and your customers need to disclose and justify this practice.
Well, your customers might use Fathom to do exactly the same stuff like with Google Analytics. What is tracked to which extent is up to the implementation.
That is true. But this is also why Google is on the regulators radar compared to small or new companies.
Totally true! This is why I like Fathom from a diversity standpoint. But this also makes it a completely different product compared to Google.

Like I said, I like Fathom for what it is. But tracking users is never an easy undertaking these days and comes with a ton of regulations, and Fathom is no exception from that.

Jack Ellis • Jan 4 '20

Hey Frederik,

We, and our DPO, believe Fathom falls under legitimate interest (Article 6.1) within GDPR. We will be clarifying further this year as this area is far too grey
If our customers use Fathom in a way it wasn't intended, that's their perogative. We've not seen that as our customers use us for simplicity and privacy
If being on regulators radar meant that companies would be ethical, we wouldn't have cambridge analytica. Regulation doesn't guarantee ethics. Building your business so that you cannot survive UNLESS you put privacy first guarantees compliance
Thanks Frederik

Interesting exchange. We clearly have a lot of work to do with our messaging, and it's exchanges like these that make us go back and see where we can improve. Thank you.