This post was inspired by the following Linkedin post, which talks about the idea of anti-conversions: measuring negative outcomes on your website so that you can resolve them and improve the user experience.
Mikko mentions 404 errors - I'll show you how to track these and other errors in GA4.
How to track 404 errors in GA4
A 404 error occurs when a user tries to access a page that cannot be found. It's useful to track these so you can see what URLs people are trying (but failing) to access.
You can also use GA to see how they got to that page. Was it directly from Google? In that case, you should remedy the situation to avoid being penalised from an SEO perspective. Was it from another page on your website? In this case, you can identify the broken link and replace it to avoid this happening in future.
I'll use the Google Demo Account as an example. Here's the 404 page (above), which I triggered by trying to access a page URL with random letters.
In theory, you could actually analyse 404 errors in GA without adding any tracking code. To do this, just combine the page title, page location (URL), and page referrer in a table and filter for page title = Page Unavailable (or whatever your 404 error page title is).
You may also wish to set up a 404_error event in Google Analytics, which would make it easier to break down 404 errors by different dimensions if you wanted to dig more into the data.
Here are the steps to set up a 404_error event in Google Tag Manager (GTM).
1) Set up a variable for page title
We want to trigger the event based on the page title. Since this doesn't exist as a built-in variable in GTM we'll need to create it.
2) Create a GA4 event tag
Name your error "404_error"
Add your GA4 measurement ID to the tag. I prefer to do this using a variable
(Optional) Add the gtm_tag_name parameter with the name of the tag. I do this for all tags in GTM as it's useful for debugging and creating custom reports in GA.
3) Add a trigger to the event tag
We want the 404_error event to fire on page load when the page title matches the title of our 404 page
In this example it's "Page Unavailable" but this may be different for your site
Save everything and test to see if your tag fires correctly in preview mode
How to track JavaScript errors in GA4
In order to track JavaScript errors in GA4 you will need to use Google Tag Manager, which has a built-in trigger that can be used to log the errors.
1) Create your GA4 event tag
Name your error "javascript_error"
Add your GA4 measurement ID to the tag. I prefer to do this using a variable
(Optional) Add the gtm_tag_name parameter with the name of the tag. I do this for all tags in GTM as it's useful for debugging and creating custom reports in GA.
Add the error_message, error_line, and error_url parameters to your tag. Use the built-in variables to populate the values. Note, you may need to enable this if you haven't done so previously: on the main GTM screen, in the left sidebar go to variables and click 'configure' under the built-in variables section
Ensure that you set up these three parameters as event-level custom dimensions within the GA admin
2) Add a trigger to the event tag
For this tag the trigger is simple. Choose the type 'JavaScript Error' and fire it on all errors. Save everything and test to see if your tag fires correctly in preview mode
How to track form validation errors in GA4
This one is a little trickier. We're going to track errors that appear when users try to submit a form but for whatever reason it fails.
The way this works will differ from website to website so you may have to experiment with yours, but I'll show you how one might do it for the Google Merchandise Store.
Let's look at an example on the login page.
When I attempt to login without entering anything in the email field, this red warning appears saying 'Please enter your current email address'.
By right-clicking on it and inspecting the element I can see that the element has the class "danger-color-dark", which is unique to that element on the page. Based on this, we can create a trigger to determine when our form_validation_error events will fire.
1) Create your GA4 event tag
Name your error "form_validation_error"
Add your GA4 measurement ID to the tag. I prefer to do this using a variable
(Optional) Add the gtm_tag_name parameter with the name of the tag. I do this for all tags in GTM as it's useful for debugging and creating custom reports in GA.
Use the error_message parameter to pass the message seen by the user. In this case, it's the element tracked's text, so I've used the built-in "Click Text" variable. Note, you may need to enable this if you haven't done so previously: on the main GTM screen, in the left sidebar go to variables and click 'configure' under the built-in variables section
Ensure that error_message is set up as an event-level custom dimension within the GA4 admin.
2) Add a trigger to the event tag
For this tag we'll use a trigger type "Element Visibility"
To refine the firing conditions, select CSS selector and input "div.danger-color-dark". This tells GTM to trigger when the div element has the class "danger-color-dark"
Be sure to toggle "Observe DOM changes" on. This ensures that GTM is looking for changes on the page after the initial page load
Save everything and test to see if your tag fires correctly in preview mode
Final thoughts
Three final thoughts from me to wrap up:
#1 I've exported everything I did in GTM here. This may save you some time.
#2 I used the visibility trigger, but a more robust way to track form validation errors is to ask your developers to set up dataLayer events and build your tags based on those.
#3 Why not create an error monitoring dashboard using the data that these events give you? What other anti-conversions could you include?
Comments