Analytics Market Chart

JavaScript Basics in Google Analytics


Google Analytics relies heavily on JavaScript. Well, actually, it's almost entirely JavaScript. "Relies heavily" is probably an understatement.

Sure, the Google Analytics tracking code can just be copied and pasted into each page on a website. You could go the easy way out. But what if you want to get into more advanced features? What if you want to track file downloads? Or what if you just wanted to really screw up your tracking code? Well, you would need to know some basics about how JavaScript works.

Tied to the Browser

JavaScript is client-side script. That means that instead of being executed by the server when a page is requested, it is executed by each visitor's browser. This has several important implications.

Being tied to the browser means that different browsers may interpret it a little bit differently. Internet Explorer, for example, is notorious for having its own unique set of rules and standards for JavaScript. It also means that different browsers may send slightly different information under similar conditions. (More noticeable in reporting traffic sources. Use campaign variables to get around that.)

JavaScript is also relatively blind. It can only see what your browser sees or what it is told. For example, it can see your screen resolution and what's in your address bar. But, when tracking e-commerce in Google Analytics, you have to dynamically feed the JavaScript all of the transaction values.

Java Script is also able to create and read cookies stored on the browser. Security precautions don't allow JavaScript on one domain to read cookies set by another domain, though.

Being browser-dependent, JavaScript can be turned off by visitors. There are a number of ways that more technically savvy visitors can manipulate JavaScript.

Widely Used

Because it is lightweight and flexible, JavaScript is increasingly used as part of Web 2.0 applications. Since JavaScript doesn't have to communicate with the servers, it can add a layer of interactivity to a site without requiring page refreshes.

All of this means that visitors who do opt to turn off JavaScript altogether have a very limited browsing experience. Some websites require JavaScript to be enabled in order to function correctly.

Furthermore, browsers expect to see JavaScript in a web page. HTML has built-in hooks specifically meant for JavaScript. These include the onclick event, which will execute JavaScript whenever the tagged element is clicked. Similarly, the onload, onmouseover, onsubmit and onblur events are all designed to execute JavaScript events. Typically browsers can execute JavaScript no matter where on a page it's placed.

Technicalities

If you are going to modify the Google Analytics tracking code or try to add any dynamic functionality, there are a few technical points that you need to understand.

First, JavaScript is executed with the HTML from top to bottom in a page. JavaScript placed in the top of a file will be executed before the HTML at the bottom of the file. If JavaScript errors or hangs, anything after it either won't execute at all or will be delayed. This affects visitor experience. This is why Google recommends placing the tracking code at the very bottom of the body of the page.

If you want to execute JavaScript on a page, it either needs to be included in an event attribute, like onclick, or it needs to be in a script block.

As for syntax, JavaScript is relatively fuzzy. It is case-sensitive, but semicolons at the end of each line are optional. Also, variables are loosely typed.

JavaScript is object-oriented, which is especially pertinent with ga.js, the newer version of the tracking code, because it defines an object at the outset. By default, it names this object 'pageTracker', but you can easily change this to whatever you want. Whatever its name, this object has a set of predefined methods that can be called, and these all need to be appended to the object.

For example, at the very end of the standard tracking code, the _trackPageview() method is called. This is appended to the pageTracker object by adding a period, so it looks like pageTracker._trackPageview(). There are a few dozen other methods defined in ga.js, and they are all called in the same way.

Without going into volumes of detail, this JavaScript primer provides enough of a foundation (or a quick reminder) to allow you to make customizations to the tracking code and get thoroughly lost.