April 9, 2020
Auto-Event Tracking with Google Tag Manager – Lesson 6  GTM for Beginners

Auto-Event Tracking with Google Tag Manager – Lesson 6 GTM for Beginners


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.

13 thoughts on “Auto-Event Tracking with Google Tag Manager – Lesson 6 GTM for Beginners

  1. Hi, You are doing a great job, Can you help me understand better…..

    1 – Is GTM the only tool to place tracking of event/trigger on the website? If others name few…
    2 – Do we need to update the GTM CODE placed on our website (Source Code) every time after we add any new event or a pixel code in GTM?

  2. Hi Julian, So our website has multiple clients, it there a way of creating a separate account/folder in Tag Manager for every client where only their properties will be tracked and analyzed? Once this is done than is there a way of generating reports for all of he client properties say over 30, 60 or 90 days?

  3. Hi Julian! One question: how does FBAds or GAds know which one is responsible for adding to cart when two event tag codes are deployed. In your example both Fb pixel and GA fired and you hadn't been even referred as user neither from FB nor from Google Ads. How does it work in real life?

  4. Really good videos, Julian. We're looking forward to getting this all implemented on our new site once it's ready.

  5. Sir, before configure Event Tracking, shall I have to set up any Goal in Google Analytics? What Goal I have to set in Google Analytics?

  6. Well this is new to me, i've installed tag manager several times, and never had to add the click all elements trigger, it was kind of automatic.

  7. I have a WordPress site where users can create a user generated post based on a predefined template) when they submit a Gravity Form entry. Each new post that is created has buttons that a viewer on the page can click (creating an event). As long as the button names are consistent for every post that is created, can I set it up to where these auto-event tags will trigger and track on every new post that's created (let's say within that category of posts) or is that something that I'd manually have to set up each time a new post is created? I'll keep reviewing your videos to learn more but I just wanted to check on this specific end goal of mine before I spent a significant amount of time trying to implement on my own when I should have sent this to my developer instead. Thanks!

Leave a Reply

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