Event tracking through CSS selectors in Google Tag Manager

This article is conjunction with the article Introduction to DOM, Nodes & CSS Selectors for Google Tag Manager where I introduced the concept of DOM and CSS selectors.

Make sure you read it, in order to get the best out of the present article.

Today I am going to show you, how to use CSS selectors for tracking events in Google Tag Manager.

Tracking clicks on a button via CSS selector in Google Tag Manager

Here is how the whole process would look like:

#1 Find the CSS selector of the button you want to track.

#2 Create a new tag of type Universal Analytics which send event data to GA on button click.

#3 Test the tag and then publish the container.

Let us suppose you want to track clicks on the ‘Start Assessment’ button on the page: https://www.optimizesmart.com/web-analytics-training-course-promo/

Follow the steps below:

Step-1: Install the chrome extension called ‘SelectorGadget‘ for finding the CSS selector of a page element.

Step-2: Navigate to the page: https://www.optimizesmart.com/web-analytics-training-course-promo/

Step-3: Click on the ‘SelectorGadget’ icon (at the top right hand side of the browser window) in order to turn on the extension:

Step-4: Now select the ‘Start Assessment’ button and note down the corresponding CSS Selector, displayed in the ‘selectorGadget’ tool:

In my case the CSS selector is: .wpProQuiz_button

Get the FREE E-Book (62 Pages)

Step-5: Turn off the ‘SelectorGadget’ extension by clicking on its icon again (at the top right hand side of the browser window)

Step-6: Navigate to your GTM account and create a new tag of type ‘Universal Analytics’. Name it something like ‘Send click on the Start Assessment Button’:

Step-7: Create the tag with following configuration:

Step-6: Create a new trigger with following configuration:

Step-7: Save the tag and then preview the container.

Step-8: Navigate to the page: https://www.optimizesmart.com/web-analytics-training-course-promo/

Step-9: Click on the ‘Start Assessment’ button and then scroll down the page, where you can see the ‘GTM Debug Console window‘.

Step-10: Click on the ‘gtm.click’ event under ‘Summary’ column in the GTM debug console window:

If you see your tag (in my case the tag is ‘Send click on the Start Assessment Button’) being displayed under the ‘Tags fired on this event’ section, then it means that your tag fires on button click.

Step-11: Click on the tag to see what values are being passed:

Step-12: Scroll down to the ‘Firing Triggers‘ section to check the various filters for your trigger:

You should see green check mark next to each filter.

If your tag is not firing then you would see red cross mark next to one or all of your filters.

Thus ‘Firing triggers’ section is a good way to determine, why a tag is not firing.

Step-13: Navigate back to your GTM account and then click on the ‘Leave Preview Mode’ link.

Step-14: Publish the container.

Step-15: Navigate to your Google Analytics reporting view and then click on the ‘Top Events‘ link (under ‘Behavior‘ > ‘Events’) to see the data for the tracked events:

That’s how you can use CSS selectors to track events in Google Tag Manager.

Related Articles:

Event Tracking in Google Tag Manager

Event Tracking in Google Analytics

Take the Course

Most Popular E-Books from OptimizeSmart

Learn to read e-commerce reports book banner

Check out my best selling books on Web Analytics and Conversion Optimization on Amazon

How to get lot more useful information?

I share lot more useful information on Web Analytics and Google Analytics on LinkedIn then I can via any other medium. So there is really an incentive for you, to follow me there.

Himanshu Sharma

Certified web analyst and founder of OptimizeSmart.com

My name is Himanshu Sharma and I help businesses find and fix their Google Analytics and conversion issues. If you have any questions or comments please contact me.

  • Over twelve years' experience in SEO, PPC and web analytics
  • Google Analytics certified
  • Google AdWords certified
  • Nominated for Digital Analytics Association Award for Excellence
  • Bachelors degree in Internet Science
  • Founder of OptimizeSmart.com and EventEducation.com

I am also the author of four books:

error: Alert: Content is protected !!