404 Error Tracking Event with Google Analytics and Google Tag Manager

A general outline can be found in this video https://www.youtube.com/watch?v=kKIyvycJbzs. It is recommended to see it first, to get an idea of what we are trying to accomplish. However this is 4 years old and the interface of the Google Tag Manager has changed. There are also differences relevant to SprocketRocket, such as the fact that we can not base our trigger on the value of the page title. The title tag is empty in the 404 page, as the variable we use by default - {{ page_meta.html_title }} - has no value inside the system pages. There are also situations where chat scripts like the Intercom Chat Assistant loaded on Qualio.com rewrite the title tag.

Instead we can take advantage of our ability to edit the template of the system pages. We can add an ID attribute to the HTML tag with the following value: id="404Page". We can later use this attribute to trigger our event.

Here are the steps to setup this tracking event:

01. Turn on Preview mode inside Google Tag Manager

02. Trigger a 404 page error on the target site.

If the Google Tag Manager console does not appear, do a hard refresh of the browser.

03. Define a new Custom Javascript variable with the name 404 Body ID.

Use the code below for the value:

function () {
  if(document.getElementById('404Page') === null) {
  	return false;
  } else {
    return true;
  }
}

04. Create a new Trigger

• Set the name to 404Error.

• Choose the trigger type as Page View.

• Fire the trigger when 404 Body ID equals true

05. Set up a new Google Analytics Tag

Use the following settings:

• Name: Google Analytics - Event - 404 Error

• Tag Type: Google Analytics - Universal Analytics

• Track Type: event

• Category: 404 Error

• Action: {{ Page Path }}

• Label: {{ Referrer }}

• Non-Interaction Hit: true

• Trigger: 404Error

06. Test the trigger and the tag

Go to Google Analytics > Real-Time > Events and choose Events (Last 30 min) in the view options. Trigger the 404 page again and check if the event appears in the list.

07. Save changes

Once the tracking is functional, return to the Tag Manager and submit the workspace changes. This will bring the update live.

08. View Analytics

To track the errors in the long term, go to Google Analytics > Behavior > Events > Overview. Adjust the date range accordingly at the top of the page. In the Events Category click on the 404 Error category to see the results.

References

• https://www.youtube.com/watch?v=kKIyvycJbzs
• https://support.google.com/tagmanager/answer/7182738
• https://support.google.com/tagmanager/answer/7683362