How to Build a Custom Event-Driven Timer Trigger in Google Tag Manager

Google Tag Manager has lots of built-in triggers, but what if you want to track users on a delay after an interaction? For this, you’ll want to build a custom event-driven timer trigger.

An event-driven timer trigger sends your events to the Tag Managers on a delay after a user action. Thus, you can use it to measure the amount of time a user spends on a page to complete a task (say, completing a form, playing a game, or perusing your shop).

If you’re new to Google Tag Manager, we’d suggest checking out our GTM for beginners guide.

In this guide, we’ll show you how to create a customized timer trigger based on a user interaction on your website. 

An overview of what we’ll cover:

So let’s dive in!

How Do Timer Triggers Work in GTM?

The timer trigger is a built-in feature of Google Tag Manager, but you can heavily customize it around your tracking specifications.

When a user arrives on a page that uses this trigger, the timer starts. After a particular duration of time, you can fire the Tag on your web page. 

This is a useful feature when you want to display a success or error message in response to a user action, such as submitting a contact form. However, the feature is limited in this application because we can’t control when the trigger starts — it just deploys on the pageview.

This means that if you want to track duration based on an event rather than a pageview, you’ll need a different approach.

For this tutorial, I’ll demonstrate using a CodePen (by user Immanuel Pandiangan). This code creates a “Send” button (like for a contact form) that will display either an error message or a success message two seconds after it is clicked. (We’ve modified this button by linking it to the Google Tag Manager and applying a click trigger.)

Using CodePen simulations to generate a send button

If you had something similar on your website, you would want to detect whether there is an error message or success message when a user clicks the button. After all, it’s important to know how users are engaging with your content and experiencing your site!

However, if you just deploy a click trigger to observe the result, you won’t track any useful data. Since the error and success messages don’t appear for two seconds, that data won’t be available yet on a user click.

Your use case may not look identical, but many actions (form submissions, checkout payments, etc.) can take some time to send a request, send validation, and get data back from the server. We’ll learn to track these messages with Google Tag Manager so that you can record user results.

Let’s build a timer trigger on Google Tag Manager! 

Build a Timer Trigger in GTM

We’ll start with the built-in default timer trigger in Google Tag Manager.  Go to Triggers → New from the home screen of Google Tag Manager to build a time trigger. 

The trigger type will be Timer. Next, choose the time Interval after which the trigger will push the data into our account. We’ll keep this interval as 2.5 seconds, which we’ll enter as 2500 milliseconds.  Then, set the Limit to 1. This is the number of times the data will repeat counting.

Finally, we’ll choose the conditions to deploy the trigger. Our conditions will be Page Hostname contains codepen, but you should fill the string box with your own domain.

Lastly, set up the trigger to fire on All Timers. Once done, you can give a name to the trigger and click on Save

Configuring a timer trigger in Google Tag Manager

Once saved, open your website using Google Tag Manager’s preview mode. When you open the page, you’ll notice that although our GTM timer is in place, we still don’t have any means to start this trigger. 

Verifying fired Tags on Google Tag Manager

We need to designate an interaction to start this trigger. Since the only interaction so far is the pageview, the timer will start itself when the customer opens the page. 

However, this is not useful for our use case because we don’t know when the user might click the send button. 

So let’s explore a workaround that will start this timer on a custom event! 

Get the Text Value of Your Button (Before Clicking)

Our first step is to obtain the actual text of the button on our website. (For those thinking ahead — this is so we can use the DOM element variable to activate the timer on the button.)

To do this, open Variables → New

Creating a new variable on Google Tag Manager

For the new variable, we’ll select either an ID or CSS selector to identify the button that will start the timer. 

On a separate tab, right-click on the button and select Inspect

Inspecting an element to access the Data Layer ID

This will open the Elements tab, which contains the element’s ID. In our example, the ID is request.

Accessing the element ID from the Data Layer of an element

In your new variable configuration, choose DOM Element as the Variable type. The Selection Method will be ID, since we’ve already found the ID of our element: request.

We won’t use an Attribute Name for this because we want the name of the attribute to be the output in the data we receive: either “Success” or “Error,” depending on the message the user sees. 

Finally, give a name to this variable and click on Save

Configuring a DOM Element variable with ID Selection method to Google Tag Manager

Let’s review how this will look in the preview and debug console. Reload the page and click on the Send button.

This will fire gtm.click under Variables. The value shown for the DOM Element button text will be SEND

Verifying the variables fired on Google Tag Manager

However, we eventually want to see the final value of either SUCCESS or ERROR, as shown on our customers’ web page after they click the button.

Hence, we’ll now need to enhance our timer trigger with the help of a custom HTML Tag.

It’s pretty simple, really — we just need to fire a Tag that waits two seconds, and then deploy a data push.

🚨 Note: With the DOM Element Variable you can transfer any value from your website into a Variable and pass it on to your Marketing tools

Set Up a 2-Second Listener Tag

Start by creating a new Custom HTML Tag. We can use the built-in JavaScript function to set a timeout.

This function will be in two parameters: one is a function that should be executed, and the other is the time in milliseconds. 

For this example, we’ll use 2.5 seconds as the time in this JavaScript function because we want to deploy the code after that amount of time. We’ll also add the element event, with the key as gtm.timer. This will result in a script that looks like this:

<script>
(function () {
setTimeout(function(){
  dataLayer.push({
  'event': 'gtm.timer'
  })
  }, 2500)
})();
  
  </script>

You can also grab this code from our GitHub repository. Remember to adjust the duration or event name in this script to match your configuration!

💡 Top Tip: One of the best practices is to wrap up your Javascript with an IIFE inside your HTML Tags. An IIFE is an Immediately Invoked Function Expression, which ensures that you don’t pollute your global namespace.

Configuring an HTML script to a custom HTML Tag in Google Tag Manager

Next, add a click – button trigger to the Tag (a click trigger for your Send button), add a name to the script Tag, and click on Save

Configuring a click button trigger to a custom HTML Tag in Google Tag Manager

Refresh your preview mode view and click on the Send button again. 

This time, we’ll see that we have a gtm.click event, followed by a gtm.timer event after two seconds. 

Verifying successful timer firing on Google Tag Manager

If this value is Error or Success, we can send this data to our tracking tools or even use it with our variable. 

Let’s see how! 

Create Custom Triggers Using Variable Button Text

First, we’ll need to create a new Custom Event trigger. This is a trigger that fires when another event Tag fires.

The Event name that starts this trigger will be gtm.timer, and we’ll set this trigger to true when the dom – button text contains SUCCESS. Of course, make sure to adjust this according to the variables and values in your own configuration.

Once this is done, give a name to the trigger and Save it.

Configuring a custom event trigger for successful button clicks in Google Tag Manager

Next, let’s add a Tag to fire on this trigger so that we can send the “Success” message data to our tracking tools.

(If you also want to track and send “Error” message data, repeat the above process but set the trigger to fire when dom – button text contains ERROR.)

Create Tag to Fire After 2 Seconds

In Google Tag Manager, create a new Google Analytics Tag (either for Universal Analytics or GA4 — whichever fits your current tracking system).

In this example, our Event Category will be Button Click, and the Action will be Success (or Error, if you made another trigger for this). Feel free to use any parameters that will help you analyze your data.

We’ll also add our Tracking ID to ensure that the data arrives at the correct Google Analytics property. Once done, attach the two-second trigger that we just created and click on the Save button. (Again, repeat the process if you also want an “Error Button Click” event.)

Configuring an event Tag and attaching a trigger to it in Google Tag Manager

Our Tag is now ready to fire!

But before publishing it live, let’s review it to be sure everything is working correctly. 

Testing

Reload the page in GTM preview mode and click on the Send button. It shows an Error message the first time.

If you created a Tag for the Error message, you should see it fire on this result. In this example, we skipped this step, so the event Tag doesn’t fire. 

Verifying unfired Tags on Google Tag Manager for unsuccessful trigger timer

However, when the Send button shows Success after clicking, the Success message Tag fires successfully. 

Verifying fired Tags on Google Tag Manager for successful trigger timer

Thus, our Tag is working correctly and we can submit this GTM configuration as a version to publish the Tags on your live website. 

Summary

So that’s how you build a custom event-driven timer trigger that fires after an event instead of a pageview!

This trigger helps tremendously when you want to display a dynamic message to your customers, and the message can involve either success or error outcomes. 

Additionally, if you want to collect even more data using the timer triggers that you created, you can also pull the relative click by a custom JavaScript variable for better results. 

Were you able to install the timer trigger on your website? What are some of your best use cases for event-driven timers? Let us know in the comments below! 

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.