Setting up Fathom Analytics on Webflow

How to set up Fathom Analytics, an alternative to Google Analytics, on your Webflow Sites.

First, why Fathom Analytics?

After using Google Analytics for nearly a decade, I've decided to use Fathom Analytics with No Code Collab. I didn't decide to use Fathom because it has more features than Google Analytics... I decided to use Fathom Analytics because it has fewer features of Google Analytics. In short, it fits my needs.

Full disclosure... I'm not really a Google Analytics Pro. Don't get me wrong, I know enough to be dangerous — but for me Google Analytics is often overkill. It's a behemoth. Some companies want all of the features, but I rarely do anything fancy. I usually don't create custom dashboards, goals, events, alerts, etc. I generally have very basic Google Analytics setup... and I think I'm like most people.

So that's why I'm using Fathom Analytics — because it's a GDPR compliant analytics tool that is a lightweight, intuitive, single page version of my usual GA setup. Also, I like trying new tools — especially tools that have a clean, simple, intuitive UI.

Set up Fathom Analytics

After creating your account, installing Fathom is pretty straightforward. We'll cover the two ways you can install Fathom below.

Basic

When you first login to Fathom, you'll be able to create a new site. This is name is how the site will show on your dashboard - so call it whatever you like.

After entering a Site Name and clicking "Create Site", you'll be given a code snippet.

‍Note: When you select Webflow as your CMS/Framework, they provide installation instructions that suggest using an Embed block on every page. I think the more efficient way is to add the snippet, one time, in Project Settings -> Custom Code -> Head Code. Using the Embed block method will require you to add an Embed block on every page of your site.

Copy the snippet and head over to Webflow. Paste the code in your Project Settings Custom Code Tab.

Save and Publish your site with the new code snippet. Then head back to Fathom to verify the site code.

If everything has been done correctly, Fathom will verify the code has been installed correctly.

Once verified, you will be able to view your site dashboard.

Note: There is no "Dashboards" menu item to view your sites. To navigate to your dashboards, click the Fathom icon in the upper left corner.

Advanced

Ad-blockers can prevent the downloading of tracking scripts, which is a great thing for protecting your privacy. However, Fathom Analytics is built to protect privacy (they don't download, store or track any personal data), so not downloading the tracking script in the name of privacy seems redundant. `

The team at Fathom explain this pretty well,

"While we believe that ad-blocking browser extensions are great, useful and help people hide their personal data from big tech companies, we also believe that since our own product is privacy-focused, our customers should be able to stop their tracking script from being blocked by ad-blockers."

Put another way, if any of your visitors are using an ad-blocker they may not be counted in your analytics data - and this is where the Advanced implementation comes in. Fathom has created a method for their tracking script to go unnoticed by ad-blockers.

To setup this advanced installation, you'll need to create a custom domain inside of Fathom Analytics, as well as adding a CNAME record in your DNS. Since this is a bit more technical, here is a Fathom support article for setting up this advanced method.

First click on "Domains" in the Fathom menu
Add your Domain Name and click "Start Process". Note: if your website was https://hilariousplatypus.com, you’d enter hilariousplatypus.com

Add your custom domain into Fathom

Copy the new CNAME information and paste it into your DNS (Google Domains, GoDaddy, etc)

CNAME Setting provided by Fathom

Add your new CNAME information in your DNS

Once you have added the CNAME record in your DNS, go back to Fathom and click "I have created these DNS records". It may take some time for these new settings to work their way through the interwebs.

Now that your DNS is updated you need to update one final thing in Webflow.

On your Fathom Analytics Domains page, copy your new custom domain

Now go into Webflow to your Project Settings -> Custom Code -> Head Code. In the code snippet where it says, "cdn.usefathom.com"... replace that with the custom domain you copied from the previous step.

Save your changes and publish your site. 👍

Setting up Fathom Analytics on Webflow

More tutorials

Add syntax highlighting to Webflow CMS

Masonry layout on Webflow collection pages

Use Airtable scripts to resize and crop images

Troubleshoot images from Airtable to Docs