Tracking 404 broken links with Fathom Analytics

I switched all my small projects over to Fathom Analytics in 2023 for various reasons but there was one page on my site where I kept the Google Analytics code - the 404 page.

I did this so that I could pull the data into a Looker Studio dashboard to provide me with errant URLs being visited on my site.

Simon's 404 URL table in Looker Studio

The above image shows a classic example of a URL that didn't exist on my site. Not sure how someone got this wrong but they have missed one letter, 'e' out of the URL thus breaking it! They have put:

/post/2010-02-04-th-perfect-angle-to-staple-paper/

when the actual page is at:

/post/2010-02-04-the-perfect-angle-to-staple-paper/

And it had nine visits (probably the same person wondering why the link was going to my 404 page - so they may have fixed it.)

So the report is super useful to see what is going on under the hood.

Why do I want to see what is happening on my 404 page?

Well, broken URLs in my site can usually be found quite easily by running a crawler across the site and fixing anything that breaks but there is the odd occasion where someone linking to my site uses an old URL or creates a URL with a typo in it - essentially they have created a broken link to my site and I don't know who has done that and I can't ask them to fix it.

With the old URLs I have redirects in place to catch them but for new broken URLs I don't know they exist unless I can track the referrer. So that's what I have been doing.

Set up the Redirects

When I get a new broken link I can add a line to my redirects file to redirect that to the appropriate page if one exists. If it is not obvious where to send the traffic then I still let is resolve to the 404 page.

Creating this report in Fathom Analytics

I thought I should be able to create a similar report using Fathom Analytics so read the Creating and using events documentation and it looked like I could set an event up and track them there.

This code looked good so I tried it:

<script>
window.addEventListener('load', (event) => {
  fathom.trackEvent('checkout completed');
});
</script>

All I needed to do was change the checkout completed to 404. It worked but of course only told me that there was a 404 event. I needed more data from the script - I needed the URL. Javasripty people will be well ahead of me now and using the word 'just' a lot but despite using the fabulous 11ty for this site I really can't cope with much more than a sprinkle of javascript.

Fathom to the rescue

So I contacted Fathom Analytics, and told them what I was trying to do. The wonderful Paul Jarvis came back with the code I needed and even tested it out before sending it to me!

Here is the code I have ended up using - courtesy of Paul.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var path = window.location.pathname;
    fathom.trackEvent('404: ' + path);
  });
</script>

On testing, I now get the following report in my Fathom Dashboard: Simon's 404 URL table in Fathom Analytics Dashboard