How to Track and Fix 404 Error Pages With GTM?

How to Track and Fix 404 Error Pages With GTM?

How to track and fix 404 error pages with GTM? Find the URLs in GA4, create tags, set up triggers, and then fix them by setting up 301 redirects.

By: Mussarat Nosheen | 5 mins read
Published: Nov 29, 2023 2:38:20 AM | Updated: May 15, 2024 01:46:24 AM

Are the 404 errors affecting your website SEO, but you don't know how to find and fix them?

A 404 error page is unavoidable for any website. 

It is, therefore, necessary to have a system in place to track and fix them.

We will show you how to find and fix 404 error pages on your website with GTM in our blog.

Dig in.

What is a 404 error?

A 404 error occurs when a user arrives on a page on your website that no longer exists. 

It could happen because the page got deleted, a broken link, or moved to another location. 

Such errors give a negative impression of your website, can increase bounce rates, and even hurt website ranking. 

Learn how to choose the right Google Tag Manager Consultants in this blog. 

How to Track 404 Error Pages in GTM?

Create a Variable for the Page Title in GTM

In this step, we will create a variable in GTM to pull the page title of the 404 error page

The variable will then fire a custom Event in GA4 whenever a visitor lands on a page with the matching title. 

  • Go to Google Tag Manager > Variables > User-Defined Variables, and click the New button at the right.

Go to GTM and create new variable to set up 404 alerts

  • Click the Variable Configuration to Choose the variable type to be JavaScript Variable.
  • In the Global Variable Name type document.title rename the Variable as JS - Page Title at the top of the page and hit Save.

Let the global variable name for the 404 error variable  in GTM be document.title

 

Rename the 404 error variable in GTM as JS - Page Title

Create a Page View Trigger in GTM

The trigger will set off the tag we create in our next step. 

  • Google Tag Manager > Triggers, click the New button at the right.

Create a trigger in GTM to track a 404 error

 

  • Click Choose a trigger type to begin setup in Trigger Configuration,

Select Page View trigger type to create a trigger for 404 error 

  • Choose Page View to be the Trigger type, and in This trigger fires on, choose Some Page Views
  • Next, select JS - Page Title (created in the previous section) as the Firing condition and enter the title of your 404 error page, name the trigger 404 error page, and Save

Save trigger for 404 error page in GTM

If you have any queries about our analytics services, get in touch with us to let our team of highly professional experts take care of your concerns.

Create a Custom Google Analytics 4 Tag in GTM

We will now create a custom GA4 Event tag in Google Tag Manager to fire up every time a user visits a 404 error page

  • Go to Google Tag Manager > Tags, and click New.

Create New tag in GTM to fire every time someone lands on a 404 error page

  • Scroll down to Triggering, click Choose a trigger to make this tag fire, and select the 404 error page Trigger created in the previous step. 

Choose the trigger to track 404 error pages in GTM

  • Now click on the Tag Configuration, and in Choose tag type, click Google Analytics.

In Choose tag type select Google Analytics 4 to create a 404 error tag in GTM

  • New options will appear; select Google Analytics 4: GA4 Event

Select Google Analytics 4: GA4 Event to create a custom GA4 tag in GTM

  • Type Event Name as 404 error, select the Measurement ID , name the tag GA4 Error Tag at the top, and hit Save

Save the GA4 tag for 404 error in GTM

  • Click Preview at the top right of the Tags page to view your newly created tag in GTM’s debug view to see if it is firing. Then, hit Submit to publish. 

Preview the GA4 404 error tag in GTM and then Publish.

Your tag is live and will send information to GA4 every time a visitor lands on a 404 error page

Knowing this will let you know which pages need fixing. 

Create a Custom GA4 Tag in GTM for 404 errors in HubSpot CMS Websites

Add Code to Google Tag Manager

  • Go to a 404 error page, right-click, and choose Inspect; drag the inspect icon to the text, and you will find the HTML tag containing the 404 text. 

Inspect 404 error page to find the HTML tag with the 404 text

  • Then, add a code like the one below to your Google Tag Manager setup. Our text was in the H1 tag; you should replace it with the one applicable to your website. 

 

function (){

var pageH1 = document.querySelector('h1').innerText;

return pageH1;

}

  • Now go to Google Tag Manager and click Preview at the top right of the Overview page.
  • Enter the URL of one of your 404 pages and Connect
  • Proceed to create a tag and trigger if you find the Page not found event. 

Create a Custom Trigger in GTM

  • Go to Google Tag Manager > Variables > New, click Variable Configuration, and click Custom JavaScript in the Choose variable type.
  • Enter the same code from the previous step into the code box and hit Save

Create custom JavaScript tag to trigger 404 error in GTM

  • Type the title of your 404 error page (page not found in our case) in the Event name, select All Custom Events for This trigger fires on, and click Save
  • Then go to Google Tag Manager > Triggers > New > Trigger Configuration > Page View, select Some Page Views in This trigger fires on.
  • Choose the custom 404 Variable just created, type Page not found (or whatever is applicable), give it a name, and click Save

Create custom trigger for 404 error in GTM

  • Click Preview to check if the tag is working and then Submit to publish.

Create a Google Analytics 4  Tag in GTM

  • Go to Google Tag Manager > Tags > New, click to Choose tag type in the Tag Configuration, and click Google Analytics, select Google Analytics: GA4 Events.
  • Select the ID for the custom trigger created in the previous step in the Measurement ID, and type a suitable Event Name.
  • Choose the custom trigger created in the previous step in Triggering, give the tag a suitable name, and click Save

Create Custom 404 error tag in GTM

How to Find 404 Error Pages in GA4?

If You Have A Dedicated 404 Error Page

  • First, check the title of your website’s 404 page by typing, for example, www.yourwebsite.com/nonsense. We got Page not found.
  • Go to Google Analytics 4 > Reports > Engagement > Pages and screens.
  • Scroll down to the table, switch the title from the drop-down to the Page title and screen class. Enter the title of your error page. 
  • You will find a list of all the URLs with the 404 error.

If You Do Not Have a Dedicated 404 Error Page

  • Go to Google Analytics 4 > Explore > Freeform.
  • In the Variables, go to Dimensions and import Event name and Page path + query string, then double click them to add them to the canvas. 

Add dimensions to explorations to find 404 error pages

Add page path + query string dimension to Exploration to find 404 error pages in GA4

  • Import the Metrics Event count and Views,  and double-click them to add them to the canvas.

Import event count and Views Metrics in Explorations to find 404 error pages in GA4

  • In the settings tab, go to Filters, add Event name, select exactly matches in Conditions, and in the Enter expression tab, write 404Error, and click Apply.

Apply filter to find the 404 error page in GA4

 

  • You will find all the URLs for pages with 404 Error pages.

Exploration report for 404 error pages in GA4

How to Fix 404 Error?

You have created triggers to find out about your 404 error pages and found the links with the 404 errors. 

A natural next step would be to fix them. The whole point of this entire exercise is to decrease your bounce rate.

Visit each link individually to find the problem and fix the 404 error accordingly. 

Here are the ways you can fix your 404 errors.

  • Fix a Broken Link - if the error occurred due to a broken link, carefully inspect and try to fix it. 
  • Create a 301 Redirect - web pages are moved for numerous reasons. To avoid issues, create a 301 redirect on the existing page every time you move content to a new URL. 
  • Create a Dedicated 404 Page - create a dedicated 404 error page informing visitors about the cause of the error.  

Conclusion

The blog explains how to track and fix 404 error pages with GTM.

A 404 error appears when a user visits a page on your website that is not present there.

If you have a 404 error page, you can find it in GA4 Engagement Reports, in the Pages and screen names.

Otherwise, create a Freeform Exploration report to find the URLs with the 404 error.

To track these error pages in Google Tag Manager, follow three steps.

First, create a Variable for the Page Title in Google Tag Manager.

Second, create a Page View Trigger, and finally, create a Custom GA4 tag in GTM

The tag fires every time a user lands on a page with a 404 error.

If you do not have a 404 error page, simply write a code into your Google Tag Manager setup.

Then, create a variable with that same code. And follow through by creating a trigger and custom GA4 tag with the new variable.

To fix these errors, inspect the URLs found via GA4.

The primary action would be to create 301 redirects to the new location of those Web pages.

Other solutions include fixing broken links and creating dedicated 404 error pages on your website.

Like what you read? Learn more about Digital Analytics on our blog here.