How do I dynamically load Google Analytics JavaScript?

Question

Without using any other JS frameworks (dojo, jquery, etc), how would I dynamically load Google Analytic's javascript to be used on a web page for web-tracking?

The typical appropriate to dynamically loading JS is to do the following:

var gaJs = document.createElement("script");
gaJs.type = "text/javascript";
gaJs.src = "http://www.google-analytics.com/ga.js";
document.body.appendChild(gaJs);
var pageTracker = _gat._getTracker("UA-XXXXXXXXX");
pageTracker._initData();
pageTracker._trackPageview();

But that doesn't work.

The ga.js file isn't loaded in time for _gat._getTracker & _initData/TrackPageview to function.

Any ideas on how to properly dynamically load ga.js.

UPDATE: Seems like someone has attempted to address this problem at the following link. However, it's for use with the old Urchin code and not Google Analytics.

Any ideas on how to get this to work with ga.js instead of urchin.js?

http://20y.hu/20070805/loading-google-analytics-dynamically-on-document-load.html

Answer 1

This looks like it accomplishes what you are trying to do.

Answer 2

Server side programming would be easier I guess, but I found this some time ago. Notice that it specifically sets it to the html head.

Also check on the first link down on 'Adding Javascript Through Ajax'.

Answer 3

This Better Google Analytics JavaScript that doesn’t block page downloading post details how you should be able to get this working with ga.js.

UPDATE: Google now provide a JavaScript snippet for loading the analytics code asynchronously.

Answer 4

Try using the exact JavaScript code provided by Google and then conditionally display that section of code based on a construct in your UI framework. You didn't say what platform this is running on, if it's ASP.NET you could put the code in a PlaceHolder or UserControl and then set Visible to true or false based on a config file setting if the script should be included. I've used this approach on multiple sites to prevent the Analytics script from being included in pre-production environments.

Answer 5

function loadGA()
{
    if(typeof _gat == 'function') //already loaded
    {
     //innitGA();
     // you may want the above line uncommented.. 
     // I'm presuming that if the _gat object is there
     // you wouldn't want to.
     return;
    }
    var hostname = 'google-analytics.com';
    var protocol = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', protocol+hostname+'/ga.js');
    document.body.appendChild(js);
    //2 methods to detect the load of ga.js
    //some browsers use both, however
    loaded = false; // so use a boolean
    js.onreadystatechange = function () {
     if (js.readyState == 'loaded') 
     { 
      if(!loaded)
      {
       innitGA();
      }
      loaded = true;
     }
    };
    js.onload = function () 
    {
     if(!loaded)
     {   
      innitGA();
     }
     loaded = true;
    };
}

function innitGA()
{
    //var pageTracker = _gat._getTracker('GA_ACCOUNT/PROFILE_ID');
    //pageTracker._initData();
    //pageTracker._trackPageview();
    alert('oh hai I can watch plz?');
}

just call loadGA()... tested on IE6/7/8, FF3, Chrome and Opera

sorry if I'm a bit late to this party.