≡ Menu

Using Google Tag Manager to log JavaScript errors in Google Analytics

As a developer, client-side errors can be a real pain.  Developers usually do a good job logging server-side application errors, but often times ignore client-side errors.  As the web evolves, we’re seeing more and more single page applications that are heavily reliant on client-side service calls using technologies like AJAX.  This makes sites heavily dependent on JavaScript.

Google Tag Manager just released a new listener tag type, the ‘JavaScript Error Listener’.  The JavaScript Error Listener will allow you to capture client-side errors that would otherwise be invisible to the server and log them to Google Analytics or another service of your own choosing.  For my example, I’ll be logging JavaScript errors to Google Analytics as an event with the error itself as the event label.  Bear in mind that the maximum size for an event label is 500 Bytes which will let us store 500 characters.

The first thing we need to do is add the JavaScript Error Listener to our tag container:

Screen Shot 2014-03-13 at 8.56.27 PM

Now that we have the JavaScript Error Listener in place with a firing rule of ‘All Pages’, I’m going to publish a debug version of the container so I can inspect the gtm.PageError object that will be pushed to the data layer when a JavaScript error occurs.  To do this, I’ve created a simple test page with a JavaScript error that results when the link is clicked because no function with that name exists.  Once I opened the test page:

  1. I opened the Chrome developer tools
  2. Clicked the link on the test page to cause the JavaScript error
  3. Typed ‘dataLayer’ in the console to inspect the dataLayer and expanded the last item (most recently added) to see the contents of the gtm.pageError event.

Screen Shot 2014-03-13 at 9.08.34 PM

Now I can see that the ‘gtm.errorMessage’ field is populated with some useful information about the uncaught exception.  To log this to Google Analytics as an event, I’ll need to add a new tag in GTM with a firing rule of {{event}} equals gtm.pageError and create a new macro for the gtm.errorMessage object.

Here’s the rule to fire the GA event when an error occurs:

Screen Shot 2014-03-13 at 9.21.06 PM

The macro to pull in the JavaScript error message:

Screen Shot 2014-03-13 at 9.21.52 PM

and finally the GA event tag itself:

Screen Shot 2014-03-13 at 9.22.45 PM

Now when a JavaScript error occurs on your site, you’ll be able to see them in your Google Analytics event reports:

Screen Shot 2014-03-13 at 9.28.11 PM

To take this a step further, I’d suggest setting up custom alerts to send an email when JavaScript errors occur on your site.

Questions or comments?  Get in touch with me on Google+ or leave a comment below.

Comments on this entry are closed.

  • http://trackjs.com Todd Gardner

    Hi Dan, Thanks for putting this together, looks super helpful!

    If you’re looking to get even better details about JavaScript errors, take a look at trackjs.com. The data is focused on recreating and fixing the errors–not just knowing they happened.

    Todd.

  • Tony Zara

    This is a terrific walk through. I modified this a little buy using JavaScript Error as the Category, the errorMessage as the Action, and I made a new macro for the dataLayer variable gtm.errorUrl to set that as the Label. That way I can see in my events which script is causing issues.

  • http://mequedouno jose leite

    Hi, where can i find a TGAMANAGER error list, of course about implementation errores

  • Pingback: Capturing client-side javascript Errors | koding notes()