- In this video I'm going to show you how you can track button
clicks with the help of Google Tag Manager and send an event into Google Analytics, to
Facebook, or to AdWords. All and more coming up right after this. (electronic music) Hey there and welcome
back to another video of MeasureSchool.com teaching you the data driven way of digital marketing. My name is Julian and on
this channel we do marketing tech reviews, tips and
tricks videos, and tutorials just like this one, so if you haven't yet, consider subscribing to our channel and also click that notification icon so you stay up to date
with what we do every week. Now today we want to an update video on a very popular video
that we did a while back here on this channel, which is about button click tracking
with Google Tag Manager. Now once you watch this video you will understand how
auto event tracking works with Google Tag Manager and then be able to send an event to Google Analytics, to Facebook Analytics, or even AdWords. So let's dive in to today's video. But before we get started
we need to actually learn a little bit of theory
on how auto event triggers work within Google Tag Manager. So if you want to install event tracking with the help of Google Tag Manager, you need to be aware
that Google Tag Manager can deploy an auto event trigger. And this trigger actually
has two functionalities. One is the listener functionality, and the second one is
the filter functionality. These combined determine whether a tag like an event tag is deployed and transfers information
to Google Analytics. Let's make this a little clearer. So let's say you have a website where you have Google
Tag Manager installed. And you deploy an auto event trigger, in this case a click trigger. Now this click trigger
will first of all listen to any kind of clicks that
happen on the different elements and every time somebody
clicks on any of the elements on your website, it will forward an event into the trigger and then
the filter functionality will determine whether this event is the right event and then based on that turn true or false and in turn trigger your tag that
transfers information to Google Analytics, could also be Facebook Analytics or AdWords. So again there are two functionalities, one is the listener functionality, and one is the filter functionality. And therefore we need to go through steps in order to ensure that both
of those functionalities actually work. So in order to build
effective event tracking with Google Tag Manager, we
need to go through these steps. First is to build a generic click trigger and then try out to trigger the event. If this can be listened
to and we can actually pick up the right event, we can refine our
trigger, turn our generic click trigger into a specific one only for our element that
we actually want to track, and then connect this all to a tag. So let's go through these steps. Back in our Demoshop
we have here a website where we have Google
Tag Manager installed. Now if you don't have
Google Tag Manager installed then you can follow along this video, it will help you to do just that. And we have Google Tag
Manager installed here, if we want to make sure that
this is actually installed we can always look in our tag
assistant for Google Chrome or go into our Google Tag Manager and actually click on
the preview in debug mode which will put our browser
and only our browser into a special state, which
will give us the ability on our website to see what's going on with Google Tag Manager
by just reloading it and we see this little
console pop up down here which will get really
important in a second. Now the firs step that
we want to go through is to actually build a
generic click trigger. For that we'll go over
to Google Tag Manager, click on the triggers, and
then click on new right here. Then we give this all a name and click on the trigger configurations. Here we can choose our trigger type, what kind of event do
we want to listen to. In our case it would be a click trigger and we'll go with the all elements. You can also use just links, but to keep it more
general I will go with the all elements trigger. Now here we don't have
to do anything anymore. We want to listen to all clicks because it's a generic click trigger and just see whether this
works for our element. We're going to save this and before we continue, you
need to go under variables here. And actually go to the
built-in variable tab and go to configure and make sure under the click section here you have these click
triggers actually enabled. You only have to do this once. Once they're enabled you can use them. Now up here in our preview and debug mode we can go to refresh, you
can also click that preview button one more time. And this will refresh
our Google Tag Manager in the background. And once we reload the
page we should have now the listener functionality
installed on our page. Now Google Tag Manager
should be able to listen to any kind of click that
we do on our website. So for example, I can click it here, click up here, I'm gonna do
this with command key press so it opens up in a new tab. Gonna click here, and
obviously also on our add to cart click to see whether
something moves down here and Google Tag Manager is
actually able to pick this up. So I'm gonna click on
this add to cart button and I don't want to be
redirected to the next page so I'm gonna do this with
the command key pressed. I'm gonna go back here and we can see all these different events. Now what we want to do is
actually go to the second tab called variables here and
then go through our events that were transferred
to Google Tag Manager. So for example here's the fourth event, and I'm gonna click on it, we have hit variables, and we can see all the click variables that we have just enabled and
can see how they get filled. Now every time you click
on a different element, these variables get filled differently. So if you go to this
fifth click we can see that things are changing
inside of this variable menu. Now if you remember I first
clicked on this title here and it had the click text Happy Ninja. We can go to the next one and I clicked on apparently something that's singles that was right here and this was transferred
as the click text. Now you also notice that
there are other variables that get filled differently. For example, the click element which is a URL. We see maybe the click URL, this is where we are redirected to. And sometimes we also see click classes or an ID, so if your
element in the background of the HTML has classes or an ID, it would be perfect because
our trigger actually picks this up and puts
it into these variables. And here we see the single add
to cart button was clicked. And this is the element
that I actually clicked on when I clicked on our add to cart button. Now the key being here that we need to give our trigger now a
rule that he can decide on when to actually fire our tag later on. So we want to make it very unique in order to not get mixed up. We could, for example,
choose the click text which is add to cart, and which differs widely
from the other click text that we have down here. We could also use the click classes which is pretty unique. So for our case I think the click classes is perfect because the others don't really get filled here, so click
classes already is great. So now we're gonna go
over to our second step to refine the filter. We go over to our trigger again and turn our generic click trigger into a specific one which is
specific to our button click. We're gonna click on the configurations and this time we don't want to fire our trigger on all clicks
but only on some clicks. So you're gonna go to
the some clicks function and then we're gonna choose the variables that we identify to be
unique in our button click. In our case that would
be the click element. Now we have different
matching options here like RegEx, CSS Selector, and so on. I'm gonna make it easy and just choose the contains option. So if the click element contains and what do we have to put in here? Single add to cart button. Let's just take this part. Then I want to turn
this whole trigger true and fire our tag. So let's save this and we have now turned
our generic click trigger into a specific one. Now in order to test this out we actually need to first
connect this to a tag, and we're gonna send an
event into Google Analytics. So for that we'll go over to tags, click on new here, and give it a name. Go to tag configurations and I want to send something
into Google Analytics, I have universal analytics running. The track tag will be an event, as the category, I'm
just gonna type click, and as the action, add to cart. And now I have to define
where to send this all. If you already have a
Google Analytics setting this variable you can choose that, or go to the override settings in this tag and input your tracking ID. Now the tracking ID is
specific to Google Analytics, so let's go over to Google Analytics and in the admin section of your account, under tracking info, you
can find your tracking code. Which is this ID right here. Copy that and put it into this field. Now last but not least we need to connect our tag to a trigger and we
have already this part prepared. So here is our button click trigger and you can save this now. And click on our refresh button again, go back to our page, let's
close all these pages here. Reload this page, and click
on our add to cart button. I will do this again with
the command key pressed. We will open it up in a new tab, but we see down here our fourth event was a GTM click. If I click on this I see that no tag was actually fired, why is that? We can click on our
Google Analytics event tag and maybe I did something
wrong in the trigger, so I'm gonna scroll
down here and I can see that the click trigger
failed, so that's the X here. And I can see that the
click element didn't contain single add to cart button. Now that wonders me,
so I need to check out what is the state of the click element. So I'm gonna go over to variables and I see that here it says click element and this was what it was filled with. Now I actually originally wanted to use the click classes, so we
can all learn from here you need to have the right variable and the right value in place in order for your trigger to turn true. So let's correct this mistake, go over to triggers again. And look quickly in here and we'll choose the click
classes instead of click element. Let's save this, refresh. Go back to our page, reload. And click on the add to cart again. And this time we should see
our tag fired, GTM click. On this click we had our event tag fire. You can also look that
up in our tag assistant if there is anything
sent to Google Analytics. So here we see one event that happened. And we now should also see this in our Google Analytics account and we go over to the real time reporting and under events we should see a new event entering our account. Now later on you will be able to see such click events under
the behavior report under events here and that will give you all the statistics about
the different events that came into your account, but this takes up to 48
hours to fill correctly. So now we have deployed
our Google Analytics tag. Now obviously we can
also deploy other tags because we already have
that trigger now prepared, we can reuse that trigger, so for example here I
have a Facebook event that sends over a track event,
add to cart, to Facebook. And we can just attach our click trigger to also fire this to Facebook. Or our AdWords conversion tracking if we want to track our add
to cart click as a conversion and also use this tag with this trigger. Let's save this, refresh,
go back to our page, reload that. And click on add to cart,
see if this all works. And as you see when I clicked on it we had three events fire into AdWords, Facebook, and Google Analytics. You can also see this
here in our tag assistant. We have now our Google
AdWords conversion tracking, we have our Facebook pixel helper, we also have received
our add to cart event. Now once you have made
sure that everything of this works correctly,
there's only one step to take this live onto your website and this is actually publishing this as a new version in Google Tag Manager. So click on the submit button here, enter a descriptive name. And then you can publish
this onto your website and it will now be
tracking the button clicks on that add to cart button for all your users on the website. Alright, so there you have it, this is how you can track button clicks with the help of Google Tag Manager. If you are new to Google Tag Manager then I encourage you to
check out our video playlist for beginners on Google Tag Manager. We have a whole tutorial
series on that as well. And if you like this video then please give us a thumb's up and
subscribe to our channel right over there because
we bring you new videos just like this one every week. Now my name is Julian,
see you in the next one.
