Google Analytics snippets

This page stems from my page on Search Engine Optimisation - from SEO it is only a short hop to Google Analytics. It looks at Google Analytics from the web page perspective - ie, the scripts that webmasters include on their web pages that enable the Google Analytics servers to track how visitors interact with web pages, where they have come from, how they got to the site, and so on.

The short scripts that are put onto webpages are referred to as snippets by Google - their basic function is to identify the owner of the web page, and to request that the server sends the script that actually does the tracking to the user`s computer.

This webpage was intended just to be about Google Analytics and their scripts, however I ended up doing quite a lot of digging into JavaScript as well, because Google uses code in the snippets that I didn`t understand. I still haven`t worked it all out.

urchin.js

As far as I know, Google Analytics started around 2005, when Google acquired Urchin, a software company that designed website user tracking systems.

Google continued with the JavaScript script called "urchin.js", which resides on the Google servers, webmasters added a second small JavaScript script onto their web pages - ie, the snippet - this script calls urchin.js into action, it is downloaded into the browser cache in the user`s computer, from where it does its job.

Here is typical snippet for urchin.js - it is actually two seperate scripts. The first script advises the source of the urchin.js script, the second script is used to identify the owner of the webpage, who will have the account name of #####-#


     <script  src="http://www.google-analytics.com/urchin.js" type="text/javascript">

     </script>

 
     <script type="text/javascript">

     try {
     _uacct = "UA-#####-#";
     urchinTracker();
     } catch(err) {}

     </script>

ga.js

Around 2007, Google added a new tracking script, called "ga.js" - it is somewhat shorter than urchin.js, so downloads faster, but it can do more types of tracking than urchin.js.

Urchin.js still works, and can still be used, however Google recommend that webmasters upgrade to ga.js.

The use of ga.js requires a different JavaScript snippet on the webpage - here is a typical replacement script, and one of the things to note is that this snippet takes account of whether the web page is being downloaded from the web server using HTTP, or using HTTPS.

This script should be placed on the web page down at the bottom - immediately before the </body> tag, so that any delays in downloading ga.js should not affect the load time of the web page. This snippet actually contains two seperate JavaScripts.


     <script type="text/javascript">

     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
     document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

     </script>


     
     <script type="text/javascript">

     try{
     var pageTracker = _gat._getTracker("UA-xxxxxx-x");
     pageTracker._trackPageview();
     } catch(err) {}

     </script>

It is the first script of four lines that decides if the browser is connecting using http or https -

Expanding the JavaScript in these lines, line 2 declares a variable called gaJsHost, and uses a conditional operator to decide what string to put into the variable.

If the browser object "document.location.protocol" contains the text "https", then the string "https://ssl" is put into the variable "gaJsHost" - if the browser object contains some other text, then the string "http://www" is put into the variable "gaJsHost".

In the third line, the JavaScript object method "document.write" assembles the full URL and delivers it to the browser, for the browser to act on.

So the final output looks like


     <script src='http://www.google-analytics.com/ga.js' type='text/javascript'></script>

or


     <script src='https://ssl.google-analytics.com/ga.js' type='text/javascript'></script>

depending on the protocol being used - ie, http or https

This means that the same script can be used on all pages, whether they are for delivery via http or via https, and it also means that the browser will continue to use the same protocol as used for the rest of the page.

The escape characters of %3C and %3E are used instead of the chevrons - I think this might be for compatibility with PHP, but I`m not sure.

I have seen reference on the internet to the fact that html code delivered via the JavaScript document.write object method is not compatible with XML, and so is not compatible with web pages with an XHTML document type declaration. So the use of these escape characters may have something to do with that as well.

The normal html escape characters for the two chevrons are of course < and >.

ga.ja - asynchronous

Recently Google has added another snippet for running ga.js, which they refer to as an asynchronous version - here is a sample of this script -


     <script type="text/javascript">

     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-XXXXX-X']);
     _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>

It looks as if this snippet is now the default for new accounts with Google Analytics.

The snippet uses a technique which can be descibed as a self-running nameless function, which has the basic construction of


     (function() {        })();

The function runs once when the script is read by the browser, producing the result required by the code within the { } brackets, just as in a normal function. Any variables created within the function are used by the function, and then discarded.

Strictly speaking, the outer parenthesis isn`t always required in a self-running nameless function, so this would also work in some cases.


     function() {        }();

However it is regarded as good practice to include the parenthesis, to distinguish the function from a more normal function. It is the last () that calls the function to run.

This snippet doesn`t use the "document.write" object method to create the <script> tag and the URL enclosed by the tag, it uses "document.createElement" instead.

This snippet uses the same conditional operator as the previous script to detect whether the browser is using HTTP or HTTPS.

Google say that this snippet should be placed just before the </head> tag, rather than before the </body> tag, so it runs before the web page is loaded into the browser window.

However I have seen reference on the internet that this snippet can cause problems in Internet Explorer 6 and 7, if the snippet is placed within the <head> - some people advise that it should be placed immediately after the <body> tag.

My view of this would be that the snippet should be placed at the end of the <body> section, just before the closing </body> tag, just like the older snippets. If it is placed in the <head> section, then the script will run before the web page has been downloaded, and this will delay the downloading and display of the web page. Many web surfers have a low tolerance to delays in displaying web pages - if there are any delays in displaying the web page, there is a good chance that the surfers will not wait, and will go elsewhere. Collecting data can wait until the surfers are engrossed in the web page.

website design by ron-t

website hosting by freevirtualservers.com

+ +