Introduction to DOM, Nodes & CSS Selectors for Google Tag Manager
Table of Contents
- Introduction to DOM and Nodes
- Relationship between Nodes
- Attributes and Methods of Elements
- Introduction to CSS and CSS Selector
- CSS Selectors Vs. Regular Expressions Vs. Xpath
- Difference between CSS Selectors and Xpath Selectors
- Using CSS Selectors
- The CSS Selector Tester Tool
- Creating CSS Selectors
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 a 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:
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:
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 very limited benefit of using Google Tag Manager, if you choose not to learn about HTML DOM, Nodes and CSS selectors.
Get the E-Book (62 Pages)
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:
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 example 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:
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:
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 objects (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 Selector
Cascading Style Sheet or CSS is a stylesheet language which 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 certain font.
A CSS Selector is an expression which 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 which 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 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.
Following could be 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 a 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.
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 slectors, 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:
Creating CSS Selectors
After using CSS selectors for a while, you will soon realise the creating CSS selectors is not that easy.
In fact you should not waste your time in manually creating CSS selectors.
Just develop a basic understanding of CSS selectors and then use a tool which makes creating CSS selector easy.
I use a chrome extension called ‘SelectorGadget‘ for creating CSS selectors.
Following is a short video training on using ‘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:
Most Popular E-Books from OptimizeSmart
- Introduction to DOM and Nodes
- Relationship between Nodes
- Attributes and Methods of Elements
- Introduction to CSS and CSS Selector
- CSS Selectors Vs. Regular Expressions Vs. Xpath
- Difference between CSS Selectors and Xpath Selectors
- Using CSS Selectors
- The CSS Selector Tester Tool
- Creating CSS Selectors
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 a 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:
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:
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 very limited benefit of using Google Tag Manager, if you choose not to learn about HTML DOM, Nodes and CSS selectors.
Get the E-Book (62 Pages)
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:
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 example 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:
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:
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 objects (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 Selector
Cascading Style Sheet or CSS is a stylesheet language which 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 certain font.
A CSS Selector is an expression which 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 which 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 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.
Following could be 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 a 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.
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 slectors, 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:
Creating CSS Selectors
After using CSS selectors for a while, you will soon realise the creating CSS selectors is not that easy.
In fact you should not waste your time in manually creating CSS selectors.
Just develop a basic understanding of CSS selectors and then use a tool which makes creating CSS selector easy.
I use a chrome extension called ‘SelectorGadget‘ for creating CSS selectors.
Following is a short video training on using ‘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:
How to learn and master Web Analytics and Google Analytics?
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
