Async Google Analytics

By  on  

It seems like every website these days uses Google Analytics. And why not? It's an outstanding tool that gives you any and every statistic you could ever want. The problem with Google Analytics is that it's been, well, slow loading at times. That's why I was so pumped when I saw Google was releasing an async version of their script.

Google Analytics JavaScript

<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-#######-#']); //your code here
	_gaq.push(['_trackPageview']);
</script>
<script type="text/javascript">
(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';
	(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>

The one thing you'll notice is the async attribute being set to true. Obviously you'll want to use your own Analytics code within the top portion of the JavaScript. You'll also want to put this at the top of the BODY. What a difference the async version can make -- my website seems to load faster due to this upgrade!

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

  • By
    9 Incredible CodePen Demos

    CodePen is a treasure trove of incredible demos harnessing the power of client side languages.   The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do.  Thanks to CSS...

Discussion

  1. Champ

    Will this help me pick up women?

  2. You know what my sites do feel faster now! Thank you for bringing this to my attention :)

  3. Do NOT put this in the HEAD tag! That is idiocy. Trust me, I’m an idiot ;)

  4. Mike Vysocka

    David, using firstChild is unreliable… read comment #19 here: http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

    Further down the comment list, the GA team has posted an alternative solution.

  5. Yup Google saids: “While it is customary to place JavaScript code in the section, placing the asynchronous snippet there may trigger a parsing bug in Internet Explorer 6 and 7 on some pages. The easiest solution to this problem is to place it at the top of the section.”

  6. Changed to async about a week ago and noticed the improvements right away.
    My blog loads much faster now.

  7. Champ

    @Indrek: can you explain the difference in load times? does the load seem better now?

  8. Why are you suggesting this go at the BOTTOM of the body? If you want more accurate data, you need to put it at the top of the body like it says in the docs:

    http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

  9. Jason

    I am using Google Analytics to track my AJAX Aplications.
    I was using this code: … try{ pageTracker._trackPageview(pageFileName); …
    I want to use the Async Google Analytics. Is that the code: … try{_gaq.push([‘_trackPageview’,pageFileName]); … ?

  10. @Jason: Looks about right, but hard to tell without seeing all your code. You don’t have to wrap _gaq.push(…) calls in try blocks either. They won’t throw anything as long as _gaq is declared correctly.

  11. The new ASync code should be put at the top of the body.. why? Because with the old code visitors left the website before the script had finished loading, which caused the script not to track visitors that left before the site finished loading.

  12. @JP – On the other hand, perhaps they were leaving due to the content not loading fast enough. I’d say ecomm sales from people who stay are much better than more hits from people who don’t…

  13. Dave

    @Chris the Developer: But that’s the beauty of async analytics. It doesn’t block rendering so the user experience isn’t hurt.

  14. More in depth please! This could be huge news for all site owners.

  15. Mike

    Can I simply replace the old sync analytics code with this one and it just works?

  16. Hi All,

    Google has adapted its new script to accommodate all comments on the original new Async Script in the blogosphere ;-)

    Check out the current async version here (http://code.google.com/intl/nl/apis/analytics/docs/tracking/asyncTracking.html).

  17. Nice! I updated the ga code of MSU-IIT to this one, it really speed up the page loading… :D Thanks for the info!

  18. Why are they using <code<document.getElementsByTagName('body')[0] instead of document.body?

  19. Jason Dug

    Brilliant – wasn’t aware of this before. It has made a noticeable difference to page load times already. Great stuff.

  20. This treatment of tinnitus through homeopathy has been
    found to be very effective and people have got very good results with it.
    This will also regulate your blood pressure and thus prevent tinnitus from occurring.
    The most common cause of tinnitus is noise exposure, but
    tinnitus can also be caused by ear infections, wax build-up, poor circulation and old age.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!