Close this search box.

How to Receive Slack Notifications for 404 Errors on your Website with Google Tag Manager

Last Modified on March 25, 2024

Want to receive Slack notifications for 404 errors, conversions, leads, or any other website activity? 

You are at the right place!

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

If you’re running a business, you might have heard of or are already using Slack. It is a messaging program designed for use within a workplace.

It organizes conversations into channels, private groups, and direct messaging. In addition to these online communication features, Slack can also sync with the apps your company uses, like Google Calendar and Google Drive. 

If you want to send alerts directly from your website into a Slack channel using Google Tag Manager, you can now install our Slack Webhook tag template into your GTM account. Our Slack GTM template is available and free to download in the Community Template Gallery.

This will let you send a message directly to any of your Slack channels containing any data you may have gathered inside Google Tag Manager

Where can this be useful? If you have an error, conversion, or any other event you want to track, receiving a notification message allows you to monitor data in real-time. You can then quickly execute solutions to fix the errors if they occur.

In this guide, you’ll learn how to receive slack notifications for 404 errors.

Here is an overview of what we’ll cover:

Let’s dive in!

Account Setup

First, let’s look at how we have set up our account.

In our Google Tag Manager account, we have a tag that sets up a Google Analytics event that triggers whenever a 404 error happens.

GA4 event tag for 404 errors

Looking at the tag closely, you can see the data that is being sent over to Google Analytics. 

Here we have an event that detects the page path of the error and the referrer – which page the user came from. 

GA4 event tag configuration

Knowing these details will allow you to potentially fix the link from the page referrer and redirect the user to the right destination.

Now, what if we wanted to send this information to our Slack channel so that our team gets alerted? This is where our GTM Slack template comes in handy.

Using the GTM Slack Template

There are various ways to use a GTM custom template, but for this guide, we’ll import the template while creating a new tag.

To do so, go to Tags New.

Creating a new tag

Next, click on Tag Configuration. From here, you can access more tag types by clicking on Discover more tag types in the Community Template Gallery.

Choosing a tag type from the Community Template Gallery

Search for Slack, then click on Slack Webhook.

Selecting the Slack Webhook tag template

Click on Add to workspace. You will then need to allow some permissions, which include injecting scripts into your page and accessing the global variables. Finally, click Add.

Using the Slack Webhook template to receive Slack notifications for 404 errors

Next, we’ll have to get our Slack webhook URL.

To get this, we need to create a custom Slack app.

Inside your Slack account, click on your workspace → Settings & administrationManage apps. This will direct you to the app menu.

Managing apps in your Slack workspace

From here, click on Build. This will then take you to the apps section of the Slack API.

Building a custom app

The Slack API is an interface where you can customize your workspace. It includes a lot of features that allow you to connect, simplify, and automate your work with Slack apps.

From here, you’ll Create an App.

Creating a new Slack app

Provide a name for the app. This can be any name you want, but for this guide, we’ll call this 404 Error

Next, select your Slack workspace, then Create App.

New Slack app configuration

Now, we’ll add some features and functionalities to the app. 

In our case, the functionality we are most interested in is Incoming Webhooks, which allows us to post messages from external sources into Slack.

Adding the incoming webhooks functionality to your Slack app

Toggle the switch to activate incoming webhooks.

Activating incoming webhooks

Next, scroll down and click on Add New Webhook to Workspace.

Adding a webhook to the workspace

Select the channel where you want the app to post the messages we’ll generate. Next, click on Allow.

Selecting the channel where the app will post

Going to your Slack workspace, you should see a message stating that integration has been added to the channel.

Message notification for successful app integration to the selected channel

Now, go back to your Slack API, scroll down, and Copy the webhook URL to your Slack channel.

Copying the webhook URL for the Slack workspace

Paste this value in the Slack Webhook URL section in Google Tag Manager. The Slack message text can be anything you want, but let’s go ahead and input the same data we are sending over to Google Analytics – the Page Path and Referrer.

🚨 Note: Unfortunately, the variable menu does not work in this section, but you can still use variables in your message by enclosing the variable name with two curly brackets.

Slack Webhook tag configuration

These are built-in variables, so we should be able to pull them into our message this way. 

Next, we’ll select our trigger by clicking on Triggering.

Selecting a trigger for the tag

We have already prepared a trigger for whenever a page 404 error occurs. In our 404 Error Tracking with GTM and GA video, we covered how to create this trigger by making a JavaScript variable that grabs the page/document title. 

The trigger is set to fire whenever the page title contains “page not found”. 

Depending on how your website is set up, your page or page title can either display a 404 error, page not found, page unavailable, or another similar message. You should then adjust your trigger configuration accordingly.

Once you have created the trigger, select it from the list.

Selecting the 404 error trigger

Finally, provide a name for your tag and click Save.

Providing a name and saving the tag

Testing the Slack Webhook Tag

Before implementing the tag on your website, you should first test if it is working correctly.

For that, click on Preview.

Entering GTM preview and debug mode

Before starting Tag Assistant, put a URL to a page that does not exist on your website. Next, click Start.

Redirecting the Tag Assistant to a non-existent page on your website

As expected, the tab opens to a non-existent page and returns a 404 error. 

404 error found in the demo shop

If the error message that your page returned or the page title is different from what you expected, you may need to change how your trigger is set up.

If the trigger is set up correctly, then your Slack webhook tag should show up in the tags fired section of the Tag Assistant.

Slack webhook tag successfully fired

The final check to ensure you can receive Slack notifications for 404 errors is to check your Slack channel directly. 

Going back to your team channel, you should be able to see a message from your 404 Error app.

The Slack message sent from the custom app

The message should show the path of the page causing the 404 error as well as the full referrer URL for the 404 error page.

🚨 Note: If the variables are not appearing properly in your Slack message, then check if these variables are enabled in your GTM workspace by going to Variables → Configure. The page path and referrers should be in the pages section.

Now, somebody from your team could go ahead and say that you should fix that error. If the page path is for an irrelevant page, then you can just ignore it.

However, if the 404 error was from a link click within your website to another page, you might instead want to put in a redirect to fix this. 

Since your Slack Webhook tag can access just about anything inside your GTM workspace, the information you can relay in the Slack message is limitless. 

If you’re trying to send over conversion information, you might want to include the order ID, for example. You can also get informed about JavaScript errors and send them over to your developer so that they can fix them right away.

Technically, we are already done! You just have to publish the tag live to your website and you will start receiving Slack notifications for 404 errors.

However, we can take this Slack notification a step further by including other functionalities within the Slack message.

To do this, we need to enable the Use advanced Variables option in our tag configuration.

Using an advanced variable for the Slack webhook tag

Slack gives us the ability to customize our messages further by using its Block Kit Builder. This allows us to include images, videos, buttons, and more. We can create prototype layouts for our Slack message and use them inside a custom JavaScript variable in GTM. 

While we have a live preview of what the message will look like, most of the edits we will make are not through changing the display but by altering the JSON (JavaScript Object Notation) payload.

Feeling a little intimidated? Don’t worry because JSON is self-explanatory and easy to understand.

You can also design your Slack message by starting with a template.

Go to the Block Kit page of the Slack API. Under the Block Kit Builder section, click on templates.

Accessing block kit builder templates

The available templates give you a starting point on how you would want your Slack message to look, and how it is formatted.

🚨 Note: Not all elements available in the block kit builder will work inside the Slack message since it is not an interactive app. 

There are a lot of things we can put in our Slack message, but for this example, we’ll include a section specifying the error type, page path, and referrer. 

We’ll also add a dropdown menu specifying the status of the 404 error – if it is already fixed, still pending to be resolved, or if the team should ignore it since it’s irrelevant.

Here is what we found works best to include in a Slack message for 404 errors. 

The slack message format for 404 errors

If you want to include other items in your Slack message, click on any element from the list at the left. You can then edit its format in the JSON payload editor at the right.

Adding and editing new sections to the block kit

Once you are satisfied with how the block kit looks, click on Copy Payload to easily copy the JSON text at the right.

Copying the JSON payload

Next, go back to GTM and click on VariablesNew.

Creating a new variable

Provide a name for the variable, then click on Variable ConfigurationCustom JavaScript.

Creating a new custom JavaScript variable

A custom JavaScript variable always needs to have an anonymous function that returns a value. So, type the following code:

Invoking an anonymous function in the custom JavaScript variable

Next, paste the JSON payload after the return portion of the code. Finally, click Save.

Pasting the JSON payload to the custom JavaScript variable and saving it

Let’s return to our Slack webhoo