# 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.&#x20;

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`.&#x20;

Use the code below for the value:

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

#### 04. Create a new Trigger

* Set the name to `404Error`.&#x20;
* Choose the trigger type as `Page View`.&#x20;
* 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>