3 Ways to Create Click Triggers in Google Tag Manager

Let’s dig deeper into click based event tracking and three easy ways for you to create the right trigger to associate to your tags and send to Google Analytics.

Brad Redding:

We’ve looked at the seven different types of triggers that we can use to associate to our tags to push into Google analytics. Now, we’re going to hone right in on our click based trigger. This is really the most common trigger that we’re going to use to create our events to push in a GA. For example, adding to cart, people click on email modals, clicking on buy with PayPal buttons, or buy now buttons, or main navigation, FOMO interactions. These are all potentially click-based events that we can send into Google analytics to help us really paint that picture that are the non-page view type of behavior that users are taking in their path to purchase. 

I’m going to show three easy ways that you can create your right trigger to associate to the tag to send to GA. Any non-technical person can do it because GTM really gives a lot of this out of the box for us, and sometimes it’s just a matter of knowing where to look to create that trigger for you.

Option number one. We are going to use the builtin preview mode that GTM gives us on the front end to create our trigger. As you can see here, as I’m clicking around on my site, in our GTM preview mode, you can see all of these different events are firing. GTM is doing this for us. I didn’t need to set anything up except have the click class variables enabled in my account, and now GTM is automatically capturing that for us.

Anytime I click on something, pun intended, I can click into that event and look at the variables. And again, many of these are the native built in variables that GTM is populating for us. So we can see, I just clicked on the transform your data to insights header, and you can see Google tag manager is automatically capturing that click text, the click class for that, etc. So that makes the process of defining my trigger much easier.

Let’s look at this beacon lead magnet, where when I click, it opens up a modal, and I want to track how many people are actually clicking on that from the homepage. So I go to my event over here, I have my click class, which GTM automatically populated for me. And now I’m just going to go into my tag. So I have my event tag here for lead magnet click, and my trigger is associated to this. So I have an all elements trigger. So just showing you how this is created and our trigger type configuration, we have our click all elements, and now I need to create the rule. So this trigger only fires when someone’s clicking on that modal.

I have my click class, so this is the same variable. Let’s just go back and look at the homepage again, we have this click event and the click class equals button, button default, pop-up modal. And that’s what I’m filling in here. Click class equals button, button default, popup modal. Now, I’m adding a secondary condition to this where I only want this to fire on the homepage. This will potentially prevent any false positives or clicks on different pages that might have the same click class. I just have page URL set to equals homepage, super simple. Now I have this trigger associated to the tag, and you can see, on this click, if I go to what tags executed on that trigger, and you can see my GA event lead magnet click, super simple.

Option number two. There are sometimes when you’re clicking around and trying to find the click class or click element that’s associated, what you’ll end up getting is empty strings or elements that you really can’t use in the trigger. In this particular one, I was lucky where the click class was populated, but let’s say that there are top navigation here, so let’s just close this modal out. Let’s say it wasn’t so lucky and this click class did not populate. What you can do here is actually right click from your browser, inspect the element, and the browser will automatically have that element selected. And from here, right click again, copy selector.

Now I have my selector that I can pop over here into GTM. We have our GA event promo bar click, so this is the event that I’ve created. Here’s the trigger. Now, there’s a slight difference in this trigger that we created. The click element matches CSS selector, so again, I copy this selector from the front end, and now pasting it in there. We’ll save, let’s go back to the front end, and for you Mac users, if you want to click to open items in new windows, just hold down a command and click, so we can actually stay on the same page and see our events execute. We have our click event here and our promo bar click event executed the way to expect. So this is a way for you if you get stuck and you can’t actually find the click class or click element in the GTM debug mode, you can use that little handy Chrome dev tools trick.

Now, option number three is our Chrome extension, which actually simplifies this process for both option one and option two. With our Chrome extension, what we were doing for you is we have this little overlay, and all you need to do is select your trigger type of click, and this will unlock a little selector where you can just browse around with your mouse and point click.

Let’s say I wanted to track anytime someone was clicking on our main menu. We’ll see, our selector is automatically captured here. Clean that up a little bit. We have our selector, main menu one. Now, if I actually wanted to go through and just create this tag, I would create, fill up my event details and then save and import to GTM, and all this process is done automatically for you. But I’m going to show you a little bit behind the scenes and how these triggers created that we, again, automatically sync to your GTM account.

We’ll just point click, actually, I’ll show you how this works. If you just watch the selector anywhere I click, it’s automatically grabbing that selector for us. In this case, we’ll go back to the menu, I have my selector here. Going into Google tag manager, we have our trigger with our click element, again, matches CSS selector, and then we have our main menu dash one. This event is created and saved. Now we’ll show our debug mode back open here, let’s click on our pricing page. We’ll see, we have another event that executed our GA event, may navigation click. Let’s just look at this event that fired and automatically picked up our pricing page click. So that’s the third way.

I’m going to show in a little bit more detail in our next episode on how the Chrome extension works to really simplify the process. But again, three ways to create click based triggers. Anyone can do it, it’s super simple. If you have something that you want to know, how many people are doing on your site today, go ahead and give it a try, create your first click based event, and watch that data start pouring into Google analytics.