We are going to discuss the power of GTM that detects actuals user interactions then fire our tags. In Google Tag Manager this is called Auto-Event tracking.
In this video, we will discover how it works by creating a trigger to fire a tag during a button click.
More Auto-Event Tracking Tutorials:
Form Tracking: https://www.youtube.com/watch?v=PZA-5Nav0Bo
YouTube Tracking: https://www.youtube.com/watch?v=-_sbCHBVjzA
Scroll Tracking: https://www.youtube.com/watch?v=mcQdCl-B3lw
Element Visibility Tracking: https://www.youtube.com/watch?v=faBNebOHxsU
Link Tracking: https://www.youtube.com/watch?v=tc1Ydy612_Q
Sign up to the FREE GTM for Beginners Course...
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.
Auto Event Tracking: An Overview
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.
How GTM Evaluates to Fire the Trigger?
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.
How Auto-Event Tracking Works?
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.
Setting-up Listener and Filter Functionality
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.
Create GTM 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 reacts 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.
Selecting Unique Click Variables
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.
Create GTM Event Tag
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.
Testing, Checking Google Analytics Real Time Events
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.
Auto Track Facebook Events
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.
Checking Facebook’s Test Events
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.