September 17, 2019
Google Tag Manager Button Click Tracking

Google Tag Manager Button Click Tracking


– In this video, you are gonna learn how you can register button clicks with the help of Google Tag Manager and forward on an event
to Google Analytics. Hi there and welcome to another video of Gtmtraining.com with me Julian and today we want to talk
about button click tracking with the help of Google Tag
Manager and Google Analytics. But before we get started,
as always these little videos are brought to you by GTMTraining.com and if you like today’s
lesson and you want to dive in deeper into event
tracking then I encourage you to check out our
just relaunched course on Google Tag Manager event tracking, where you will learn how to track slider interactions, link
clicks, form submits, and many more other
interactions that can be taken on your website. All presented in 24
different video lessons which have over three hours of content. So if you want to check
that out, head over to GTMtraining.com/eventtracking and I will also give you
a little bit of a discount if you buy this course via this link. So, check it out at
GTMTraining.com/eventtracking. Now lets get started with button click tracking
with Google Tag Manager. Your button click tracking is really a little bit of theory upfront. Button click tracking is event
tracking with the help of Google Tag Manager and
what Google Tag Manager does is deploy a trigger
which listens to different interactions that we have on our page filters down on the ones
that we want to be sending an event in and then releasing an event tag to Google Analytics, which we then can see
in our event reports. Just to make this a
little bit more visual, let’s say you have a website and on that website Google
Tag Manager is deployed. What we will do is deploy a trigger which will listen to the
different interactions on our page and this listener will pick up different variables,
which we will filter down on and our filter will
turn either false or true and then signalize to Google Tag Manager that we can release our event tag to Google Analytics. Now to make this all happen, we will follow four different steps. First of all, we will build
a generic Click Trigger, then we will trigger our event, see how our variables get filled and then refine our trigger, make it into a specific one. It only fires on our buttons. Once we have the trigger ready, we can then connect it to our event tag. So let’s get started. So here we are back at our demo shop, and what we want to accomplish today is track when somebody clicks
on this Add to Cart button on our page. Lets go through our steps. First of all, we will build
a generic click trigger. We will go over to Google Tag Manager click on triggers, click on new, and then we have built
our Generic Click Trigger. As the event we will
choose obviously the click and then as the target, we can filter down if we want to clicks on all elements or just links. Now it really depends how the
HTML markup is of your button but since we want to
cover all our bases here and make this tutorial
as generic as possible, we will go with the All Elements option, click on continue and then we get to our filter options, where we can define if our trigger turns true on all
clicks or just some clicks. Now we don’t know yet
what we will fill in here, so we will go with All Clicks since it is a Generic Click Trigger and create our trigger. Now one thing that we want to make sure is in our variables menu that we have our click variables enabled here. You only have to do this once, but make sure you have done this. And then we can go ahead and go into our preview and debug mode, which we can enable by
clicking on the Publish button, the little arrow beside that and here is the preview and debug mode, which we can enable, which will put our browser in a special state, and this will only happen for our browser, so once we go back to
the page, reload our page we will then get our preview
and debug console down here. We see which tags are firing and we have different other
information available. What we want to do right now is actually trigger our event by clicking
on this Add to Cart button. Since the website will reload
upon this button click, I will actually press the command key so that it opens this action in a new tab and our preview and debug mode stays open which is important because you can see on the left side here which
events have triggered. And the click that I have done
on this Add to Cart button is number five GTM click and upon this link click no tags fired because we haven’t connected anything yet, but we can use this to actually
look into our variables and see how our click
variables were filled. So we have Click Classes,
Click Elements, Click ID, and so on and so on. And these variables can now
be used to filter down on only the elements that we
want to fire our tag on. Now as a comparison, I’m going to click on this View Cart button here which just triggered number nine. I adjusted this again with
the command key press and we can click on the ninth event here and see how that differs
from our number five here and we see a difference. For example the Click
Classes is changing because the HTML markup behind
this button is different from our Add to Cart button. So now we can use our Click Classes to filter down only on is
Add to Cart buttons. Lets go over to Google Tag Manager into our Generic Click trigger into this Generic Click
Trigger into a specific one, which will only turn true
when somebody clicks on the Add to Cart button. We can leave all our
configurations the same. Only under the Fire on option, we will filter down by
clicking on Some Clicks. And then choosing our Variable which we can see in this dropdown Menu. We want to go with our Click Classes and then we have different
matching options, and we will go with the Contains option and when we go back to our page, and see under the Click Classes is, needs to have single Add to Cart button in the Click Classes. So we can implement this into our field. Make sure it matches exactly what you have implemented into your field. This looks good to me. We can now go ahead and save this trigger and connect it to our Event Tag. We go over to tags and click on New and give it a name. This will be a Google
Analytics tag firing an Event and it will only fire on
our Add to Cart buttons. Now as the product we will
choose Google Analytics and the tag type will be Universal Analytics and then the tracking id we
already saved in the variable called Google Analytics ID, and we can leave all the
different configurations. Next we will choose Tract Type as event. Then we need to implement the category, the action, and the label. Now as a category, I will call this Button Clicks. The action will be a click, and as the label I want
to fill this dynamically, so I want to know which page that this actually happen on. We have a variable available, which is the Page Path. We can use that and then we simply click on continue and connect it to our trigger. Go here on more. We have already our Add to
Cart Button Click Trigger prepared here. We will click save and create this tag. Now let us try this out again. Let’s refresh our preview and debug mode. Then go back to our page
and also refresh our page. You will see other pages here and click on our Add to Cart Button with the command key pressed, and we can see if upon our event our tag has fired and see that when I click on our fifth event here, we have our GA Event Tag Add to Cart Button firing correctly. Now to do a little bit of quality control, you would go over to Google Analytics into your profile and actually look into
the real time reporting under events and see if there was just an event recorded. This seems to work fine
and even if I click and see what the event
label was filled with we can see that the Page Path was dynamically filled by our variable. Now to do a negative test, I would also click for example
on this View Cart button, and see upon the click if my tag has fired and this is not the case, so our trigger works correctly. Now to spin this to the end, you would obviously go over to Google Tag Manager and publish this as a
version to all your users. That’s already it with this
week’s video of GTMTraining.com. If you like this video, please
subscribe to our channel, and give us a thumbs-up. If you want to dive in deeper into different things that
you can track on your website with event tracking,
then I encourage you to check our course at
GTMTraining.com/eventtracking. I’m Julian, till next time.

100 thoughts on “Google Tag Manager Button Click Tracking

  1. Great video. Question: What about when the Event you want to track is a Button within an Interstitial? My problem: When I use Command+Click on a Button in an Interstitial window the page reloads. It does not load the result of the click in a new tab, as it does in the examples you provided when the Command+Click is performed. As a result I can't review the variables to pick one to associate with the trigger. Thank you!

  2. Tag Manager, URL Manager, GA Events and GA Goals seem to do a lot of the same things. How do they differ? How do they work together? How do I know which to use for what?

  3. Julian i have followed all steps and create successfully Button Click Tracking but in Analytics Real Time >> Events = There is no data for this view. Can you please help me.

  4. Great video with many useful information. Can i ask you something? because the analytics just save event that recently happen in 30 minuted in real time report. Where I can find the report the button click event for all time?

  5. Really helpful, but what to do if none of the variables are unique. Sometimes I have buttons, with no click text, class, or it is undefined etc. Do I have to ad a custom variable through DOM?

  6. Hi Julian, Thanks again for the informative video. I have a question for you – How do I track Search Queries associated with a particular ‘button click’ trigger in Google Analytics Goal Conversions?

    I’ve already setup the tag and trigger in GTM for the ‘button click’ and is working in GA. I also have verified GWT in GA but I can’t seem to find/setup this tracking method. At the moment it looks like I can only see the goal completion from the page location.. Can you help?

    I'll also try PM you this comment.

  7. Hi, my question is slightly off topic for this video… I can get tags to fire when internal links are clicked. However I need this info to be more specific as one user could click the same link 100 times in one day (in theory). How do I check how many times a specific user has clicked on which links? Really appreciate an answer, thanks!

  8. As an event label you put the Page Path. It isn' really necessary for me because in GA you can easily combine 2 dimensions.
    But what I am aiming for is how to put product ID as an label? My users ofeten add products to basket from the product listing (a category page) so thanks to your tutorial I know that event occured for example in "shoes category" but I don't know what product was added to basket.

  9. Great video. I was trying following: had a goals setup when user registers(so I measure target page), also I put event tag for FormFill(Click event that is validated).

    However results are strange. I have 26 registrations within a week, however 18 goals tracked in GA and 12 events via tag manager(11 unique among them). Maybe doing something wrong here?

    Another tricky thing is that I have to pass user's email into GA, however I use some wordpress plugin so I can't use datalayer easily(at least I think so), are there any solutions for that?

  10. Great tutorial! Thanks a lot! I strongly suggest listening to some Detroit house music in the background while watching this video. Goes well with each other.

  11. Its a really great tutorial about GTM – One Question >>>> Can we import these Events from Google Analytics to Google Adwords ??

  12. Thank you so much. It was a great tutorial. You made it very straight forward to understand.

    I followed along, and got everything working like in your example. But I cant find where in analytics I can see previous "addToCart" events? I can only see it happening in the real time tab. What about if I want to see how many people clicked the button in the past week or so?

    Thanks a bunch 🙂

  13. this content is priceless, i got my first Adwords account client (not live yet) and learning this stuff at the right time,

  14. Hello, I have a question. In my case, "Click text" is not possible to use, so I want to check different variables like click form and other. But how can I check variables in the preview and debug mode, if it always redirects me to a different URL after button click? Is there any way how to stop redirect and stay at the same URL in the preview and debug mode after button click? Thanks a lot.

  15. Superb video, can try my hand on that,

    Was wondering if you can make a video on tracking new users registrations in Google Tag manager, It would be great

  16. Hello, If I want to see some historical data and not with Real-time event where I need to set up the configuration about it and see it in the reports in Google Analytics, I want to know my Category Label link button.

  17. Thanks for the tutorial, all nice BUT… where the heck I can see how many times the button was clicked? Seriously, everyone makes tutorials how to set it up, but can't figure out where can I see how many times specific Tag Name has been triggered? In google analytics I can see "category" (Button Clicks), I can see "Action" (Click), but where on earth will I find number of times "Tag Name" (GA – Event – AddToCartButtons) has been clicked on????

  18. Hi – if I wanted to do this with the button of a contact form, but I only want the trigger to fire when the form is filled correctly (successful submission) – however there is no 'thank you page' to record as a page load for this trigger, what's the best way to go about it? With your guide it works, but it records ALL button clicks (even clicks when the form is not filled correctly and the user gets the error message that he needs to finish completing the form before submitting).

    Thanks!

  19. I followed your tutorial and published my workspace in the end. But when I go back to my analytics environment I notice that the triggers are not added to my events section. Could there be any reason for this? Thanks in advance !

  20. in preview mode I do see addToCart as a Tag in the list however I'm not seeing it in tags fired on this event. what do I need to do?

  21. Ok, I know this video is old but after spending daysssssssssssss banging my head against the wall watching other tutorials where everyone seemed to have a f*cking URL ID on EVERY link on their site and/or a site they created through wordpress (gag)), this tutorial gave me my "AHA" moment.All the tags I was messing up before that I couldn't figure out are now firing after taking a deep breath and watching this video.

    Seriously, I can't thank you enough. This was great and super helpful.

  22. Hi Julian, I am trying to track a html 5 video for when someone plays, pauses and stops the video. Do you know how I can track this?
    Thanks Tony

  23. Absolutely fantastic well thought out, fabulously paced and structured "How To" Tag manager for button clicks out there!

  24. I would like to see how many people on MOBILE click my button. How do I create a special tag to trigger when people specifically on MOBILES click my button?
    Thanks for your response! love your videos!

  25. Thank you very much, Julian, I am glad I found this video. You really have made my day, I have been trying this for last 4 days and now when I saw your content I got to know my mistakes which I have been doing in my last studies.
    Thanks Again 🙂

  26. One question, Can we import the events from google analytics.
    How to set the parameters for this while creating the goals.

  27. If I'm implementing this for a get a quote button, and I have one button on the top of the page and one button on the bottom of the page both going to the same external quoting page, should I use the same class, or should I use a different class and Trigger for each of those buttons?

  28. Thanks man for the video, but I could ask a question.

    If wanted to turn this event into a Google Analytics goal, how would you do it?

  29. Hey, very clear video!

    However i'm having a few issues…

    I've created the generic click trigger, enabled all click elements and checked if the code is live with tag assistant, but when I enter preview mode and click my add to cart button, nothing is firing like it is on your tutorial.

    Anyone?

  30. I have created an GA event in GTM for my mobile site – I get to monitor how many clicks for certain buttons. Now, the problem is, even if I use the segment Desktop I still get to see the results for the mobile. What do I need to do? I need help. Unable to find useful resources online.

  31. Hi Julian, I'm a big fan of you in GTM tutorials. This tutorial is a HUGE help for me. I have a 4 steps form on my website and I want to track the form abandonment. Is this possible through event tracking, If Yes! Please give me some idea or any of your tutorial link.

    Your feedback is highly appreciated.

    Thank you

  32. You have a variable named {{GoogleAnalyticsID}} – is this a custom variable? 8:52 – yea probably should have covered this part in your tutorial

  33. I have a wordpress blog and I created a generic all clicks trigger based on all elements but when I go to preview mode it does not show up on the left side as gtm.click event I wonder if wordpress requires an add-on for GTM??

  34. I enjoyed watching this tutorial, however with the newer Tag Manager Interface there was some stuff I had to guess on, and I was not able to successfully fire my new tag.

  35. Hi Julian, thanks for your videos. Great learning content! 🙂

    I have question about GTM and Analytics. We track button clicks on page by steps. In step 3 we have final button for reservations and in that button there is value of trip. How can we track this value and have that amounts somewhere cumulated.

    <input class="button button-big button-fly js-form-submit form-submit" data-label-full="Plaćanje 14160.00 HRK" data-label-partial="Plaćanje 2100.00 HRK" data-label-reservation="Rezerviraj" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Rezerviraj">

    We track input class & page URL so we know from where this click came from. But how can we track this "data-label-full" with worth of travel? Thank you.

    data-label-full="Plaćanje 14160.00 HRK"
    HRK is currency = Croatian Kuna

  36. Hey Julian, thank you so much for the awesome videos..it has helped me alot :).. I've got a query, my button clicks tracking works, but the action doesnt take place. For example, for menu clicks, it registers a click on the about us menu button, but then the page is not redirected to the about us page.. it just gets stuck..

  37. it is astounding how google can crank out these tools but cannot explain their stuff despite the docs/support they barf out. As many have said this is one the more 'here are the steps to do one of the most common actions using gtm'. Thank you.

  38. Hi Julian!! This really helps, thanks!

    Im doing exactly what u show, and in Preview Mode i see everything OK. Every Trigger and Event is Fired Correctly.
    But when I go to GoogleAnalytics, I only see MY clicks but not the ones that other Users are doing!
    I-ve asked my hole team to click in some buttons that I have tracked, but I don't see those interactions. I only have metrics from the ones that i do from my computer.

    Have u heard of this issue??

    Cheers!
    Marcos.

  39. HELP! I have a DELL and I don't have command button. Every time I try to click I see the gtm.click appearing but the page always changes before I can see the details.

  40. It only show last 30 mins events? is there any way to know total events whiteout any time period?

  41. Thank you so much for this. Google's documentation was very difficult to understand and takes you in circles with links. Everything works after following this video.

  42. Id love to know how to do this for measuring clicks to reveal a customers details. If i had a site with multiple vendors and when one vendors product page is reached there is an option to reveal seller details. How can this be tracked if all it does is reveal details on the same page?

  43. How we can select the tags in GTM? In my ecommerce website we have all add to cart button with same value.

  44. Great video as usual. How to implement this for a phone number as it is not a button? Any tips to cover a partial of the number to make sure user will click on it?

  45. Can the tag be configured without defining the trigger separately? as described below (especially when a website has only one contact form submit)
    While tag configuration step 3 Fire on "click text" equals "Add To Cart" (matching the exact text of button)

    For an ecomm website, typically many pages will have add to cart button hence makes sense to define trigger separately and link to a tag…is there any other advantage of defining a trigger separately?

  46. I Am using Buttonizer plugin in my website. And I can't track it by GTM. Can you tell me how to add plugin like Buttonizer to GTM?

  47. Essentially could u not tick enhanced ecommerce in the settings and tick data layer and this would become enhanced ecommerce click ?

  48. Google Tag Manager debugger is not working and I have been tried to fix it for the last 2 days…Just feel like throwing my computer away…I don't know what else to do!!!

  49. HELP: I am not able to see variables in GTM mode since right click (new tab) is not enabled for that button and it is opening in the same tab . Please help

Leave a Reply

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