Google Analytics Tracking Code Javascript

I was curious about how the javascript tracking code from Google Analytics that you’re supposed to put at the bottom of your web page. It allows Google to collect information about visitors to your site, but how does the Google tracking code work?

Tracking Code

Let’s first look at the javascript. This is the code for this blog:

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-2601463-2']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

The only unique bit of info in that script is the unique identifier for this site: UA-2601463-2 The rest of the code should be the same for everyone.*

Google Analytics Javascript

So let’s break the code up and analyze it:

var _gaq = _gaq || []; – This creates an array called _gaq and puts nothing in it.
_gaq.push([‘_setAccount’, ‘UA-2601463-2’]); – This adds an entry to the _gaq array called _setAccount with the value of UA-2601463-2.
_gaq.push([‘_trackPageview’]); – This adds an entry to _gaq called _trackPageview with no value.
(function() { – This launches a generic function or simple program.
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; – Let’s break this one up:
1. var ga = document.createElement(‘script’); – Creates a variable called ga and gives it the value of the <script> tag.
2. ga.type = ‘text/javascript’; – Adds the attribue type="text/javascript" to the tag.
3. ga.async = true; – Sets the whole script to asynchronous. This means it finishes it’s job after the page has finished loading. This increases the speed or load time of your page, improving the experience for your users.
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’; – This line of code figures out if the page it’s on is a http or a https page and then calls the ga.js script with the appropriate prefix. The complex information gathered by Google analytics is then gathered by the ga.js script.
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s); – This finishes the data gathering process by calling the __utm.gif file.

What is __utm.gif?

The Google analytics script cannot send the tracking information to Google. This would look like a trojan, worm spyware or other malware sending information to some server somewhere. To get around this the ga.js script puts an <img> tag that references the __utm.gif.

How is the data sent?

The ga.js script adds parameters to the __utm.gif file so the file for this site looks something like this:

https://ssl.google-analytics.com/__utm.gif?utmwv=5.3.8&utms=4&utmn=1494076704&utmhn=www.google.com&utmt=event&utme=5(inpage*page*first)8(Qua…

After the __utm.gif theres a ? and then any number of parameters added after a & for each. google-analytics.com then tracks what __utm.gif was asked for and stores the added data.

Google Tracking Javascript

It’s a clever bit of code to gather information about people visiting your site. If I missed any important nuances please post them in the comments below.

* Developers can make changes to the code to collect extra information, have the tracking behave in a specific way or omit information altogether. Learn more at the GA developers site.

Evan Davis