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

You could use this snippet from HTML5 Boilerplate.

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>