Button Click Tracking with Google Tag Manager - 3 methods [2021]

in this video i will show you three methods of how to track button clicks with google tag manager why three because button click tracking is not as simple as you might think and some tutorials online are heavily oversimplifying it because of that you actually might be losing some clicks on your website and in this video i will show you how to avoid that [Music] hey my name is julius and welcome to analytics mania youtube channel where you can learn google tech manager and google analytics and if you want to stay up to date with google tag manager consider subscribing in today's video i want to take a look at a very popular topic where actually many people are making mistakes and that topic is button click tracking website buttons can be coded in different ways therefore they require different tracking techniques that's why this video contains not one not two but three tracking methods i will start with the simple ones and then at the end you will learn about a third type of buttons where many gtm users are making mistakes because they just have no idea that this problem exists at all however because of that they're actually losing a lot of clicks in their analytics setup so let's dive in in this video i presume that you have already installed google analytics 4 with google tag manager this means that you have the ga4 configuration tag if you're new to this and you don't have this tag yet i have another video that will explain how to install google analytics 4 and you will find a link to that video in the description of this video so let's get started with button click tracking with google analytics 4 and google tag manager now the thing with buttons is that developers can code them in different ways and because of that there are different methods of how can you track button clicks with google tag manager so let's take a look at one example here i have a button and if i click it i will be redirected to some page right here now let's say that i want to track clicks of this particular button if i enable the preview mode of google tag manager container and then i try to click this button you will see that there is a link click now this is happening because after we have installed google analytics for it also enabled lengthy tracking capabilities on a website so if you are dealing with a button and you want to track clicks you can click it and then you can check if you see the link click right here now if you are using for example older version of google analytics which is universal analytics or maybe you're using some other tool and in your setup there is no google analytics for then you probably will not see this event in that case you should go to google tag manager triggers click new trigger configuration and click just links then leave all settings as they are and then you can name this trigger all link clicks then you can save it refresh the preview mode by clicking the preview button so then you should click the button once again and if even now you don't see the link click in the preview mode then it means that this particular tracking method will not work for that button but don't worry because the next method that i will explain in this video should work anyway in my case when i click this button i actually see the link click right here now the reason why this happens because sometimes buttons are coded to look like buttons but they are actually just clicks in fact if i do the right click and hit inspect you will see that this button is surrounded by a tags and a tag in html means anchor or in other words link so this entire button is a link that is designed to look like a button so if i want to track clicks of this particular button i should have a link click trigger that is configured to do so so let's take a look what kind of data do we have in our preview mode i go to the preview mouse then i choose the link click and then go to variables unfortunately we don't have anything related to click right here however if we go to the data layer you will see that we have actually some information like classes or url now the reason why i don't see it in the variables tab is because i haven't enabled the variables and i mean click variables so go to variables in google tag manager click configure and then enable all click variables then when the saving loading disappears you should refresh the preview mode once again by clicking that preview button in the top right corner and then click this button here i have the link click once again i click it and then i go to variables and i see a bunch of click variables and some of them have some values in your case you might also have the value in the click id field maybe you will have some click target but in my case i have click text click url click element but this one is more advanced so we will skip this for now and then we have click classes so what we can do here is that we could update our just links trigger and make sure that it fires a tag well i mean we will create a tag very soon so we can configure that trigger to fire a tag only when click classes contains let's say this value because this is the main button of my home page and its class is hero double underscore and then btn in fact we can quickly copy this then go to the website then do the right click click inspect and then i will click ctrl f to enable the search and then enter and check how many elements have this particular class and right now i see just one out of one so this means that this class is unique enough to narrow down just to this particular button there are also some more advanced options how can we check whether this class is unique enough but maybe that will be a topic for another video so let's go to google tag manager triggers and if you haven't created yet then you should go to new trigger configuration just links and then have this view but since i have already created the trigger several minutes ago i will just click this one and i will update it here i should click some link clicks then click classes contains and this one so if the click classes of the clicked element contains this particular value and in our case it does then this trigger will be activated and we will later fire a tag that will send the event to google analytics so now let's rename the trigger i will name it link click and then this click save and then finally we have to create a google analytics for tag because we will send this link click event to ga4 so go to tags click new tag configuration g for event and then choose our existing g for configuration tag and then we can name this event you can name it whatever you want actually so for example we can name it call to action click or something like that then together with this event we can also send some additional values because we have things like click text or click url that data can be sent as parameters with this event so we can add for example two rows and the names of the parameters can be whatever you want however i like to follow the recommended naming convention of google analytics 4. so below this video you will find a link to this page and here i see some parameters that we could actually reuse in our setup for example here is the click event for outbound links and google analytics 4 automatically tracks parameters like link classes link id link url also we have things like link text so i think that we could enter some of these parameters in our tag settings so let's start with link text and also link url but if you don't want to use these names you can use some other names like click url click text this is up to you however keep in mind that as of the moment of recording this video there is a limit of 50 custom dimensions that you can use in the interface of google analytics for and i will soon explain what i mean so speaking of link text i can use the variable which is click text in google tag manager and it will return this value or whatever the name at that moment is of this button so here i can click this button and then click click text and then link url i can insert another variable which is click url it will return this value let me click this button and then i will choose click url finally in the triggering section i should click anywhere and then i should select my link click trigger that i have just created let's name this tag and then click save oh it looks like i forgot to select the configuration tag so i will select this tag right here and then click save now let's test the setup so i click preview then the preview mode refreshes and now i will click this button once i click it i go to the preview mode of my google tag manager click on the link click event and i will see that my tag has fired i have some typo right here but this should not affect the data that is sent to google analytics in fact if i go to google analytics 4 and then go to the debug view which is at the bottom of the sidebar here i should see that call to action click event right here and if you click it you will see some data that was sent together with it including link url and link text so if you want to track a button click and that button click is basically just a link then go ahead and choose this method that i have just displayed however let's take a look at another example here i am on another demo page and here i have just one button and let's say that i want to track clicks of this button so remember that i have already enabled a link click trigger in my container and if i click this button i will see some message well obviously this is just a demo button but if i click this and i've already done that you will see that there is no link click right here this is because this button is not a link if i do the right click and inspect you will see that there are no a tags right here so this is not a link therefore just link trigger will not work but don't worry because in google tag manager we have another type of click trigger and if you go to google tag manager triggers and then new and then trigger configuration you will see another type which is all elements click it this trigger will track clicks on any element on a website just links trigger tracks only links so let's create this trigger let's name it like this and then save it let's click the preview button because after we have created this trigger it enabled additional click tracking in google tag manager so let's click this button again after we have refreshed the preview mode so i click it and now you will see another event which is not link click but it is just click i click it i go to variables and i see some values of the variables for example this click is not a link click therefore click url is empty but we have click text and we have click classes which is call to action so in this case if we want to track and fire tags on this button we could for example try to use this value and our all element clicks trigger so instead of firing this trigger on all clicks we would like to fire only on some clicks and in this case the condition could be when click classes contains call to action so i copy this and i paste it right here we can again check if there are no other elements on the page that contain that very same call to action class so do the right click inspect then ctrl f or command f and then paste the class name and you will see that i have only one element right here obviously maybe some other pages might have elements with similar classes so you should probably keep that in mind but on this page this is the only button so i believe that this condition is quite okay although keep in mind that click classes might be a bit fragile in some cases if your developers are constantly updating the website that class might disappear one day because your developers maybe did some changes so if you have an option to choose from click id and click classes i would always go with click id because in most cases it is a bit more reliable now let's go back to google tag manager and rename the trigger instead of all element clicks it should be just click and then this class name click save now i could create another ge4 event tag for this but let's say that i want to reuse that very same tag that we have created in the previous lesson so in this case i will just click on it and then add another trigger so first i clicked anywhere on this triggering section or i can click on this pencil and then click plus and then select that new all element clicks trigger right here click save then click preview to refresh the premium out and let's click the button once again now i see that click i click on it and i see the tag fired then i go to the debug view of google analytics i close here and now i should see the call to action click event very soon and here it is i click on it and now you will see just link text you will not see link url this is because at that particular moment when the stack fired click url variable was empty and google analytics for tag does not send parameters for example link url if the variable is empty or undefined so you don't actually send some trash or empty values if there is no value the parameter is dropped so if the just links trigger doesn't work on a button click then you can use the all element clicks trigger right here and both of these examples were quite friendly for google tag manager beginners however in real life there is a third kind of situation that is a bit more advanced but it is quite popular so let's take a look here i am on the page where i have two buttons so let's say that i want to track clicks on the add to cart button and if i do the right click and then inspect first of all i will see that this element is not a link therefore just links trigger will not work but since we have at least one all element clicks trigger enabled on a page this is okay so we should still see something in the preview mode related to that click so let's click that add to cart button i do that then i'm in the cart and in the preview mode i see click right here so far so good now if i go to variables i will see things like click id i will see click text so in this case you might think that it will be enough to create one trigger which is all element clicks some click and then click id is this one right well not really because actually you will be missing a bunch of clicks on this button you will track clicks on this text but if i as a visitor click somewhere right here you will not now the reason why this is happening because this button is not a single element and this is actually quite popular among developers to do so if i do the right click on this text you will see that this is a button element and if i hover my mouse on it you will see that this entire button is highlighted but within that button as a child we have another element which is just text and this is the text so if i click on a text i click on one element but if i click on the background of the button i will click on another element so actually let me show you what i mean now i will click on the text then i go back and then i click on the background in the preview mode of google tag manager we have two clicks this is the first click on the text and the second click and in fact you can try to memorize this click id right here we have add to cart text now if i click another click element right here i mean click event here the click id is different it is add to cart not add to cart text this is happening because we have as i said two elements in a single button we have one element which is text and its id is add to cart text and the background of the button or the shape of the button it has a different class which is add to cart so if you try to use this click id in your trigger you will be tracking only clicks on this text but some visitors they just click somewhere right here and you would be missing those clicks so one of the possible options could be like this take a look at both ids they both start with add to cart one is add to cart the other one is add to cart text so in fact i could take this part and use it in a trigger and do the trigger like this click id starts with and then this so this would work and in fact i can save this trigger and show you the final result then i will create a tag this tag will be a different one so it will be g for event and then its name will be add to cart let's say and then in the triggering i will select that add to cart trigger finally let's name the tag and save it i click preview and now i will click the button in two places the first one will be on the add to cart and i mean the text and the other one will be on the background and in both cases in the preview mode i should see the click event and on both of them my i2 card tag should fire and it did that is exactly how things work now if i go to the debug google analytics i will see two add to cart events the first one and the second one so everything is working fine however in this case i would say that i'm quite lucky because both elements in the button have ids but in some cases it might be more complex for example maybe there is no id on the text and this is actually would be quite often in real cases so let's imagine that this text has no id at all so it looks like this so if you're dealing with something like this then you will have to apply some more advanced techniques and that technique involves a thing called css selectors now if you're new to css selectors i highly recommend to get familiar with them at least with very fundamentals because they will help you a lot in google tag manager in the description of this video i will post a link to some resources for you to get more familiar but in a nutshell css selector selectors basically are like patterns that allow you to write more complex conditions that allow you to select certain elements on a website so for example in this case we could write a condition that will track clicks on all elements that have this class or are directly below this element and i mean that are childs of this element now the child in html basically means an element that is not directly like below it but it is like on the lower level of that element so it is quite the same as with folders in your computer so we have let's say one folder right here we have one folder right here but in reality these are like elements and if i expand it this is a child so we could create a condition where we will be tracking clicks on this element and all of its children and in this case the child is the text that is right here this can be done with a thing called wildcard css selector and let's take a look at how can we create this let's go to google tag manager and i will update the existing add to cart trigger right here so i click it i delete that condition which was related to click id and instead i choose a variable which is click element now this is very important if you want to work with css selectors you have to use click element variable and then you must select match css selector it won't work with equals contains or something else it works only with matches css selector or does not match css selector so let's select this option and now we are going to write a css selector that will be looking for elements that have either this id or our children of this element or maybe even on the lower level in the hierarchy of this button so in order to write a valid css selector you must be familiar with the basics and the fundamentals of the css so let's create a selector in this case i'm going to target elements by this id so i copy it and then i go to the preview mode now if i want to target an element by id there is a symbol in css that is this one so then i'm looking for elements that have this particular id so if a click happens somewhere on the background of the button this part will work but now we have to enhance this selector and make sure that it also fires if a click happens somewhere on children or maybe on children of those children within this button and that can be done with the following sequence first of all we have to enter comma because comma in css means or so we are looking for clicks on this element or on any element inside of this element or below this element in the html structure so here we enter comma and then we will enter a thing called wildcard css selector that selector is written like this we basically just copy this first part and paste it once again with the hashtag right here then it is important to add a space and then an asterisk so this means any child or any even lower element below this particular element so we are looking for clicks that happen on element with this id or any of its child or any of child of their children so we can call them i don't know let's say grandchildren now if you are a beginner in google tag manager and this part looks kind of confusing don't worry because well it is this is a bit more advanced technique therefore don't worry i would just highly recommend for you to dedicate some time and get familiar more with css selectors because it will make your setups more powerful that is for sure so click save in the trigger that trigger is already added to the tag and let's take a look if this tag is still firing so i click the preview button then after my preview mode has refreshed i go to the website and i will click the add to cart button once again in both places click on the text then go back then click on the background now let's go to the preview mode and i click the first click event and i see that the add to cart event fired i can click it and i can see whether my css selector condition was met and this matches as a selector condition was indeed met because this green check mark is visible and if i click on the next click event the tag is also fired and in the debug view google analytics 4 i see both add to cart events right here so that was a third and the most advanced option of how can you track button clicks with google tag manager but if the first two options didn't work well you probably have no other chance than just trying to implement this one oh and one last thing that i wanted to mention and that thing is related to the previously created call to action click event with that event we are sending two parameters which is link text and link url if you plan to use these parameters in your ga4 report and i mean things like analysis hub or some standard reports by default they will not be displayed in your interface so if you want to see them you will have to register them as custom dimensions so you should go to custom definitions create custom dimensions and then register them if you don't know how to do that then check the description of this video where i will explain how to register custom dimensions in google analytics for and one really really last thing is that you will start seeing events in your regular reports and for example in this section not immediately but most likely the next day or maybe in some cases you will need to wait for at least several hours so be patient and that's how you should track button clicks with google tag manager the first two methods were quite standard and simple and many other tutorials online also cover them however that third method with a wildcard css selector is often overlooked and that's where most people are making mistakes so i hope that this tutorial will help you avoid these problems in the future if you found this video useful hit the thumbs up button below the video because it helps me continue working on this channel also if you want to learn more about google tag manager and google analytics 4 consider subscribing to this channel my name is julius this is analytics mania and i'll see you in the next video [Music] [Applause] [Music] you

Channel: Analytics Mania - Google Tag Manager & Analytics

Views: 8,718

Rating: 4.9426522 out of 5

Keywords: google analytics 4, google analytics, google analytics 4 tutorial, button click tracking, button click tracking with google tag manager, button tracking google tag manager, button click tracking google tag manager, gtm click tracking, click tracking, google analytics events, track button clicks google analytics, track button clicks with google tag manager, how to track button clicks on website, how to track button clicks, tracking buttons google tag manager

Id: 308HzDVlhAw

Length: 23min 14sec (1394 seconds)

Published: Tue Apr 20 2021