Google Tag Manager Button Click Tracking


– 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.

Leave a Reply

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