GTM

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.

Why?

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):

  1. Enable the built-in variables Click Classes & Click Elements 
  2. Create a new trigger type of Click > All Elements
  3. Set the trigger to fire on All Clicks 
  4. Create a new Universal Analytics tag with Event as the track type
  5. Assign the trigger you just created and save this tag
  6. Click the Preview button in the top right of your workspace
  7. Navigate to your website URL in another browser window and you should see the GTM debug console popup in the bottom of your browser
  8. Click anywhere on your site that doesn’t bring you to a new page (ex. opening a mini cart or mega menu)
  9. In the GTM debug console you should see a gtm.click event in the left column under Summary – select this
  10. 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:

GTM Click Class Trigger

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

gtm-click-class-variables

Steps 2 & 3: Create a new trigger type of Click > All Elements & Fire on All Clicks

gtm-all-clicks-trigger

Step 4 & 5: Create a new Universal Analytics tag w/Track Type of Event & assign your trigger

gtm-event-track-type-with-trigger

Step 6 & 7: Preview your GTM container and navigate to your website

gtm-preview-mode

Step 8, 9, & 10: Click anywhere on your site and view the variables from your gtm.click event

how to find click classes in gtm

Bonus: Use Dev Console to Find Click Classes

You might find that your click classes in the example above are either:

  1. Undefined/empty (even though you clicked the darn thing!)
  2. 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:

right click for gtm click class

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”:

find gtm click classes with chrome dev tools

Then you copy this into a trigger that has Click Element Matches CSS Selector like this:

click element css selector

That’s it!

Conclusion

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.

More GTM Tips

Want more helpful GTM and Analytics tips? Join our email list.

We respect your inbox.


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

Related Articles

Talk with Us

Please complete the form to request a demo, discuss our solutions, or to just say hi!



Some of our clients