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 measureschool.com 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.
For more infomation >> Magic Picnic Food Story for Kids from Steve and Maggie | Free Speaking Wow English TV - Duration: 7:04. 
For more infomation >> Does Tea Tree Oil Have Hormonal Side Effects? - Duration: 4:36. 
For more infomation >> Kdo doopravdy jste? | TEST OSOBNOSTI - Duration: 7:05. 
For more infomation >> Las Noticias de la mañana, miercoles 12 de septiembre de 2018 | Noticiero | Telemundo - Duration: 7:09. 
For more infomation >> New BMW G310RR Sportbike Launches 2019 | Mich Motorcycle - Duration: 2:06. 
For more infomation >> First Alert Weather - Duration: 2:22. 
Không có nhận xét nào:
Đăng nhận xét