How to Find Click Classes in Google Tag Manager
Use the GTM debug console to save you time and help find the right click classes for your triggers.
Last Updated 6/21/2018
A solid user behavior tag plan for your website will require you to dig into Google Tag Manager’s built-in click variables.
The vast majority of websites today involve user actions that don’t trigger a new pageview hit that is sent to Google Analytics.
Examples: opening a mini cart, clicking on product page tabs for more spec details, reading reviews, category page quick view, watching videos on product pages, etc. You get the picture 🙂
So, if you don’t have event hits pushing these actions into GA then you can’t measure the impact of features & content on your KPIs.
How do you find your own click classes or click elements via Google Tag Manager?
Use the GTM debug console through these 10 quick steps (see screenshots below):
- Enable the built-in variables Click Classes & Click Elements
- Create a new trigger type of Click > All Elements
- Set the trigger to fire on All Clicks
- Create a new Universal Analytics tag with Event as the track type
- Assign the trigger you just created and save this tag
- Click the Preview button in the top right of your workspace
- Navigate to your website URL in another browser window and you should see the GTM debug console popup in the bottom of your browser
- Click anywhere on your site that doesn’t bring you to a new page (ex. opening a mini cart or mega menu)
- In the GTM debug console you should see a gtm.click event in the left column under Summary – select this
- Lastly, click on the Variables tab in the GTM debug console and you should see a table with all of your variables…along with the value of your Click Class & Click Element that you can use in your own custom triggers
I use this process all of the time to help get acclimated with a new site and begin tracking behavior events across a new site.
Now when creating a trigger for a specific action on your site, you’ll want your trigger to look like this:
Where btn btn-default is the value that you’ll copy from the click class variables table from step 10.
Click Class Discovery Screenshots
If you’re visual and need screenshots of the 10 steps outlined above, here you go:
Step 1: Enable the built-in variables Click Classes & Click Elements
Steps 2 & 3: Create a new trigger type of Click > All Elements & Fire on All Clicks
Step 4 & 5: Create a new Universal Analytics tag w/Track Type of Event & assign your trigger
Step 6 & 7: Preview your GTM container and navigate to your website
Step 8, 9, & 10: Click anywhere on your site and view the variables from your gtm.click event
Bonus: Use Dev Console to Find Click Classes
You might find that your click classes in the example above are either:
- Undefined/empty (even though you clicked the darn thing!)
- Duplicates to other buttons/elements
If this is the case then you can also get very granular by using Chrome dev tools to target the exact element.
Step 1: Right click the button you want to track:
Step 2: Copy Selector in chrome dev tools
Once you’ve clicked inspect in step 1, your dev tools will open up and highlight your UI element. From here, right click and click the “copy selector”:
Then you copy this into a trigger that has Click Element Matches CSS Selector like this:
Discovering your own click classes in GTM is one of many to-do’s as part of a solid tagging plan. But, by leveraging the GTM debug console you’ll save a lot of time (and headache!) vs digging through your developer tools to find the right click classes for your trigger.
You are going to encounter edge cases (too many to list here) where you might need to deviate outside of this process. One example is when you have multiple elements on a single page that have the same click class/element. If this happens then you’ll have to go up one or more layers in your DOM to target different parent elements.
Simo Ahava has a great in-depth tutorial on digging into CSS selectors. If you have any other questions feel free to leave a comment below.