Add 404 tracking

[bennyvasquez]

By default, it seems, Matomo doesn't track 404s. We need to add this, so I can more easily tell if inbound links are hitting the right place, or identify opportunities for additional content. This guide should allow us to do it with ease:

https://matomo.org/faq/how-to/faq_60/

[Noam-Alum]

I'm not sure how to go about integrating this, I found two ways to do so:

• We can't directly check if a page has a status code of 404 from JavaScript (correct me if I'm wrong 🤷‍♂️), a workaround would be to use something like fetch (on the page we're on) for example, and check the status code there then execute the wanted line, but this seems sketchy. Something like this:

  fetch(window.location.href, { method: 'HEAD' })
    .then(response => {
      if (response.status === 404) {
        _paq.push(['setDocumentTitle',  '404/URL = ' +  encodeURIComponent(document.location.pathname+document.location.search) + ' /From = ' + encodeURIComponent(document.referrer)]);
      }
    });

  
  

• As of now we are using the default 404 page (from what I could tell), we can rewrite it (and re-use the template they use so it looks the same) and add the needed line, thus when this specific page is loaded it would give us the wanted result it the best way in my opinion. https://stackoverflow.com/questions/51702549/change-404-page-in-vuepress
  

Let me know what you guys think :smile: .

[bennyvasquez]

I definitely don't want to go the first way, as, like you said, it feels sketchy. Based on what the guide I linked to says, I think the custom 404 page would work. We can then customize it in the future to be more verbose and helpful, too.