In this lesson we're going to talk about how you can deploy tags upon interactions such
as button clicks with the help of Google Tag Manager.
All and more, coming up.
Hello there.
Welcome back to another video of measureschool.com teaching you the data-driven way of digital
marketing.
My name is Julian.
And in our last lessons, we have learned how we can utilize Google Tag Manager to deploy
tags on the page load such as all the pages that we have on a page or just a specific
page.
But one thing that we haven't talked about yet which is really a power of Google Tag
Manager is the auto-event tracking feature.
This feature let us pick up any interactions such as button clicks or form submit, or scrolls
or YouTube plays on our website and then fire our tags.
So we will not be just restricting ourselves to certain pages where we want to deploy our
tags.
But actual interactions that the user takes on our website.
How exciting.
Speaking of exciting, there is a quiz that I prepared for you at measureschool.com/lesson6
where you can test your knowledge after this video.
So pay close attention, we got lots to cover let's dive in.
In the last lessons, we have fire our tags on two particular triggers.
This is the all pages trigger which is deploying these tags on all the pages.
We have Google Tag Manager installed and we have created a specific trigger, which is
our purchase trigger.
And what happens within Google Tag Manager is that every time the page reloads.
So if you go to a new page here,
our trigger gets evaluated and Google Tag Manager decides whether to fire our tag or
wait for the next time a page loads to evaluate your trigger again.
So for example, here on this page view, we have our Facebook page with all pages trigger.
And if I click on it and scroll down, we can see here our all pages trigger evaluated to
true.
This is the little check mark here and our tag fired and deployed our tag.
As opposed to this Facebook ads event on the purchase event.
This didn't fire because we specified a filter rule right here which states that the page
URL needs to contain checkout order received, which is obviously not the case.
Now, all of these triggers are the rules that determine whether your tags would fire or
not.
And they get evaluated on certain events.
And these events are like checkpoints that you see here on the left side.
Every time we reload the page three events get sent by default, which is the page view,
the DOM ready, and the window loaded.
And right now we are evaluating on the page view event.
This means at this event at this point in time, our trigger gets evaluated and checked
for certain conditions.
Now, what we want to do in this lesson is actually trigger
a tag upon a button click, for example this.
But when this button click happens, we don't actually have anything inside where we can
check upon this event whether our condition turn true.
So we need to somehow let Google Tag Manager know that there is a click that happened.
And this is what we're going to use auto-event triggers for.
Let's take a look at how they work.
So when we deploy Google Tag Manager and our trigger, then our trigger determines whether
we should fire our tag and deploy the code that sends information for example, to a tool
like Google Analytics.
With the auto-event trigger, we actually deploy two functionalities.
One is the listener functionality to pick up the interaction and then the filter functionality
to determine whether we should turn our trigger true and fire our tag and deploy the code.
So how does that work?
If you have a page where you have Google Tag Manager installed, then we can already determine
when the user changes the page.
There's more going on on a page for example clicks.
Now if you want to pick up these clicks and forward them on to our tool like Google Analytics,
we need to deploy our auto event tracking, which means we install a listener functionality
through the trigger and listen to all the clicks that are happening on the website.
And these get forwarded on to the filter which then determines Okay, only this click something
we want to evaluate.
And if it's true, we want to find our tag like a Google Analytics event tag.
So let's install this with Google Tag Manager.
So back at our demo shop, we have here a button that we want to track.
The click on the Add to Cart button is the interaction that we want to pick up with Google
Tag Manager.
The first thing that we need to do is to deploy our listener functionality through our trigger.
So let's go up to Google Tag Manager here and click on triggers
and build a new click trigger.
Just going to call this click and as
configuration we can choose our trigger type here.
And we have many different interactions that we can choose from.
But we are interested in particular in the click interaction and we're going to choose
all elements.
Now if you adjust a link you could also choose this but.
Since we are trying to track a button here we go with all elements and in order to see
how its functions we will not put our filter conditions in here just yet.
We'll just go ahead and go with all clicks and save this for now.
Let's refresh and go back to our page.
Let's refresh that.
And now you will see every time you click on the page you will see a new event happening
in our preview and debug mode.
Here's a GTM, here's a GTM click, there's a GTM click, there's a GTM click with many
GTM clicks now in our preview and debug mode.
Now what we would need to do is evaluate our filter condition
upon this GTM click, and this is where variables coming.
Now variables are little placeholders that get filled every time a new event happens
here.
We have the page path the page URL the page hostname, but these don't really change.
Since we are still on the same URL, we are still on the same path and the hostname.
We would need to have some kind of variable that actually react on click, and they are
some built in ones that we can activate.
Let's go over to Google Tag Manager and here under variables we have our built in variables
and we can configure new ones.
And here are different variables that we can activate and specific ones for our click trigger.
So I'm just going to go ahead and activate all of these click triggers
and one cell activated, you can hit refresh here, go back to our page, reload page.
Let's go to a product page
and again if I click anywhere we see that GTM click happens.
We can click on this title here we could
Click on the Add to Cart button.
Now earlier, we noticed that when we click the Add to Cart button the page reloads.
And this is something we don't want to happen, since we want to look at these GTM clicks.
So I'm going to click on this with the Command key press or the control key pressed on Windows,
and this will open this in a new tab.
Sometimes this method doesn't work.
You could also press the Escape key or use an extension in order to stop the browser
from redirecting you on.
Now as you can see here now, we have different GTM clicks and we can look at the variables
to see how our click variables get filled.
So here we have to click classes.
Apparently I clicked on a bad come.
Here I clicked on the side header and the text of this header was right here.
We can also see here a click text sometimes because when I clicked on the headline and
sometimes an ID or other information is present.
What we need to do right now is to figure out
how our desire click, in this case it was the ninth click here, differs from all the
other clicks that are happening on the website itself.
And we do this by looking at the variables itself and figure out what is really unique
about my ninth click.
So in my case, I can look at the click text and it says Add To Cart.
If I go to the other click see this changes all the time.
So the attribute that is very unique about this button is the click text.
So we can use this attribute to filter down on our interactions on our clicks that are
happening on the page.
This is the time now where we can go into our trigger that we have prepared and turn
it into a specific one that only fires on Add To Cart clicks.
So let's go back into the configuration and then this time we want to trigger and fire
our tags upon only some clicks where the click text equals Add To Cart.
Let's save this.
And in order to see what's happening, we actually need to attach the trigger to a tag.
So I'm going to go over to tags here and build a new Google Analytics event tag.
We're gonna click tag configurations and choose my Google Universal Analytics tag template.
And this time, we want to not fire a page view but rather any event into Google Analytics.
So we can pick that up later on.
Now, event tracking has certain parameters, the category action and label you could also
fill the value but it's not really necessary.
And this is just a classification on how you want to see the data later on in Google Analytics.
So for me, I'm going to go with a category called click and the action add to cart
and then the label I'm actually interested on which page this happens.
So I'm going to go ahead and fill this out dynamically
with my page path.
So this will be automatically replaced when the user clicks on the Add to Cart button
with the URL that he's currently on.
Then I'm going to choose my Google Analytics settings variable which we had set up previously.
And attach my trigger that we have just set up.
So let's add this and save.
Let's refresh our preview and debug mode.
Go back to our page.
Reload that
and let's try this out again.
I'm going to click on the title.
Let's see if something happens.
Nothing happens on this event.
Let's click on this box here.
Nothing happens either.
But now I'm going to click on Add to Cart button with the Command key pressed and we
should see on our seventh click we have a tag that fired.
This is our Google Analytics event Add To Cart click.
Again a little bit of a Q&A here we have Google Analytics firing.
And if you click on it, you see events that fired.
This is our click Add to cart and label
and so on.
Now, if you wanted to see this information later on, you can go into your Google Analytics.
Here we go.
And we can go into the real time reporting under events to see what events have entered
the account.
And here we see our event category, click and add to cart.
We also would see if you click through that this happened on the event label product happy
Ninja, which is the page path that I'm on right now.
Now, the real time reporting is not really looking at long term data.
If you wanted to analyze this later on, you can go under the behavior report.
And here under events, you would see all the events that fired into your account and analyze
them.
Now there are none in here right now because it usually takes a little while to enter all
the data into these reports.
But this is where you would find your event data.
So now we have successfully built our first auto-event trigger.
Let's also for completion sake put us into our Events tab here in our tag plan.
We have already something prepared here button click, Add to Cart.
And this fires an event Google Analytics
and let's put in a tick box here.
This is also active.
Now that we have already created the trigger.
We can obviously reuse this.
For example, let's fire any event
to Facebook advertising so we can do remarketing and build a custom audience.
All we would need to do is in Google Tag Manager go over to our tags and create a new tag.
This would be to Facebook ads it's going to be a custom event that is upon Add To Cart
click.
As the configurations which was again custom HTML.
What is the custom HTML that we would use?
Let's go over to our facebook pixel
and look at the configurations.
Set up a new
event here we go and we can go with eCommerce and retail.
They have certain events here.
The add to cart event is what we want to send on so this would be the code that we would
need.
Going to copy this go over to Google Tag Manager and enter our code right here.
So this is the Facebook track event.
You know that we have already sent our library so the big code in another tag so that's something
we're not going to set up again and now we're gonna just use our already configured click
Add to Cart trigger
to fire our Facebook ads event.
Let's refresh, go back to our page
add to cart with the Command key pressed.
We see now there's another facebook pixel helper that we have our Add To Cart event
that we just fired.
And in the facebook pixel helper, you should also see our test events here.
Well, let's do this again since we haven't had it
open.
Now we see our Add To Cart event just fired with our desire code.
And the page URL is also sent over.
So this is how you can set up your auto-event trigger with the help of Google Tag Manager
and send an event to Google Analytics, Facebook Ads or even Google Ads.
Don't forget at the end if you want to take this live to all your users, you will need
to submit a version and deploy this on your website.
All right, so there you have it.
This is how you can track button clicks with the help of Google Tag Manager.
Obviously there are other interactions like form submit, scrolls, or the element visibility
trigger, a very cool trigger that you should check out.
I have some videos linked up down below from our channel we explained those in detail.
Now even more exciting thing is
did you understand everything?
Well check your knowledge at measurechool.com/lesson6.
We have a little bit of a quiz prepared for you so you can see if you understood everything.
And I hope to see you in the next lesson which we're gonna have linked up up here if it's
already there.
And if you haven't yet, then also consider subscribing right over there because we bring
you new videos just like this one every week.
Now, my name is Julian.
Till next time.
For more infomation >> Getting Started with the Google Cloud Storage - Duration: 1:20. 
For more infomation >> Planilhas Google - Macro Salvar Dados Última Linha com Códigos JavaScript - Aula 19 - Duration: 19:32. 
For more infomation >> Tutorial Membuat Stiker Ulas Kami di Google Menggunakan CorelDraw - Duration: 36:24. 
For more infomation >> Creating responsive display ads - Duration: 4:45. 
For more infomation >> Creating responsive search ads - Duration: 4:56. 
For more infomation >> Interview tips from Google Software Engineers - Duration: 3:04. 
For more infomation >> 01 EDLが解説！【Google Classroom】Classroomへのログイン方法 - Duration: 0:46. 
For more infomation >> 10年前《星光》出道 男星出國念書被Google錄取 - Sky News - Duration: 2:28. 
For more infomation >> 06 EDLが解説！【Google Classroom】課題を再提出する方法 - Duration: 1:35. 
Không có nhận xét nào:
Đăng nhận xét