Google Tag Manager CSS selector, DOM & Nodes Explained

Google Tag Manager, Analytics, Google Analytics Developer

My Step-By-Step Blueprint (100+ Pages) For Learning and Mastering GTM Data Layers

Get The Only Ebook On GTM Data Layer Ever Published (100+ pages). Learn & Master Data Layers

Yes I want the ebook

My Step-By-Step Blueprint For Learning and Mastering Google Analytics 4 (GA4)

Get the FREE e-book on Google Analytics 4 – GA4 (126 Pages)

Yes I want the FREE ebook

Last Updated: May 24, 2022

Google Tag Manager is easy to use for a non-coder but only to a very limited extent.

If you want to considerably modify the way, a tag is fired or should behave, or if you want to implement advanced tracking like scroll tracking, ecommerce tracking or enhanced ecommerce tracking then you need to have adequate knowledge of DOM, nodes and CSS selectors.

If you can not traverse the DOM, you won’t be able to get the best out of GTM. You won’t be able to take full advantage of the GTM triggers.

For example, CSS selectors are used while defining triggers in Google Tag Manager:

matches css selector

Through CSS selectors you can find elements in a web document.

But before you can use CSS selectors you must know about ‘DOM’ and ‘elements’. Before you can use CSS selectors you must know, how a DOM Tree can be traversed. Similarity, you will be able to use element visibility trigger in GTM only when you understand DOM:

element visibility trigger

In fact, you need to know how a DOM tree can be traversed before you can use triggers for scroll tracking, ecommerce tracking, enhanced ecommerce tracking, Video Tracking and several other types of tracking.

You will continue to get a very limited benefit of using Google Tag Manager if you choose not to learn about HTML DOM, nodes and CSS selectors.

62 point checklist

Get this 70 page detailed checklist containing screenshots, step-by-step instructions and links to articles

Do you want to set up Google Analytics 4 (GA4) fast and correctly?

Yes I want the ebook

Introduction to DOM and nodes

DOM stands for ‘Document Object Model’.

DOM defines the logical structure of a document and the way document elements can be accessed and changed. This document can be a HTML document or XML document.

  • When DOM is used to define the logical structure of a HTML document, we call the DOM as HTML DOM.
  • When DOM is used to define the logical structure of a XML document, we call the DOM as XML DOM.

For example, consider the following HTML document:

<html>

<head>

<title>Hello World!</title>

<meta name="description" content="I am learning to code."/>

</head>

<body>

<h2>Hi There!</h2>

<p>You are all right?</p>

<table>

<tr>

<td>Analytics Nerd</td>

</tr>

</table>

</body>

</html>

Following would be the DOM representation of this HTML document:

dom representation

Here ‘document’, ‘html’, ‘head’, ‘body’, ‘title’, ‘meta’, ’h2’,’p’,’table’, ‘tr’, ‘td’, ‘I am learning to code’, ‘analytics nerd’ etc are examples of HTML objects (also known as elements or nodes).

‘hello world’, ’I am learning to code’ etc. are all examples of text nodes.

Elements in the DOM are organized into a tree-like data structure (called the NODE Tree or DOM Tree) that can be traversed (travelled across) to identify and/or modify elements within a document.

When DOM is used to define the logical structure of any structured document, we call the DOM as Core DOM:

core dom

A Core DOM can contain HTML DOM and XML DOM.

Relationship between nodes

Nodes have a hierarchical relationship to each other. This relationship is described through parent, child, and siblings.

  • In a DOM Tree, the top node is called the root node (or root).
  • Each node (other than the root node) has got one parent node.
  • A parent node can have one or more children node.
  • Nodes with the same parent are called sibling nodes.

For example, consider the following HTML document, once again:

<html>

<head>

<title>Hello World!</title>

<meta name="description" content="I am learning to code."/>

</head>

<body>

<h2>Hi There!</h2>

<p>You are all right?</p>

<table>

<tr>

<td>Analytics Nerd</td>

</tr>

</table>

</body>

</html>

Here,

<html> is the root node

<html> has no parents

<html> is the parent of <head> and <body>

<head> is the first child of <html>

<body> is the second and last child of <html>

<head> first child is <title>

<head> second child is <meta>

<title> has one child (a text node): “Hello World”

<body> has three children: <h2>, <p> and <table>

<h2> has one child (a text node): “There!”

<p> has one child (a text node): “You are all right?”

<h2>, <p> and <table> are siblings.

Another example:

DOM tree

In order to successfully traverse a DOM, you must figure out the relationship between various nodes of the web document where you want to install a particular type of tracking (like event tracking).

Attributes and methods of elements

Each html object (except text nodes) has got properties (also known as attributes) and methods. 

For example in the code below:

<a id=”nerd” href=”https://www.optimizesmart.com” target=”_blank” title=”click here for more details” class=”rocky” onclick=”giveBreak()”>Visit OptimizeSmart.com</a>

<a> is an HTML element and its attributes are: ‘id’,’href’,’target’,’title’ and ‘class’.

‘giveBreak()’ is a method that is executed in response to an event called ‘onclick’.

To learn about more the properties and methods, read this article: Beginners Guide to Advanced Google Analytics Tracking

When we use CSS selectors we are finding elements in a DOM.

Introduction to CSS and CSS selectors

Cascading Style Sheet or CSS is a stylesheet language that is used to control the layout/formatting of web documents (web pages). For example, you can use CSS to make a text bold or italic or format a headline using a certain font.

A CSS Selector is an expression that is used to find element(s) which you want to style.

Following is an example of a CSS selector:

.subhead

CSS Selectors Vs. Regular Expressions Vs. Xpath

You can consider CSS Selectors as a cousin of Regular Expressions and brother of XPaths.

Regular expressions (or regex) is an expression which is used to check for a pattern in a string.

Both Google Analytics and Google Tag Manager support regex.

Xpath (or XML path language) is used to extract data from web documents esp. XML documents.

An Xpath Selector is an expression that is used to find element(s) in a web document esp. XML documents.

Both Google Analytics and Google Tag Manager do not support Xpath selectors.

Difference between CSS selectors and Xpath selectors

Both CSS selectors and Xpath selectors perform the same tasks but are written differently.

Following is the example of a CSS selector:

.subhead

Following is the example of the Xpath selector which can be considered an equivalent of the CSS selector mentioned above:

//*[contains(concat( ” “, @class, ” ” ), concat( ” “, “subhead”, ” ” ))]

Google Tag Manager supports CSS selectors but not Xpath Selectors.

The following could be the top reasons for that:

#1 CSS Selectors are easier to read than the XPATH selectors thus easier to use. You can see for yourself in the example above.

#2 XPATH Selectors may work differently with each web browser. So your XPATH selector may not work will all browsers. This is not the case with CSS selectors.

However, XPATH Selectors have got one major advantage over CSS selectors and that is the ability to find elements both forward and backward in a DOM hierarchy.

What that means is, that by using an XPATH Selector, you can find a parent element using a child element. This is not possible with CSS selectors.

When you use a CSS selector you can find elements only forward in a DOM hierarchy.

However, overall, CSS selectors are recommended over Xpath selectors.

62 point checklist

Get this 70 page detailed checklist containing screenshots, step-by-step instructions and links to articles

Do you want to set up Google Analytics 4 (GA4) fast and correctly?

Yes I want the ebook

Using CSS Selectors

Let us suppose you want to find all elements whose class is ‘intro’. You can do that by using the ‘.class’ CSS selector like the one below:

.intro

Here, ‘intro’ is the name of the class.

Let us suppose you want to find all elements whose class is ‘hero’. You can do that by using the ‘.class’ CSS selector like the one below:

.hero

Here, ‘hero’ is the name of the class.

Let us suppose you want to find all elements whose id is ‘aero1’. You can do that by using the ‘#id’ CSS selector like the one below:

#aero1

Here, ‘aero1’ is the id.

Let us suppose you want to find all elements whose id is ‘name’. You can do that by using the ‘#id’ CSS selector like the one below:

#name

Here, ‘name’ is the id.

Let us suppose you want to find all <h1> elements. You can do that by using the ‘element’ CSS selector like the one below:

h1

Here, ‘h1’ is the name of the element

Let us suppose you want to find all <a> elements. You can do that by using the ‘element’ CSS selector like the one below:

a

Here, ‘a’ is the name of the element

Let us suppose you want to find all <h1> and <a> elements. You can do that by using the ‘element,element’ CSS selector like the one below:

h1,a

Let us suppose you want to find all <p> elements inside <div> elements. You can do that by using the ‘element element’ CSS selector like the one below:

div p

Notice the white space between ‘div’ and ‘p’

For a full list of CSS selectors, refer to this document: https://www.w3schools.com/cssref/css_selectors.asp

The CSS Selector Tester Tool

Use the CSS Selector Tester tool to better understand, exactly which element is selected when you use a particular CSS selector.

Following is a screenshot of the CSS selector tester tool being used:

css selector tester tool

Creating Google Tag Manager CSS selectors

After using CSS selectors for a while, you will soon realize the creating CSS selectors is not that easy.

In fact, you should not waste your time manually creating CSS selectors. Just develop a basic understanding of CSS selectors and then use a tool that makes creating CSS selector easy.

I use a chrome extension called ‘SelectorGadget‘ for creating CSS selectors.

Following is a short video training on using the ‘SelectorGadget’ bookmarklet. You can use the same training to use the SelectorGadget’ Chrome extension:

Once you have created the required CSS selector then use it in your GTM trigger and test it:

Google Tag Manager CSS selectors

Register for the FREE TRAINING...

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."



Here’s what we’re going to cover in this training…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

​#5 The number 1 reason why conversion optimization is not working for your business.

​#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.



   

My best selling books on Digital Analytics and Conversion Optimization

Maths and Stats for Web Analytics and Conversion Optimization Master the Essentials of Email Marketing Analytics Attribution Modelling in Google Analytics and Beyond Attribution Modelling in Google Ads and Facebook

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

About the Author

Himanshu Sharma

  • Founder, OptimizeSmart.com
  • Over 15 years of experience in digital analytics and marketing
  • Author of four best-selling books on digital analytics and conversion optimization
  • Nominated for Digital Analytics Association Awards for Excellence
  • Runs one of the most popular blogs in the world on digital analytics
  • Consultant to countless small and big businesses over the decade

Get My Step-By-Step Blueprint For Finding The Best KPIs (32 pages ebook)

Download the FREE ebook
X
error: Alert: Content is protected !!