Google Analytics is awesome at giving you insight into loads of complex things, like what the bounce rate is for mobile visitors using Safari in Peru, compared with tablet visitors using Chrome in Jakarta... and so on. But sometimes it's the simple things it can help with, like giving you the pages that have links to error pages on your site.

Get tracking!

Shockingly, despite more and more amusing error pages springing up, the vast majority of error pages I see don't have any Google Analytics tracking on. It's so simple yet so valuable so I can't recommend doing this highly enough! The best thing about GA is that with a little hacking of the code, you can grab yourself even more useful data, including the page title of the broken page, and the page that they clicked on to get there.

Call it an antidote to the awful English "summer" we're experiencing but we're feeling generous here at the Periscopixplex and the code that you need to add to your error page template to get this glut of information is below for you to use and enjoy! All you need to do is know whether you are using the traditional or async version of the GA script, and add your own UA-number to the code below.

Examples

Traditional syntax:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? " https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxx-x");
pageTracker._trackPageview("/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);
} catch(err) {}

</script>

Asynchronous syntax:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxx-x']);
  _gaq.push(['_trackPageview', '"/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Eradicate those errors

Once you've added this code, leave it a day or two, go to Content > Site Content > Pages and search for '404.html?page='. Then, hit 'Email' and schedule this report be delivered to you and/or your web guys weekly/monthly/quarterly so you can understand what pages are leading to those pesky 404 errors and take steps to update or remove the offending links.

As ever - hope this helps and let me know how you get on in the comments below!

p.s. I couldn't write a blog about error pages without putting a screenshot of my favourite error page! Kudo css-tricks.com