- In this video, you are gonna learn
how you can register button clicks
with the help of Google Tag Manager
and forward on an event to Google Analytics.
Hi there and welcome to another video of
Gtmtraining.com with me Julian
and today we want to talk about button click tracking
with the help of Google Tag Manager and Google Analytics.
But before we get started, as always these little videos
are brought to you by GTMTraining.com
and if you like today's lesson and you want to
dive in deeper into event tracking then I encourage
you to check out our just relaunched course on
Google Tag Manager event tracking,
where you will learn how to track
slider interactions, link clicks, form submits,
and many more other interactions that can be taken
on your website.
All presented in 24 different video lessons
which have over three hours of content.
So if you want to check that out, head over to
GTMtraining.com/eventtracking
and I will also give you a little bit of a discount
if you buy this course via this link.
So, check it out at GTMTraining.com/eventtracking.
Now lets get started with
button click tracking with Google Tag Manager.
Your button click tracking is really
a little bit of theory upfront.
Button click tracking is event tracking with the help of
Google Tag Manager and what Google Tag Manager
does is deploy a trigger which listens to different
interactions that we have on our page
filters down on the ones that we want to be sending
an event in and then releasing
an event tag to Google Analytics,
which we then can see in our event reports.
Just to make this a little bit more visual,
let's say you have a website
and on that website Google Tag Manager is deployed.
What we will do is deploy a trigger
which will listen to the different interactions
on our page and this listener will pick up
different variables, which we will filter down
on and our filter will turn either false or true
and then signalize to Google Tag Manager
that we can release our
event tag to Google Analytics.
Now to make this all happen,
we will follow four different steps.
First of all, we will build a generic Click Trigger,
then we will trigger our event,
see how our variables get filled
and then refine our trigger,
make it into a specific one.
It only fires on our buttons.
Once we have the trigger ready,
we can then connect it to our event tag.
So let's get started.
So here we are back at our demo shop,
and what we want to accomplish today is
track when somebody clicks on this Add to Cart button
on our page.
Lets go through our steps.
First of all, we will build a generic click trigger.
We will go over to Google Tag Manager
click on triggers,
click on new,
and then we have built our Generic Click Trigger.
As the event we will choose obviously the click
and then as the target,
we can filter down if we want to
clicks on all elements or just links.
Now it really depends how the HTML markup is of your button
but since we want to cover all our bases here
and make this tutorial as generic as possible,
we will go with the All Elements option,
click on continue and then we get to our
filter options, where we can define if our
trigger turns true on all clicks or just some clicks.
Now we don't know yet what we will fill in here,
so we will go with All Clicks
since it is a Generic Click Trigger
and create our trigger.
Now one thing that we want to make sure is
in our variables menu that we have our
click variables
enabled here.
You only have to do this once,
but make sure you have done this.
And then we can go ahead and go into
our preview and debug mode,
which we can enable by clicking on the Publish button,
the little arrow beside that
and here is the preview and debug mode,
which we can enable,
which will put our
browser in a special state,
and this will only happen for our browser,
so once we go back to the page, reload our page
we will then get our preview and debug console down here.
We see which tags are firing
and we have different other information available.
What we want to do right now is actually
trigger our event by clicking on this Add to Cart button.
Since the website will reload upon this button click,
I will actually press the command key
so that it opens this action in a new tab
and our preview and debug mode stays open
which is important because you can see on
the left side here which events have triggered.
And the click that I have done on this Add to Cart button
is number five GTM click
and
upon this link
click no tags fired because we haven't
connected anything yet,
but we can use this to actually look into our variables
and see how our click variables were filled.
So we have Click Classes, Click Elements, Click ID,
and so on and so on.
And these variables can now be used to filter down on
only the elements that we want to fire our tag on.
Now as a comparison, I'm going to click on
this View Cart button here
which just triggered number nine.
I adjusted this again with the command key press and
we can click on
the ninth event here
and see how that differs from our number five here
and we see a difference.
For example the Click Classes is changing because
the HTML markup behind this button is different
from our Add to Cart button.
So now we can use our Click Classes to
filter down only on is Add to Cart buttons.
Lets go over to Google Tag Manager
into our Generic Click trigger
into this Generic Click Trigger into a specific one,
which will only turn true when somebody clicks on
the Add to Cart button.
We can leave all our configurations the same.
Only under the Fire on option,
we will filter down by clicking on Some Clicks.
And then choosing our Variable
which we can see in this dropdown Menu.
We want to go with our Click Classes
and then we have different matching options,
and we will go with the Contains option
and
when we go back to our page,
and see under the Click Classes is,
needs to have single Add to Cart button
in the Click Classes.
So we can implement this
into our field.
Make sure it matches exactly what you have
implemented into your field.
This looks good to me.
We can now go ahead and save this trigger
and connect it to our Event Tag.
We go over to tags and click on New
and give it a name.
This will be a Google Analytics tag firing an Event
and it will only fire on our Add to Cart buttons.
Now as the product we will choose Google Analytics and
the tag type will be Universal Analytics
and then the tracking id we already saved in the variable
called Google Analytics ID,
and we can leave all the different configurations.
Next we will choose Tract Type as event.
Then we need to implement the category,
the action, and the label.
Now as a category,
I will call this Button Clicks.
The action will be a click,
and as the label I want to fill this dynamically,
so I want to know which page
that this actually happen on.
We have a variable available,
which is the Page Path.
We can use that and then we simply
click on continue and connect it to our
trigger.
Go here on more.
We have already our Add to Cart Button Click Trigger
prepared here.
We will click save and create this tag.
Now let us try this out again.
Let's refresh our preview and debug mode.
Then go back to our page and also refresh our page.
You will see other pages here and
click on our Add to Cart
Button with the command key pressed,
and we can see
if upon our event
our tag has fired
and see that when I click on our fifth
event here, we have our GA Event Tag
Add to Cart Button firing correctly.
Now to do a little bit of quality control,
you would go over to Google Analytics
into your profile
and actually look into the real time reporting
under events and see if there was just
an event recorded.
This seems to work fine and even if I click
and see what the event label was filled with
we can see that the Page Path
was dynamically filled by our variable.
Now to do a negative test,
I would also click for example on this View Cart button,
and see upon the click
if my tag has fired
and this is not the case,
so our trigger works correctly.
Now to spin this to the end, you would
obviously go over to Google Tag Manager
and publish this as a version to all your users.
That's already it with this week's video of GTMTraining.com.
If you like this video, please subscribe to our channel,
and give us a thumbs-up.
If you want to dive in deeper
into different things that you can track on your website
with event tracking, then I encourage you to
check our course at GTMTraining.com/eventtracking.
I'm Julian, till next time.