Introduction to DOM, Nodes & CSS Selectors for Google Tag Manager

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 trackingecommerce 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 trackingecommerce 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.

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:

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:

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:

Announcement about my books

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 Beyond
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.

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 eleven 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 three books:

error: Content is protected !!