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:

Or something more complicated like the one below:

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 which 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 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:

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

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.

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> 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:

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

I can define this method in JavaScript as:

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

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

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:

And then call it within your HTML tag like this:

Following is the syntax of a JavaScript function:

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 the 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:

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:

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

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 to 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:

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 ‘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 to the ‘class’ attribute:

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

The HTML DOM equivalent of the above path will be:

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 email address and the name of the person who was emailed in Google Analytics via event tracking:

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 event category and event action:

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:

1. Navigator
2. Window
3. Screen
4. History
5. Location
6. Document
7. Element
8. 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 property of ‘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:

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 method of ‘Navigator’ object.

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

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 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:

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 method 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:

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:

1. <a>
2. <button>
3. <form>
4. <input>
5. <table>
6. <textarea>
7. <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:

1. Mouse Event
2. Keyboard Event
3. Frame Event
4. Form Event

Consequently we can have:

1. Mouse event handlers
2. Keyboard event handlers
3. Frame event handlers
4. Form event handlers

Note: You can add event handlers inside a 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:

1. onclick – executes a method in response to a click on an visible on-page element.
   Example: <button onclick=”someFunction()”>Click me</button>
2. 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>
3. 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>
4. 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:

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:

1. 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()”>
2. onChange – executes a script only when a user has changed the value of a form element. Example: <input type=”text” id=”nerd2″ onchange=”someFunction()”>
3. onReset – executes a script when a form is reset. Example: <form onreset=”someFunction()”>
4. onSelect – executes a script when a input or textarea form element is selected. Example: Example: <input type=”text” onselect=”someFunction()”>
5. 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.