Error pages we know as 400, 401, 403, 404, 500 are a real pain for every internet user. Sometimes they can be entertaining (mint, Blue Fountain Media and William Csete) but usually they just look plain awful or don’t even exist. A good 404 page is essential and should always help your visitor get back on track in the website navigation. This can be done by adding suggested pages, site navigation, search boxes and other elemtents, but evidently users will always be bothered because the page never returns what they are looking for. From a Search Engine Optimization (SEO) perspective the broken links and missing pages also harm your website’s linking structure. A well functioning link structure is essential for search engines to optimally crawl your website.

Google Webmaster Tools
So we have addressed the problem and we can conclude that error pages should be avoided at all costs. But we have to know where they are to effectively target them. A very easy tool to find your error pages is to have Google Webmaster Tools configured for your domain. Any errors that derive from the crawling process will be reported here and give a useful insight in broken links. Any fluctuations are graphed by Google in a timeline view.

Screaming Frog SEO Spider
Unfortunately not all error pages pop up in the Google Webmaster Tools interface. To provide a detailed insight in the internal link structure of a webpage I usually use Screaming Frog SEO Spider. Compared to Webmaster Tools, the SEO spider has the advantage to also scan all the outbound links on your website. If you are linking to any error pages, they will come up with the appropriate error code as in the table below. A periodic scan with this tool will show you which links are broken and where they come from which is extremely useful to keep your link structure up to date.

Google Analytics
So now I have a complete visual on which links are broken but I have absolutely no idea which ones require the most attention. Which 404 pages are often found and which broken links are clicked the most? To get a detailed a detailed overview I implement Google Analytics _trackEvent code on the Error pages. I’ve set up a complete track&fix profile, to filter and track these easy-to-fix problems and I’ll show you how:

Tracking the error pages with the standard tracking code will obviously increase your pageviews. I prefer tracking the pages as an event for they give me the possibility to add several variables that allow me to sort and filter effectively. To set this up, implement the following code on your error page (with your own UA-id):

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + 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>

Compared to the standard Google Analytics tracking code, you can see I have removed the _trackPageview (UPDATE) and replaced it with the new _trackEvent line. The orange marked terms are variables which I have added to the event code to give me different dimensions in sorting and filtering. If you decide to add this code on other error pages, like 400, 401, 500, etc. you should change the second variable accordingly. The code will then offer you the following insights:

The page variable will show you which page the user has tried to access and the ref: variable will indicate from which page this error has been referred. This way it’s easy to spot popular broken links and quickly fix them on the specified pages.

Hippo & WordPress
Each Content Management System has a different approach in handling error pages. I’ve recently seen a very effective implementation of the code in a Hippo CMS (credits: Laurens). By giving each error page a variable based on the error code, it was quite easy to implement a dynamic tracking code by using:

Set Errorcode:

<c:set var="errorCode" value="500" scope="request"/>

Implement Errorcode:

_gaq.push(['_trackEvent', 'Error', '${errorCode}', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer, true]);

Because WordPress adds the link and page to the 404.html URL, it automatically enables you to track it in Analytics. Unfortunately the sorting and filtering will become harder because it is a single dimension. And it is also being tracked as a Pageview, increasing the amount of total Pageviews for your website.

Either use the _trackEvent code on the 404.php template or use a custom-advanced filter to search and replaced the fields in the 404 URL and split them up in different dimensions. Both ways will give you the ability to track traffic on your error pages and easily fix it!

UPDATE: I wrote a short update to this post on removing _trackPageview from the tracking code.