Lessons

Lesson Info

Setting Up Custom Button and Link Click Tracking in Google Tag Manager

how do you? Re marketing fans And welcome back google analytics. Event tracking is what we're going to use to start getting more insightful, detailed and meaningful information about our visitors and we're gonna be able to use those events to create more effective re marketing campaigns. Now you may think that we're getting ahead of ourselves when it comes to creating these more advanced google analytics events here through google tag manager. But in fact we're laying the foundation for our remarketing campaigns if we want to ever set up a list and we do of all our visitors who clicked a specific button or click a specific link. We need to somehow track that information. The google analytics, generic page view tag that we have set up. It does track a lot of really important information like page views like which pages, a specific user visited bounce rate, clicks time on site, certain conversion rates but it doesn't give us a more detailed view of that data and it doesn't allow us to ac...

count for certain elements of engagement that we as advertisers and really, you know, professional thoughtful advertisers are going to want to track. So we'll be using google tag Manager to create custom events and send that information back into google analytics. What we're gonna do here in this specific lecture is set up Google events for button clicks. You're going to be able to apply everything we learn here to any button or any link on your website. Now, for example, let's say we go over to our homepage. This button over here. This view our services page when you click it, it simply scrolls you down to our services section. Doesn't doesn't lead the visitor to a new page where we would generally be able to track visitors or create a re marketing audience based on a specific U. R. L. Let's say you're an e commerce company and here's a website of one of our clients and we go into any specific, let's say category page coil springs for example, say you wanted to track visitors who added this item to their cart? Now that's clearly a metric or an indication of engagement. But if I add this item to the cart, I stay on this page. It just simply adds that item to my cart dynamically and obviously all of you who have ever shopped online know exactly what I'm talking about. So if you wanted to track anybody who clicked on this button you need to set up custom google analytics events around that button, click same thing back on our website. If we wanted to set up a audience. If we wanted to set up an audience that specifically click this one button we're gonna need we're going to need to do this via google tag manager via google Events. Having google tag manager isn't necessarily needed in order to set up this sort of event tracking, you could do this on your own through google analytics itself but without google tag Manager you'd have to go into the actual code of your page. customize some javascript customized the html and it would be a pretty complex and a bit of a headache with google tag manager. That entire process becomes much easier, more effective and much faster. So let's go ahead and begin setting this up. This is going to be a four step process. We're first going to set up a generic click trigger which at first is going to be a trigger that will fire the tag associated with it on any single click. We're then going to identify an event that trigger should be associated with. We're then going to ultimately refine that trigger and filter that trigger to only trigger when that specific button that we want to track is clicked. And then we're going to finally connect that trigger to a tag which is what's ultimately going to send that information back into google analytics. And then we're gonna test preview and make sure it's working perfectly well. The first step in this process, especially when it comes to button clicks, is to jump over into your variable section of your google tag manager account and make sure all the variables in the clicks box are selected by default by default. You should see most of these d selected or un selected and make sure they're all selected. Once again these are variables. We don't need to go into too much detail what they are but we are going to use one or two of them, particularly click classes in the in the coming steps. The next up we're gonna do is set up a generic trigger. Now if you remember when we set up our base google and google analytics tag. We initially set up a tag and then we triggered that tag to fire on all pages. That is the most ideal setup when you are setting up your basic google analytics tag but when it comes to something a little bit more advanced like this I like to work backwards and setting up your trigger first. You don't have to do it my way. This is just the way that we found for it to be the most effective. So the first thing we're gonna do is add a new trigger. I'm gonna call this trigger generic link clicks for now but we're gonna come back and change that very soon. Now in step to this process we want to choose this type of event that this trigger is going to be associated with. The type of trigger that we're setting up is going to be a click trigger so you select, click for now, leave it on all elements continue and now we're going to choose when to fire this trigger. In other words, refining this filter telling google tag manager how this trigger should actually work. We're going to select all clicks for now and create our trigger. So now we have our trigger setup before I go and publish this trigger, we're going to go into preview mode and this is going to be an important step when it comes to tracking specific button clicks if you wanted. If you wanted to just track any click or any button on your entire website and use that in a re marketing campaign by all means you could do that. And what we just did here is exactly what you would need to do and then you would go and associated with a tag, which is what we're gonna do in a few steps from now. But we want to be a little bit more thoughtful, a little bit more detailed and we want to only have an event that's collecting data on a specific button. Let's go back over into our website. And when we refresh this page, you should be expecting this google tag manager preview and debugged dialog to pop up, which it has As you can see we have our 00 Google analytics based tag that has fired on this page. And because we didn't create any other tags, we only have that one tag created so far. We're not seeing any other tags that even haven't fired on this page. But now watch on this left hand panel, what happens when I click view our services button, you're going to see a couple more um gtm dot click actions pop up and there we go. So we have the gtm dot click number seven and we're going to select that and head over to the variable section and what you're seeing here in this window is all the different information associated with the action that I just took, namely clicking that button up here, that view our services button, you have the event, variable, click classes, click element, click I D click target. And for some of these variables we have values. Remember that nothing actually happened yet? We didn't Nothing. No information is being sent back to google analytics just because google tag Manager is reading these values. This is just all the information that's available for us to use as we continue to refine our actual trigger and our actual tag. So what's important for us here for our specific purposes. And remember our specific purpose is to track Clicks on this one specific button. So the click class of this button is right here and this is a this is actually if we look at this, this is 23, this is around three different classes. But I'm going to select all the classes and I'm gonna copy that command or control C and I'm gonna head back into google Tag Manager. What I just did here was setting up that generic trigger, which was step one. Now we went into preview mode, I clicked on my button, I clicked on the variables of that specific event that happened at gtm dot click. Which is what popped up right after I clicked on the button and I'm pulling the click class that google tag manager read from the page. Now, if you guys know CSS html of course, you know that there are many ways to get the click classes for any given button or link. But this is just a really cool and effective way to do it. Using google tag managers, preview and debug dialog. Let's go back into google Tag Manager and now we're going to refine this trigger to go back into edit any trigger or tag you always just click the name of the trigger or tag that you want to edit because we're now refining this trigger. We're reconfiguring it to suit our specific advertising purposes. I'm gonna go ahead and rename this view, our services button click Okay. Our event is still going to be a click type. We're gonna still be triggering this on all met on all elements. But instead of firing on all clicks, we want to fire this trigger on just some clicks. So you click some clicks and now you have a couple of different options. If you choose. If you select this initial drop down, you'll see all the different variables that you selected in that first step when you went over to the variable section available for us to use for tracking buttons. We're gonna be using the click classes variable which is the one that was pre selected for us, click classes contains and you can do equal starts with all these different sorts of matching options. We're going to click contains and we're gonna simply paste in the classes that we copied from the preview and debug window in the previous step. And we're gonna go ahead and save that trigger now that we've saved up our trigger and this trigger has now been refined down to the very specific button that we want to track. Remember now this trigger is only set to work. This is only a trigger that's gonna work when somebody clicks the specific button that we specified by using this specific click class of that button. But now we need to actually set up a tag that is associated with this trigger. Remember this is step forward in the process. So we're going to go over to tags and we have here are normal google analytics based tag. And remember with google tag manager, every tag that you add, every functionality that you add needs a new tag. So we're gonna go ahead and create new once again this is gonna be a google analytics. Universal tag. And let's rename this tag to be 01 and I'm gonna call it event because it's going to be an event tag not a page view tag and it will be G A. For google analytics and it will be view our services event and of course your name and conventions might be different. You're going to set up your naming conventions however you want your structure and your organization to be now we have to get our tracking I. D. So that's the same exact step as we did in the previous lecture when we set up our base tag, go ahead and grab that you A I. D. From your google analytics account, paste it into the tracking I. D. Area. And here's where things are starting are going to start to get different from what we had initially set up last time. In this case we don't want to track page views we want this tag is meant to track an event. We want to send event information back into google analytics. So we're going to select event under track type and that opens a bunch of different options that we need to fill out category action and label is what we're going to be concerned with for our purposes. The category name that you add should be something that will easily help you recognize what that action was. So for our purposes we could be really specific because we're tracking just one specific button click and we can name this view, our services button click. Now if you were setting this up a little bit differently and you were tracking an event for all your buttons or all your add to cart buttons or all your shopping cart buttons are all your form buttons all at once and you weren't just tracking one specific button you might want to have your category named add to cart button where it's not one specific button but in our case because we're tracking one particular button on our homepage. We could name it very specifically the action is going to simply be something like button click which just makes a lot of sense. And our label which is just an additional piece of information that google allows us to identify a specific action with could be something like homepage click or homepage engagement but we could do something even cooler and we could use a dynamic variable for this step to add a dynamic variable. You click on this little lego icon, it looks like a little bit of lego brick to me, I don't know what looks like to you and we add that and we click um whatever variable you want this to be filled with. So for example let's say we have this specific button on a number on a number of our pages. We could choose page path and that's a variable that will dynamically Phil and dynamically send that information back into google analytics with a specific page path, the U. R. L. That this event was completed on Once again it's dynamic because this is not a standard value for every user. If the user hits this button from a contact us page or if they hit this button from a product page or from our home page. This page path is going to change. That's why we call it a dynamic value, a dynamic variable rather undervalue I'm going to leave this blank because it's there's no monetary or financial value associated with somebody clicking on that view our services button. If your e commerce, if you're setting up an event for adding an item to your shopping cart, that might be different, we might pull dynamically the value of the item that was put into that cart. But for us we're gonna leave that blank and we're gonna go ahead and click continue. Now we have that fire on section. This is that really important stage where we want to make sure that we're firing this tag as a result of the trigger that we set up in the previous step. If you remember the type of trigger we set up in the previous step was a click trigger. Remember that we had selected, click when we were asked setting up that trigger. So for the firearm we're gonna select click and we're going to see this dialogue of all the existing click triggers that we've set up because we've only set up this one trigger. We're gonna go ahead and select that specific trigger. If we had done this process in a different order by setting up the tag first, we would create a new trigger and do everything we did in the previous step now. But thankfully we already have our view our services button, click trigger. We could just select it and click save and then we click create tag. So now that's it, see how easy that was. It was so simple. We've done everything we need to do obviously if you remember we haven't published it yet but we've done everything we need to do to send event information back into google analytics for anybody who clicked a specific button on our website. Now we want to make sure that this is working properly. So let's refresh and we're gonna stay in preview mode and we're gonna jump over into our website and refresh the page. There's a couple different ways we're gonna test to see this if this is working first and foremost we see that we now have two tags available on this homepage we have the tag that was fired which are which was our basic google analytics tag if you remember setting up in the previous lecture and we have a tag that hasn't fired yet which is this event tags that we just set up which is the viewing our services, view our services button, click event. Watch what happens now when I click view our services button right away this tag got fired because this button click fired our trigger and that trigger fired that tag we could even do some further quality control by going into our google analytics account. If we go over to our reporting section and under real time we click on events we should see that event was just fired So we go over to an event and sure enough view our services button, click the event action was a button click and if I click the name of the event category, I will see the label and what we should see is just a forward slash right over here for event label because this page path was our homepage. Remember that event label is a dynamic page path. So really cool. Really simple. We're seeing that this is working. If I go over and I refresh the page, let's say I click on that button again. We'll see. We'll see that. Now we have two events because I just clicked on this same event again meaning I click on that button. That button triggered the tag and the tag triggered this event back into google analytics. Now that this data is back in google analytics. I can start using this event, this event action, this event label, this event category as parameters as requirements for my specific remarketing audiences. And I could use those remarketing audiences in my actual paid re marketing campaigns. Now I have the ability to show ads to people who click that button. I might want to have a campaign just for people who click that button but didn't check out or didn't submit a form. So it's really cool. I could set up an ad campaign that's now just targeting those people and that's something that I was not able to do before beforehand, I might be able to target people who are on my homepage for two minutes or more or people who went to our contact us page. But now by setting up this custom event in google tag manager where we used a combination of variables, triggers and tags, some pretty advanced stuff. But as you can see it's pretty straightforward. It's not that hard to do once you know how to do it step by step. We're now able to use people who clicked on that button who triggered that tag, which triggered the event inside google analytics. I can set up a remarketing campaign just around that specific audience. So it's super, super cool stuff. One other thing I'd like to do is what's called negative testing. I want to make sure that I'm just tracking people who clicked on this button and not on other buttons. So first I'll do is I'll just click around the page a little bit and I'll see um number seven, Number eight, Number nine, number 10, another click. So I'm getting all these clicks and we're not firing this tag, which is good. We only want to fire this tag. This tag should only get fired when I click on the button page. I'll go ahead and I'll click landing page, review and analysis. I'll open that a new tag. Okay great. We haven't fired it one more time. I'll click on this button over here. Haven't fired it. Great and I'll just go ahead and click on view our services and boom, we fired it. So with that negative testing we're able to just make sure that it's only firing on the button we want to fire. So just to wrap up this section really quick, it's super powerful. The ability to track specific button and link clicks. You might have pdf downloads, you might have contact form buttons that are not redirecting to an external U. R. L. You might have buttons like we saw in our case you might have buttons on an e commerce site that add to cart that just adds the product anomaly to the cart. You might want to track any anti card button of a certain product category of or a certain service category. Whatever it might be being able to track specific buttons and specific link clicks is really, really powerful. What we did here was setting up a custom event that tracks one particular button. But like you saw in the initial stage where we set up that generic link click trigger, you're able to set up these events that target a category of buttons. All your buttons, all the links on your page, specific buttons or links on your page and it's really cool. It's really powerful and this is the core foundation collecting that data, segmenting those users users into those buckets that are now going to allow you to use these audiences which will ultimately be able to use in your re marketing advertising campaigns. The very next section, I'm gonna show you some even more advanced stuff that's going to use more custom variables and triggers to set up scroll depth tracking how far down on your page of visitors scrolled. It's really cool. It gets a little bit more advanced. There's gonna be some external resources involved that you're gonna be adding as custom containers into your google tag manager account. I'm really excited to show that to you guys. I think you guys are gonna love it and I know it's something that you've been waiting to see. So without further delay, we're gonna wrap this up over here and I will catch you guys in a few seconds in the very next lecture.