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:
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:
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 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:
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 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’.
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.
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.
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:
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 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:
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
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)
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.