Using GTM to Track 4xx & 5xx Errors in Google Analytics

Recently I was with a client, browsing around their website to review some new content, and we ran across a “500 – Internal Server Error” warning on one of the most important pages. (That means their server encountered an error that prevented it from successfully serving the page.) None of us were aware of this, nor did we know how long it had been an issue.

Most websites (even big ones) contain no automatic reporting of such errors. Problems like this are usually exposed when someone else (a coworker, an angry website visitor, etc.) finds and reports them. That’s terrifying if you’re responsible for an organization’s web presence. What if visitors are experiencing errors and nobody is reporting it?

Because of this I’ve started using GTM to help me create alerts for such errors, as experienced by actual users. Errors are logged in Analytics, and when certain (custom) thresholds are met an alert is automatically sent via email. This blog post outlines how it’s done.

Step 1: Use Custom Error Pages

You probably know what standard error pages look like, but here’s an example:

YouTube’s 500 Internal Server Error Page

The problem with this type of standard page (in addition to questionable aesthetic sensibility) is that it doesn’t have Google Tag Manager on it. Because of that we can’t use it to send data to Analytics. We need to use custom error pages (with GTM included in the HTML) to send data to Analytics. Custom error pages could be part of your CMS. They could be static files. That’s up to you; they just need to have GTM on them.

Having custom error pages has become a best practice over time (because it provides better usability and a custom experience, even if errors are encountered). There are lots of resources available to help depending on what kind of server you’re using. Agencies should provide them by default when creating websites (in my opinion, at least). That said, the process here is pretty simple:

1. Create simple custom error pages for relevant status codes
2. Make sure the page says “500 Internal Server Error” (or whatever) in the body copy
3. Make sure GTM is included on custom error pages
4. Configure the server to serve that page (instead of a default message) when that error occurs

If you’re running an Apache server with WordPress, configuring the server is as easy as adding the following lines to .htaccess:

ErrorDocument 404 /errors/notfound.html

ErrorDocument 500 /errors/internalservererror.html ErrorDocument 501 /errors/borkedimplementation.html

Note that different systems (and developers) will require this to be done in different ways. That’s fine as long as the result is a custom error page with GTM on it. You can do this for any (or all) of the many 4xx and 5xx error codes.

Step 2: Setup Google Tag Manager

Setting this up in GTM is basically done in 3 parts:

1. Create a custom JavaScript variable that scrapes body content and looks for “500 Internal Server Error” (or whatever)
2. Create a trigger that’s based on the value of the JavaScript variable
3. Create a GA event tag that sends data to Analytics when a 500 error (or whatever) is encountered

First, create a custom JavaScript variable that scrapes the page and looks for some text. I used this example from Aleksandrs Pasters:

function () {
var content = document.body.innerText;
var query="500 Internal Server Error";
if (content.search(query) > -1 ) {
 return true;
} else {
 return false;
}
}

That script runs on every page, and if it finds “500 Internal Server Error” in the text on the page, the variable is set to ‘true.’ It ends up looking like this in GTM:

Next you’ll want to create a pageview trigger that fires when the custom JavaScript variable is true. Here’s how I’ve setup the trigger in GTM:

And finally, create a new Google Analytics event tag that sends data to Analytics when a 500 error (or whatever) is encountered. Here’s how I’ve set that up:

I’ve set the event category to “Site Error” so that I can collect 4xx and 5xx errors under one category. The only identifier that needs to change for each different type of error is the event action (e.g., 404 error, 500 error, 501 error, etc.).

Once all of that is done, go ahead and test it out (although it can be hard to instantly replicate 5xx errors so you may just want to let it run for a while).

Step 3: Setup Alerts in Google Analytics

This is an error that I don’t want to proactively monitor. I want Analytics to alert me when errors increase. Here’s how I setup an Analytics alert based upon information above:

This is setup to send me an email whenever 2 500 errors are encountered on any given day. You’ll definitely want to customize the values for each separate type of error alert that you setup. Setting values too low makes error reporting meaningless, and setting values too high makes reporting less useful than it could be. Tweak values over time as needed.

This is a great way to stay on top of website errors because it tracks them from users’ browser and allows you setup customized alerts. And it’s fairly simple solution. Feel free to put your comments and questions in the comment box below.