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