Advanced Google Analytics Tracking – HTML DOM – Tutorial

Have you ever wondered how tracking is actually implemented on a website?

How you can actually track downloads, form field abandonment, videos and almost anything in Google Analytics?

Sure, many bloggers will tell you that they can, by providing a bunch of code like the one below:

_gaq.push ([‘_trackEvent’,’guides’,’download-seo’,’seo-beginners-guide.pdf’,10, true]);

Or something more complicated like the one below:

<script type='text/javascript'>
if(typeofjQuery != 'undefined') {
varfiletypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i;
varbaseHref = '';
if(jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
varhrefRedirect = '';
.
.
}
</script>

But they are not going to tell you how to implement this code on your website.

These few lines of code are absolutely useless for you if you don’t have the basic knowledge of HTML, JavaScript and DOM.

Without such knowledge, you will have a hard time understanding, how to use this code on your website or how to customize it so that it can meet your requirements.

I won’t be teaching the basics of HTML, JavaScript or JQuery here.

What I will explain about, is known as DOM, a set of programming interfaces that will make it is easy for you to track almost anything in Google Analytics.

As long as you have a basic understanding of HTML, this article should not be hard to understand.

Table of Contents

What is HTML DOM?

DOM stands for ‘Document Object Model’.

DOM is a set of programming interfaces and objects designed for managing HTML and XML documents. It defines the logical structure of a document and the way document elements can be accessed and changed.

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>

The following would be the DOM representation of this HTML document:

As mentioned before DOM defines the logical structure of a document, in this particular case HTML document.

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

Each HTML objects has got properties and methods (more about this later) except text nodes (‘hello world’, ’I am learning to code’ etc. are all text nodes). As long as you are aware of this structure, you can easily access and track any HTML object.

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

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

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

Note: DOM can be used with any programming language.

The following chart describes Core DOM which you must understand and memorize so that you can use it to easily track any object in HTML, JavaScript or any other code:

Here ‘Navigator’, ‘window’, ‘screen’, ‘history’, ‘location’, ‘document’, ‘element’, ‘events’, ‘HTML’, ‘XML’ etc are all objects.

Just like any object, each one of them has got its own properties and attributes.

Property is the attribute of an object.

In case of HTML DOM, property is an attribute of HTML element.

For example in the code below:

<a id="nerd" href="https://www.optimizesmart.com" target="_blank" title="click here for more details" class="rocky">Visit SEOTakeaways.com</a>

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

The values of the attributes are: ‘nerd’, ‘https://www.optimizesmart.com’,’_blank’, ‘click here for more details’ and ‘rocky’.

So the value of the attribute ‘id’ is ‘nerd’.

Similarly, the value of the attribute ‘href’ is ‘https://www.optimizesmart.com’.

Method is a function (usually a JavaScript code) that is executed in response to an event and is handled by what is called as ‘event handler’ (or event listener).

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=”giveMeaBreak()”>Visit SEOTakeaways.com</a>

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

I can define this method in JavaScript as:

<script>
function giveMeaBreak()
{
_gaq.push ([‘_trackEvent’,’activity’,’give me a break’]);
}
</script>

Or if am using Universal Analytics, I can define the same method as:

<script>
function giveMeaBreak()
{
ga(‘send’, ‘event’, ‘activity’, ‘give me a break’]);
}
</script>

Since this method contains only a single line of code, I can easily define and call this method within <a> element like this:

<a id="nerd" href="https://www.optimizesmart.com" target="_blank" title="”click here for more details" class="rocky" 
onclick=”ga(‘send’, ‘event’, ‘activity’, ‘give me a break’]);”>Visit SEOTakeaways.com</a>

Many of you are familiar with this way of calling a method within an HTML element.

But if your method contains several lines of code then it is best that you define it somewhere else in the source code within <script> </script>like this:

<script>
function giveMeaBreak()
{
x=document.getElementById("nerd").text;
y=document.getElementById("nerd").href;
_gaq.push(['_trackEvent',x,y]);
}
</script>

And then call it within your HTML tag like this:

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

Following is the syntax of a JavaScript function:

<script>
function functionName(parameters)
{
Some JavaScript code;
}
</script>

Syntax means spelling and grammar of a programming language.

Every programming language has got its own unique syntax in the same way every language has got its own unique grammar. You need to follow the rules of grammar, in order to speak/write correctly. Similarly, you need to follow the syntax, in order to code correctly.

A JavaScript function is simply a block of code which is defined/created so that it can be easily reused.

We use the keyword called ‘function’ to define a method. This keyword is followed by the method name and parentheses ‘()’. After this, we have got the opening curly bracket ‘{‘ followed by a block of code and then the closing curly bracket ‘}’.

For example:

<script>
function giveMeaBreak()
{
x=document.getElementById("nerd").text;
y=document.getElementById("nerd").href;
_gaq.push(['_trackEvent',x,y]);
}
</script>

Here the name of my function is ‘giveMeaBreak’.

Following is the body of the function (block of JavaScript code) which is made up of 3 statements:

x=document.getElementById("nerd").text;

y=document.getElementById("nerd").href;

_gaq.push(['_trackEvent',x,y]);

Note: each statement in Javascript is separated by a semicolon ‘;’

A JavaScript function does not execute on its own. You need to call it first before it can be executed. You can call a JavaScript function by its name followed by parentheses.

For example: ‘giveMeaBreak()’ will call the JavaScript function named ‘giveMeaBreak’.

When you call the function, all the code stored in that function is automatically executed.

To learn more about JavaScript Functions, read this article: http://www.w3schools.com/js/js_functions.asp

Once you understand the basics of how attributes and methods work, you can execute any tracking code whenever an event occurs (like clicking on a button, downloading a document, loading of a page etc).

Accessing and modifying various objects of HTML DOM

Let us suppose you want to retrieve the ‘href’ attribute of the anchor element (<a>) as shown above.

Now if you look at the DOM representation above, you can see that you need to follow the path below in order to reach the ‘href’ attribute of the anchor element (<a>):

Window > Document > Elements > HTML > Body > a > href

The HTML DOM equivalent of the above path will be:

window.document.getElementById("nerd").href

Here,

window.document.getElementById(“nerd”) refers to a particular HTML element whose ‘id’ is ‘nerd’.

window.document.getElementById(“nerd”).href refers to a particular HTML element whose ‘id’ is ‘nerd’ and the attribute is ‘href’.

Generally, the ‘window’ object is not specified, so

document.getElementById(“nerd”).href is same as window.document.getElementById(“nerd”).href

Similarly, if you want to retrieve the ‘class’ attribute of the anchor element (<a>) then you need to follow the path below in order to reach the ‘class’ attribute:

Window > Document > Elements > HTML > Body > a > class

The HTML DOM equivalent of the above path will be:

document.getElementById("nerd").getAttribute("class")

Here I did not use, document.getElementById(“nerd”).class because document.getElementById() object does not have any attribute called ‘class’. So I have to use a method called ‘getAttributte() to retrieve the value of the class attribute.

Note: You either need to remember or refer to the documentation at http://www.w3schools.com/jsref/ often to use correct property and method for a particular object.

Now let us see how we can use this knowledge in Google Analytics.

Consider the following code which has been created to track the email address and the name of the person who was emailed in Google Analytics via event tracking:

<a id ="nerd" href="mailto:[email protected]" target="_blank" onClick="giveMeaBreak()">email to Chris</a>

Here the method ‘giveMeaBreak()’ will retrieve ‘href’ attribute of the anchor element ‘<a>’ and also retrieve the anchor text. Then the code will send the data to Google Analytics as an event category and event action:

<script>
function giveMeaBreak()
{
x=document.getElementById("nerd").text;
y=document.getElementById("nerd").href;
_gaq.push(['_trackEvent',x,y]);
}
</script>

Here is how the output will look like in Google Analytics:

This is just a small example of what you can do if you understand the HTML DOM.

Understanding the main objects of Core DOM

Following are the main objects of Core DOM:

Navigator
Window
Screen
History
Location
Document
Element
Events

Navigator Object

This object provides information about the current browser. Like any other object, it has got its own properties and methods.

Syntax:

navigator.propertyName

navigator.methodName()

Example -1

navigator.cookieEnabled – specifies whether cookies are enabled in a browser. It returns “true” if enabled, “false” if not.

Here ‘cookieEnabled’ is one of the properties of the ‘Navigator’ object.

Now let us see how we can use this knowledge in Universal Analytics.

Following code checks, whether a cookie is enabled in a browser and sends ‘true’ or ‘false’ value via event tracking in Universal Analytics:

<script>
function cookieStatus()
{
var y = "Cookies Enabled: " + navigator.cookieEnabled;
ga(‘send’, ‘event’, 'browsers',y]);
}
</script>
</head>
<body onload="cookieStatus()">
...

</body>

Here is how the output will look like in Universal Analytics:

Example -2

navigator.javaEnabled() – specifies whether the browser has Java enabled. It returns “true” if enabled, “false” if not.

Here ‘navigator.javaEnabled()’ is one of the methods of the ‘Navigator’ object.

Following code checks, whether java is enabled in a browser and sends ‘true’ or ‘false’ value via event tracking in Google Analytics:

<script>
function javaEnabled()
{
var y = "Java Enabled: " + navigator.javaEnabled();
_gaq.push(['_trackEvent','browsers',y]);
}
</script>
</head>
<body onload="javaEnabled()">
...
</body>

Here is how the output will look like in Google Analytics:

You can get a complete list of navigator object’s properties and methods from here: http://www.w3schools.com/jsref/obj_navigator.asp

Window Object

This object represents an open window in a browser. Like any other object, it has got properties and methods.

Syntax:

window.propertyName

window.methodName()

Example -1

window.closed – returns “true” if the window has been closed or “false” if the window is open

Here ‘window.closed’ is one of the property of ‘window’ object.

Following code checks whether a window is closed and sends ‘true’ or ‘false’ value via event tracking in Google Analytics:

<body>
<script>
function windowStatus()
{
window.open("https://www.optimizesmart.com"); //open a new window
var z = "Window Status:" + window.closed;
_gaq.push(['_trackEvent','Windows',z]);
}
</script>
<button onClick="windowStatus()">Open Window</button>
</body>

Here is how the output will look like in Google Analytics:

Example -2

window.confirm() – displays a dialog box with a specified message, along with an OK and a cancel button. It returns ‘true’ if user clicks ‘ok’ and ‘false’ if the user clicks ‘cancel’

Here ‘window.confirm()’ is one of the methods of ‘window’ object.

Following code checks whether a user clicks on the ‘ok’ or ‘cancel’ button and then sends ‘true’ or ‘false’ value via event tracking in Google Analytics:

<body>
<script>
function windowStatus()
{
window.confirm("Did you Check SEO Takeaways?");
var z = "Window Status:" + window.confirm();
_gaq.push(['_trackEvent','Windows',z]);
}
</script>
<button onClick="windowStatus()">Open Window</button>
</body>

You can get a complete list of window object’s properties and methods from here: http://www.w3schools.com/jsref/obj_window.asp

You should now have a good idea of how you can use the properties and methods of other Core DOM objects. For a complete list of Core DOM object’s properties and methods click here: http://www.w3schools.com/jsref/

Understanding the main objects of HTML DOM

Following are the main objects of HTML DOM:

<a>
<button>
<form>
<input>
<table>
<textarea>
<video>

Once you understand these HTML DOM objects like <form> object, you can create your own code to track form fields’ abandonment or form submission. No need to rely on someone else code.

You can get a complete list of HTML DOM object’s properties and methods from here: http://www.w3schools.com/jsref/

Just like any other object, each HTML DOM object has got its own attributes and methods. I have already explained above how you can access the attributes of an HTML DOM object like <a>.

You need to explore attributes and methods of other HTML DOM objects on your own as they are simply too many to even list here, let alone explain them one by one.

Event Handler

Some nerds called it ‘event listener’ (I prefer ‘event handler’) and is used to execute a method in response to an event. This event can be a:

Mouse Event
Keyboard Event
Frame Event
Form Event

Consequently, we can have:

Mouse event handlers
Keyboard event handlers
Frame event handlers
Form event handlers

Note: You can add event handlers inside an HTML element. But you can’t add event handler within script tags (<script>…..</script>)

Mouse event handlers

Following are the most common mouse event handlers:

onclick – executes a method in response to a click on a visible on-page element.
Example: <button onclick=”someFunction()”>Click me</button>
ondblclick – executes a method in response to double click on an visible on-page element.
Example: <p ondblclick=”someFunction()”>Click twice and get surprise</p>
onmouseover – executes a method when the mouse move over a visible on-page element.
Example: <a href=”https://www.optimizesmart.com/” onmouseover=”someFunction()”>Visit SEOTakeaways</p>
onmouseout – executes a method when the mouse moves out of a visible on-page element.
Example: <img href=”https://www.example.com/img.gif” onmouseout=”someFunction()” />

Keyboard event handlers

I have not found any good use of keyboard event handlers. So it is not worth talking about. But if you are interested in learning about them, then check out this page: http://www.w3schools.com/jsref/dom_obj_event.asp

Frame event handlers

onLoad – execute a script after a page, frame or image has completely loaded.

Example:

<body onLoad="someFunction()" />

There are other frame event handlers but I have not found any good use of them. But if you are interested in learning about them, then check out this page: http://www.w3schools.com/jsref/dom_obj_event.asp

Form Event handlers

Form event handlers are one of the most useful event handlers for advanced tracking. Following are the most commonly used form event handlers:

onBlur – executes a script when a user navigates away from a form element without necessarily having changed its value.
Example: <input type=”text” id=”nerd” onblur=”someFunction()”>
onChange – executes a script only when a user has changed the value of a form element. Example: <input type=”text” id=”nerd2″ onchange=”someFunction()”>
onReset – executes a script when a form is reset. Example: <form onreset=”someFunction()”>
onSelect – executes a script when a input or textarea form element is selected. Example: Example: <input type=”text” onselect=”someFunction()”>
onSubmit – executes a script when a form is submitted. Example: <form onsubmit=”someFunction()”>

Note: You can capitalize event handlers any way you like. For example: onClick is same as onclick or ONCLICK.

I discussed mainly ‘onclick’ event handler throughout this article because it is so widely used. But as you can see there are dozen more event handlers you can use.

With so many objects, properties, methods and event handlers readily available, you can have countless permutations of them and that means countless possibilities to track different things in Google/Universal Analytics.

Together with the knowledge of DOM objects and Measurement Protocol, you can track almost anything which can be connected to the internet.

#1 GA4 Introduction

#2 GA4 Property

#3 GA4 Integrations

#4 GA4 Events

#5 GA4 Key Events (Conversions)

#6 GA4 Dimensions

#7 GA4 Metrics

#8 GA4 Ecommerce

#9 GA4 Specialized Tracking

#10 GA4 filters

#11 GA4 Explorations

#12 GA4 Advanced

#13 GA4 Troubleshooting

#14 GA4 Reports

#15 GA4 Attribution

#16 GA4 Audiences

#17 Google Tag

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.

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.

Advanced Google Analytics Tracking – HTML DOM – Tutorial

What is HTML DOM?

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

Accessing and modifying various objects of HTML DOM

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

Do you want expert help in setting up/fixing GA4 and GTM?

Understanding the main objects of Core DOM

Navigator Object

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

Window Object

Get the only ebook on GA4 BigQuery ever published (83 Pages)

Understanding the main objects of HTML DOM

Event Handler

Mouse event handlers

Query GA4 BigQuery Data via ChatGPT (73 Pages)

Keyboard event handlers

Frame event handlers

Form Event handlers

My best selling books on Digital Analytics and Conversion Optimization

About the Author

Himanshu Sharma

Advanced Google Analytics Tracking – HTML DOM – Tutorial

What is HTML DOM?

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

Accessing and modifying various objects of HTML DOM

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

Do you want expert help in setting up/fixing GA4 and GTM?

Understanding the main objects of Core DOM

Navigator Object

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

Window Object

Get the only ebook on GA4 BigQuery ever published (83 Pages)

Understanding the main objects of HTML DOM

Event Handler

Mouse event handlers

Query GA4 BigQuery Data via ChatGPT (73 Pages)

Keyboard event handlers

Frame event handlers

Form Event handlers

Other articles related to GA4 (Google Analytics 4)

#1 GA4 Introduction

#2 GA4 Property

#3 GA4 Integrations

#4 GA4 Events

#5 GA4 Key Events (Conversions)

#6 GA4 Dimensions

#7 GA4 Metrics

#8 GA4 Ecommerce

#9 GA4 Specialized Tracking

#10 GA4 filters

#11 GA4 Explorations

#12 GA4 Advanced

#13 GA4 Troubleshooting

#14 GA4 Reports

#15 GA4 Attribution

#16 GA4 Audiences

#17 Google Tag

My best selling books on Digital Analytics and Conversion Optimization

About the Author

Himanshu Sharma