{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.simoncox.com/short-articles/2024-02-11-tracking-broken-links-with-fathom/",
  "description": "How I set up Fathom Analytics to track 404 broken URLs so that I could redirect those links to the correct page.",
  "path": "/short-articles/2024-02-11-tracking-broken-links-with-fathom/",
  "publishedAt": "2024-02-11T00:00:00.000Z",
  "site": "at://did:plc:tki7vwlanxbwrz2er67eaeqa/site.standard.publication/3mp4h4md7zv2y",
  "tags": [
    "Web",
    "Eleventy"
  ],
  "textContent": "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.\n\nI did this so that I could pull the data into a Data Studio dashboard to provide me with errant URLs being visited on my site.\n\nThe 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:\n~\n/post/2010-02-04-th-perfect-angle-to-staple-paper/\n\n\nwhen the actual page is at:\n\n/post/2010-02-04-the-perfect-angle-to-staple-paper/\n\nAnd it had nine visits (probably the same person wondering why the link was going to my 404 page - so they may have fixed it.)\n\nSo the report is super useful to see what is going on under the hood.\n\nWhy do I want to see what is happening on my 404 page? \nWell, 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.\n\nWith 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. \n\nSet up the Redirects\nWhen 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.\n\nCreating this report in Fathom Analytics\nI 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.\n\nThis code looked good so I tried it:\n\n\n<script>\nwindow.addEventListener('load', (event) => {\n  fathom.trackEvent('checkout completed');\n});\n</script>\n\n\nAll 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. \n\nFathom to the rescue\nSo 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!\n\nHere is the code I have ended up using - courtesy of Paul. \n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var path = window.location.pathname;\n    fathom.trackEvent('404: ' + path);\n  });\n</script>\t\n~\n\nOn testing, I now get the following report in my Fathom Dashboard:\n\nThat allows me to spot 404 URL errors and set up new redirects for them!\n\nFathom Analytics\nThank you Paul Jarvis for your help on this.\nIf you are interested in Fathom Analytics, this is my affiliate linky.\n\nUpdate\nPaul has already added this technique to the Fathom documentation!",
  "title": "Tracking 404 broken links with Fathom Analytics"
}