Button Click Tracking With GA4 and Google Tag Manager: 2022 Tutorial

what's up Zach Lutheran Branch group here in this video we're doing Google analytics for button click tracking this button right here subscribe to the YouTube channel we're gonna figure out two ways that we can track this using Google analytics for and Google tag manager [Music] so we have two ways to do button click tracking in Google analytics for but first what does button click tracking actually do it allows you to create a custom ga4 event that will fire and collect data every time a key button on your site is clicked this is the button that we're tracking on their own Branch site that button gets clicked we want to see data like this what are the tools that we need to use to track these button clicks we need Google tag manager GTM is where we create the event that sends the button click data into ga4 and then we need ga4 Google analytics 4 must be paired with the Google tag manager container where the button click event has been created here's how the process works we create the ga4 button click event in Google tag manager and that requires two things a trigger and a tag the trigger specifies the conditions that we want to track in our button click it's like the rules for when this button click data gets created so we'll create a trigger like this and then that trigger gets paired up with a tag a tag is what creates the actual event data when it is paired with the trigger and that sends that data into Google analytics for this is an example of the tag that we're going to be building one very important note we're going to cover two ways to do this button click tracking the first part of this video we will cover how to track button clicks with the link within the button and in video part two we will do button click tracking through the click class of the button that's going to be at the end of this video end of the process we're going to test the tag in Google tag manager we're going to publish our gtn container we'll do some file configuration in ga4 let's get started in Google analytics Force we'll see where our new button click data will live once it's ready so here we are in the root and Branch ga4 property looking at the engagement overview if we go down to events we're going to want to create a ga4 event a custom event so that anytime somebody clicks that subscribe button we'll be able to have an event here that says someone just subscribed to YouTube in this case we're going to show two different ways to do this the first way is to use the specific link we're going to use a link click trigger to track this button go to Google tag manager tag manager.google.com and let's build this trigger pop on down to triggers and hit this new button let's give it a name you can call you can call it button click trigger YouTube subscribe we'll click into configure it and look on the right side under click we'll see this just links click we're going to have this trigger fire on some link clicks we're going to have this fire on the click URL so the destination of the click we can right click on this button and just copy the link address and pop that in there so we're going to save that now we've got our trigger Next Step let's build a tag go to tags hit the new button ga4 button click you to subscribe First Step let's choose a tag type this is going to be a Google analytics ga4 event tag if you have already created ga4 when you go into this configuration tag you will be able to pick your ga4 property that you've already set up and configured if you haven't done that check the link in the description for how to set up ga4 using tag manager now we just need to give this thing an event name what name do we want to see in our reports when this event fires I would recommend something that's pretty easy to remember so this is pretty easy for me so describe button great now we have our tag configured at least the basics and we just need to click into that triggering area so we can pair that up with the trigger that we just built I'm going to give this a name here so we know how we're doing this one for now link click trigger the very last thing we need to do is we need to send additional event parameters if we want more information on our event when it happens if all we want is just ga4 to notify us when that click happens we don't need to do anything else but if we want some more information we can add some event parameters and put this link in the description this is a Google support article shows the following parameters that are collected by default with every event including a custom come event like this one so we'll get the language the page location the page refer so where the user was before they got to this page the title of the page and the screen resolution but let's say we wanted something like The Click text so this says right now subscribe on YouTube question mark maybe we'll change that in a month or two something else some kind of other call to action if we set up a way to bring in that click Text we'll get that information in our reports as well and we might be able to learn something about what's most effective so let's add a row here and we'll just call this click underscore text and the value of this is going to be a variable so we get some curly braces open that and then we're gonna grab click Text here now if you don't see that value as an option it means you haven't configured your built-in variables good news for you is that's incredibly simple if you haven't done that just go from tags down here to variables where this we got this little Lego block and you'll see built-in variables and this button to configure and under clicks here just make sure click Text is toggled on that will allow us to use that as a variable so as that value changes on the button if we change it in the future what value gets pulled in through our tag to ga4 will also change back to our tag remember this click Text parameter we're going to have to do something with this in ga4 once we confirm our tag is working we're going to register that event parameter as a custom Dimension that is an important step if we want to be able to see that information in our ga4 reports now before we go test there's one other thing I want to talk about here and that's our trigger so right now the way that this is configured anytime that this link is clicked on the site our trigger will catch it and our tag will fire so if I have this link other places on the site not through that button that's probably not going to be really effective tracking so we might want to add depending on your situation add a little more specificity and if that sounds like you we might want to do something like specify this is firing only on the home page so we could go into our trigger and hit this plus button here to add a condition and let's say when the page URL equals that if it equals the home page now we're going to test this thing so to test we're going to hit this preview button here to enter preview and debug mode let's grab the URL that we want to debug I'm going to paste it there and we'll hit connect we can see now in the bottom right hand side of the screen tag assistant is connected so we're going to take the action that we want we're going to click this button and then we hope that we'll see over here that we'll get that tag to fire so I'm going to right click on that so the button opened up let's go over to here and the tag did not fire and this is because I did something very silly we set our trigger to include the specific page URL that's equal to the location of the home page right there but since this is coming from GTM GTM debug it's not going to fire because this is here all all of these URL parameters but there's another thing that we can use in our trigger that's going to get the exact same thing and that's page path so page path is just going to be that trailing slash at the end of the host name the root and Branch group so we're going to go back to Google tag manager make that change and then see if that gets our tag to fire back now in tag manager we're going to change this page URL we're going to make this page path and then we're going to save that and now we can refresh preview and debug mode bring that change our trigger back over to our test environment by hitting this preview button again right here all right we're reconnected go over to the button that we want to test I'm going to hold Ctrl and left click so it opens in a new window and then I'm going to go back to tag assistant and hopefully we can find that tag that has fired all right we see it right here that button fired so when we click into it we'll be able to see the values that are being passed let me see our event name YouTube underscore subscribe underscore button and we see the event parameters that we wanted to pass with it the click Text with the value being subscribe on YouTube so we're working now go back to tag manager and we can push this live and definitely don't forget to publish that's hitting the submit button right here you can add little name and then blue button to publish it now we're done in tag manager let's go back to ga4 if you like me added an event parameter to be sent with your ga4 tag for click Text and you have not registered that as a custom Dimension you will need to do that now in ga4 if you want to see that data in your ga4 reports the way to do that is to go down to configure and from there you're going to hit custom definitions right here so what you would do is hit this button blue button to create custom dimension add a dimension name so this first thing is going to be what actually shows up in your reports it would be an event scope dimension you can add a description if you want that's just something for your kind of internal record keeping but the important part here is this event parameter this is where you would need to enter your event parameter exactly as you entered it in tag manager click underscore text is how we entered that if you forgot just click back into your ga4 tag and then you will see your event parameters there once you're done hit save so now we're done can't wait to get this data in our reports if you like this video give it the old thumbs up if you would I'd appreciate it and there's going to be a part two of this video where we show the additional way that I've mentioned before to track button clicks so if for some reason that link click option is not the right option for you we're going to show how we can track clicks on this button another way that's in part two works for you don't waste your time watching that one go learn something else in Google analytics for all right you're still here let's go through our second approach for button click tracking click class click classes Returns the value of the class attribute of the HTML element that was the target of the action basically that means the click class will return a value associated with the with the click and in our button here there are actually two such values one value is on the inside of the button on this subscribe on YouTube this title this text that is one specific class attribute and then there's another one for the outside of the button should give credit to Julius from the analytics Mania Channel somebody who knows a ton about two parts of this button inside part the title one click class and then the outside click so we'll need two new triggers for the two areas of the button so we can capture the data regardless of where somebody will click on our button and these are going to be all elements trigger types so when we create a new trigger previously we used the just links click trigger this is going to be the all elements click trigger now you should have configured your built-in click variables if for some reason you haven't go to tag manager look at your variables and then make sure these built-in variables are configured using this approach we could actually use a number of different variables for our trigger you could use click element click text we're going to use click classes as mentioned once you do that go back to tag manager go to preview mode hit that preview button let's get connected and then let's click our button again and then check the messages in preview mode we want to see what different variables are being pulled back by The Click element trigger so click into that message click and explore under variables now we want to actually look at those variables to see what is happening on those button clicks so one thing that we can see there's click classes this is what happens when we click on the inside of the button text and we're going to use that now so after testing with the inside of the button looking at variables click classes this is what we see that Avia underscore icon box underscore title that's the value that gets pulled back we use that to create our trigger our all elements trigger type using click classes when it equals Avia underscore icon box title what we're grabbing from gtn right there and right there the trigger type is all elements the trigger fires on some clicks and when the click classes are equal to what we just saw now we want to do some testing for the outside of the button as well so it's important here don't click on the middle of the button click on the outside here's what we see when we look back variables there click classes equals this long whole big message here but we can see at the front of it it begins with Avia dash button that is the only button on the page that returns that click class so we can create a trigger to track clicks on the outside of the button with an all elements trigger type that fires when the click class contains that Avia dash button text right there here's what that looks like when we build it all elements trigger type firing on some clicks when click classes contains Avia dash button now you can use the exact same tag that we had built before that ga4 event tag still works but we just need to pair it up with these two triggers now if we want to use this option instead of the link click based trigger you can see now here's our tag on top and the two triggers at the bottom so if either of these things happen the outside of the button click Text or the inside of the button where the text is this tag will fire you can see that or operator there is going to capture both of those that's the default way that these triggers work you can actually add a bunch of different triggers if you want in the in the future and they will all be separated by or conditions just hit that plus button there to add a new one you can see the little minus icons below that if you add one then you want to get rid of it just hit the minus sign there so that's it thanks for watching this video I hope it was helpful if you liked it give it the old thumbs up have fun out there [Music]

Channel: Root & Branch Digital Marketing

Views: 2,811

Keywords: digital marketing training, digital marketing, root and branch, zack duncan

Id: JOFtjLpwBLE

Length: 17min 26sec (1046 seconds)

Published: Tue Oct 11 2022