How to Build Your Own Event Driven Timer Trigger in Google Tag Manager

By | August 31, 2019

In this video, I’m going to show you how you
can start a timer trigger based on the interaction of a user. All and more coming up. Hey there, welcome back to another video of teaching you the data-driven way of digital marketing. My name is Julian. And today we want to talk about the timer
trigger. Now the timer trigger something that is built-in
to Google Tag Manager. I don’t often use it, because you can really
just utilize it when a user comes to the page, start a timer, and then after a few seconds,
you can fire your tag. So the use case is really limited because
we cannot control when the timer trigger actually starts. So today, I want to show you a workaround
where we’re going to build our own timer trigger that we can start based on the interaction
of the user. That is particularly useful if you will have,
for example, some message that you send off, and then an error or success message appears
after two seconds. You want to start the timer, and then check
the element if there is a success or error message. That’s exactly what we’re going to do today. And we got lots to cover. So let’s dive in. For a little demo. Here, I have found a CodePen by Immanuel who
has come up with this little send button here that either shows a success or an error message
after two seconds if we click it. Now, I’ve modified this a little bit to build
in Google Tag Manager. And when I click the Send button, you see
I’ve already built in a click trigger that gives us this event here. Now, our case here is we want to detect whether
there’s an arrow or success message after we click the button. But obviously, as you see, it takes a while
for the success or error message to display. It’s actually two seconds to be exact. Now, you could take this as an example of
sending off a request, sending of a validation getting something back from the server, which
just takes a while. You wouldn’t actually know, but approximately,
you know, the time that it would take till the user gets shown the error or success message. So how can we track this with Google Tag Manager? Just to demonstrate, if we would use the built-in
time a trigger here, let’s go over and build one of these timer
triggers down here. We can set up the event name that should be
pushed into the data layer the interval, so that would be the time in milliseconds. In our case, let’s go with 2.5 seconds. And the limit how often it should repeat counting. In our case, just one. And then you need to choose the condition
when it should be deployed. In our case, when the page hostname contains
code pen, that should be fine. And you’ll fire this on all times for now. Let’s saved this and refresh. Go back to our page. And we see the problem after two seconds,
we have our GTM timer in here. But we have no way of starting the timer again
or having it start on an interaction. The only interaction that we can start this
one is the actual page view. So once this event loads, the GTM timer will
start counting. Not very useful in our case, because we never
know when the user will actually click that send button. So we need to come out with a little workaround. First of all, we want to get the actual text
of the button. And normally, you would do this via a click
variable that you have maybe activated. But in our case, it wouldn’t show anything
as when we click on this button, the success or error message is not yet shown. So we would need to use a different technique. Luckily, we have a variable available for
this, which is the DOM element variable. So let’s come figure one. And the user-defined variables. We’ll go with our DOM element variable right
here. And we would need to select the ID or a CSS
selector. Now let’s look at our button in the developer
tools. And we can see we are lucky we have an ID. In most circumstances, you probably would
use the CSS selector. But for our case, we could go with an ID,
we just need to enter the ID which is a request. And we don’t need to enter an attribute name,
the attributes are right here because we want to get the actual text right here, which is
the default if you don’t enter any attribute name. So we are fine on this side. Let’s give this a name and save this and see what it says. So go back to the page reload. And we should see in our events right here at the timeout, for example, that our button
text is now sent. Really on any other event, it would also be
sent. Now if I click this button, we have our GTM click. And we look into the variables and we still
see the Send, which is unfortunate, because, at a later point, we actually want to reject
this variable and exactly after two seconds, we want to reject that variable to see what
the contents actually is, is it an error or is it a success. So now is where we can build our own 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 deploys a data later push. So let’s go over to tags and configure this. We’ll go with a new custom HTML tag, where we’re gonna write in some JavaScript. So we’ll put this into a script tag. And we can use the built-in JavaScript function,
which is set timeout. Now, this takes two parameters, one is a function
that should be executed, and the other is the time in milliseconds. So when do we want to check this? Again, I will go with 2.5 seconds. Now inside of this function is where the magic
happens. This is the code that we want to deploy after
2.5 seconds. In our case, we just want to have a data layer
event so we can recheck our variable. Easy as that we just push something into the
data layer with our normal push command. And the data that we want to push the data
layer is an event with the key GTM timer. We could name this anything else. But GTM timer will do for now. The best practice is to always wrap your custom
JavaScript in an IIFE. Now an IIFE is an Immediately Invoked Function
Expression, which ensures that you don’t pollute your global namespace. Really something that you should wrap your
custom JavaScript inside of your custom HTML tags in. For this JavaScript, it wouldn’t actually
be so bad. But as a best practice, I always put my custom
HTML in an IIFE. Now, let’s give this a name. This is simply a listener for our two-second
timer and a trigger. Now the trigger is simply the button click,
that’s when we want to start the timer. So we’ll choose our click trigger and save this, Do not get mixed up. Let’s get rid of our timer trigger and refresh our preview and debug mode. Refresh our page and no timer is firing. If I click Send, we have our GTM and click
and two seconds later, we should have our GTM timer in here. So we have a new event where we can definitely
check our variables and see what button tags is. It’s error, and therefore, we could send it
back to our tracking tools, such as Google Analytics, or use that in our variable. Let’s make an example of that. First of all, let’s build a trigger for this
event. This would be a custom trigger on our two second timer. All right, let’s use our custom event here
with just simply enter our GTM the timer event that we had in our data layer. And we only want to turn this trigger true
when the dump button text contains success. Let’s save this. And now we can use that trigger to fire a
tag. Now, just for an example. Let’s go with a Google Analytics tag. So be an event tag with successful button click. All right, we’ll go with an event and button click and success. We still need a tracking ID. And just for a test that should do it. That’s good. Our trigger setup, save this and refresh our page and send this off. We have our GTM timer, and our tag doesn’t
fire. Now if I click again, we get a success message and our Google Analytics
event Successful button click has been deployed. So this is how you can get around the GTM
timer only firing on the page view by building your own listener. I’m also going to link up the HTML down below. Don’t forget, if you want to have this live
on your website, you need to submit this as a version so it goes live on your website. All right, so there you have it. This is how you can build a timer trigger
based on the interaction of the user and it actually started when the user clicked on
the button. Now you might be asking yourself, why didn’t
he used the element visibility trigger? Fair question. In this case, I would definitely use the element
visibility trigger and try it out and see if it works. But I have encountered some cases where our
client’s websites, the appending of the new DOM element actually happened and the element
visibility trigger wasn’t able to pick that up. In this case, it would be useful to actually
have such a time a trigger that can wait for certain given time after a user has done his
interaction and then check the DOM and that’s what we did in this video. So I hope this was useful to you and you encounter
such a case at some point and then think back to that GTM timer trigger that we have built
today. Now love to hear from you. Do you have any more questions? Leave them in the comments down below. And as always, if you like this video, give
us a thumbs up and also subscribe to this channel because we bring you new videos just
like this one every week. Now, my name is Julian. Till next time.

8 thoughts on “How to Build Your Own Event Driven Timer Trigger in Google Tag Manager

  1. Alexander Voit Post author

    Can you make a video on how to pass url parameters from one page to another? I want to be able to extract the data I stored in a cookie and send the data via url parameters to another page

  2. Axel Ax Post author

    Thank you for your tips as always! I have a problem with the timer:

    I tried the Timer Tag with a slide show. I want to get the new image src after a "Next"-Button Click into a GTM-Javascript-Variable. In debug mode, when the timer tag fires the variable has the correct value. But when the data is sent to GA via a UA-Tag its always the old value. The Timer-Tag is fired first and then the UA-Tag as a cleanup tag.

  3. Rômulo Gomes Post author

    Hi Julian. Do you know if there's any free wordpress theme with built-in stuff on the datalayer so I can play with? I want to do some tests to learn faster but I don't have a website with events and a decent datalayer to test. I hope you can help 🙂 thanks!

  4. Josh Silverbauer Post author

    This was an amazing vid, saves me such a headache I was going through yesterday. Question, at 7:02 it looks like you push a shortcut .iffe which populates function, was this edited or is there such a shortcut? I had no luck when recreating.

  5. mara prayogo Post author

    Thank you for this lovely videos. What if i want to track time duration on each image of a slider…?

  6. Joona Viitanen Post author

    What if the user starts smashing the button? Won't that trigger multiple timeout methods? In my case, I don't know how fast the success message will display. Hence, I created a setInterval to check the status every 0.5 seconds up to ten times (5 seconds). The problem is that if the user starts to spam the button, there will be multiple intervals running, which may(?) cause problems. How it would be possible to terminate the previous call every time a button is clicked?


Leave a Reply

Your email address will not be published. Required fields are marked *