Yuma 4×4

Media and Communications

Google Tag Manager Button Click Tracking (2018 version) for Google Analytics, Facebook and AdWords

Google Tag Manager Button Click Tracking (2018 version) for Google Analytics, Facebook and AdWords


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

100 thoughts on “Google Tag Manager Button Click Tracking (2018 version) for Google Analytics, Facebook and AdWords

  1. Does it track clicks on mobile version of the website ? I configured it and it only tracks clicks made from desktop

  2. Hello, thank you for making this great tutorial @measureschool. I followed it and think I've got everything set up correctly. The tag I fired shows as having been successful when I click on one of the button I've specified for it. However when I test it in google analytics, in Real-Time — as described in your video from 11:23 to 11:32 — nothing shows in my Events panel when I click. On the Tag Manager side it shows a successful "Tags Fired on This Event" though. I know it's hard for you to say with being able to see for yourself, but can you imagine what I might be doing wrong? Thanks in advance for any advice! And thanks again for the tutorial.

  3. An immensely helpful video showing step by step implementation and thank you. Just one question. When you added the add to cart click trigger to AdWords and FB, are you just sending data to those pixels for data collection/retargeting purposes? You're not sending conversion data, right?

  4. If a button does not have any varibales you can use, what do you do? how can you make variables for the button?

  5. Very helpful to track the button clicks on my client's website. Can easily understand the procedure. Explained so professionally.

  6. Can u please direct me to the video in which you discuss Facebook add to cart advanced in which you add dynamically the product information in the tracking code sent to Facebook?

  7. You're the man! This helped so much. I was trying and failing to find a way to track an address link that navigates to Google Maps. I was way overthinking it. I appreciate the way that you explain the reasoning behind everything you do too. Cheers!

  8. Hey Julian, I created the generic click trigger but none of my test clicks are being picked up. Confirmed that tag manager is properly installed via tag assistant and preview mode…it is a Shopify site that does not do eCommerce (weird, I know)…any idea why this is? I am trying to track button clicks

  9. Is it necessary to have Goggle Tag manager snippet on the website? I have added my Goggle Analytics code to my webpages, would the process in the video still work for me?

  10. Does this work for Instagram DMs? I basically want to track clicks of shared links via Instagram direct messages to say a Spotify song

  11. good video how to set it as not bounce rate? Any idea can we do it in google tag ? I think many people looking for the answer.

  12. Hi measureschool, excellent content!

    correct me if I'm wrong, but the "track all clicks" at the initial, is only used for staging setup purpose?

    I imagine if you use it on production site wtih 1,000 visitors per day, it will suddenly fired by thousands of click in no time. am I correct ?

  13. at 6:29 when I click on my gtm.click link I don't get any variables listed. Not sure why? www.comasmontgomery.com

  14. I think I am missing something. Totally lost after the 6 minute mark. I am not getting any variables listed. Do I have to set them up before doing this? Where do I start?

  15. Excellent video and explanation.
    Could you please explain how can I introduce different events from one tag and trigger? I want to show "Add to cart" for which prdocut clicked?

  16. Excellent walkthrough of the whole process, including a super plausible error (I get that it was genuine, and you should be commended for keeping it in). This was exactly what I needed. Thanks!

  17. This is very useful. I'm having a bit of a problem here. The button I'm trying to track, depending on where you click it, has different classes and elements. It has the button itself, the text, the phone icon, and weirdly enough other ones depending on what part of the button you click. What's the best way to go around this. I use Elementor theme by the way.

  18. Question: So if you added to your cart with 2 quantity counted sweater shirts & make the purchase…. How does google tag manager know you added 2 quaintly sweatshirts to the cart?

  19. Hello! I have a question. Your Video really helped me to set up Google Tag Manager and Analytics Event Tracking.
    I just have one big problems and i can't find a solution since months.
    I set up Event Tracking with Tag Manager for Analytics. I want to Track Website information like how many times shop users click the add to cart Button.

    Problem: Tracking works perfectly fine as long as the Tag Manager debug Mode is online. Tags get fired, Analytics Counts Events.
    BUT as soon as i turn the debug mode off and Close Tag Manager it does NOT track any Event anymore, on no Browser even if it just Tracked it perfectly fine before, as long as Tag Manager debug Mode was on.
    I have this Problem for all of my sites. What am I doing wrong? 🙁

  20. Hi thank you so much for these tutorials they are so helpful and your method of teaching is very clear and easy to follow. Once I set the variable to all clicks and then press the preview mode I do not get the test (orange bar) at the top of my screen so I cannot complete the checks. Please, can you advise?

  21. I'm trying to set up a tag to measure the number of social media button clicks we get from our website. I have followed the video but the tag is not firing. When I go through the variables, I have no idea which variable the social media button click is happening under. I have tried altering it to Page URL, Click URL etc but it still doesn't show up… Should it show up as our social media page that it opens up? Any help appreciated!

  22. Thanks, great video! I have a client with a chat function widget on their website and it's not registering the click to open the chat window. (we want to track the opening of the chat function as a conversion) Do you have alternatives for this problem? Thanks!

  23. Hi, when you click on the "add to cart button" there's a page that opens up in a new browser. Its not working for me. Will you provide some insights on what I may be doing wrong, thanks

  24. Great video, very clear, helped me set up tracking v quick at last minute! Have subscribed! My go-to guy now! 😀

  25. Great Lessons
    Is there a way to limit the clicks count? Let's say someone is very inpatient and use to click 2-3 times per second on the same button, as a result in the report will show 3 clicks. Or the website has the same button on different pages. How can get information on how many users click and how often they click on the website the same button?

  26. Thank you for your videos Julian! They have been very helpful. I'm searching through your videos but haven't been able to clarify yet. Should I have the GTM code and the Google Analytics tracking code separately on my website? The person before me started using GTM about a year and a half ago and I think that she was using it to help track clicks so that we could create goals within Google Analytics, but I'm not exactly sure. We currently have both the new global site tag and what appears to be the previous version of Google Analytics tracking code on our website. I assume that is unnecessary.

  27. Hey @Measureschool, great tutorial. Very simple and straight to the point. One recommendation for me is to get faster to the point 🙂 Great tutorial – you've got a new subscriber.

  28. The Events coming through . to my GA are named all differently and are impossible to know what is what without going right into them? What am I doing wrong?

    Eg My add to cart event is tracking and firing correctly according to GTM but when I check GA it comes through as a Click and tells me nothing more

  29. If you add the events for Facebook and Google Ads, does it only track clicks that come from those channels or does it show the same data to all three platforms (GA, FB & Google Ads)?

  30. Thanks for the video. How to add 2 or more buttons on a website to one event (for example CONTACT) on Facebook?

  31. This is what I call actionable tips, you rock man! I Just finished following this tutorial and everything worked perfectly!

  32. I followed the same steps to integrate GTM with GA and it worked when tested using preview mode but click event is not firing without preview code. Need your help to fix this.

  33. Hi there, I love your videos. My issue is that I set up the click trigger, but in preview debug mode the clicks are not showing in the summary. Any ideas?

Leave comment

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