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.
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.
Get the E-Book (50 Pages)
Get the FREE E-Book (50+ Pages)
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.
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 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.
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
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.
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.
Get the E-Book (50 Pages)
Get the FREE E-Book (50+ Pages)
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.
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 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.
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