Asynchronous Tracking with Google Analytics

Today we’re excited to announce our new Google Analytics Asynchronous Tracking Code snippet as an alternative way to track your websites! It provides the following benefits:

• Faster tracking code load times for your web pages due to improved browser execution
• Enhanced data collection & accuracy
• Elimination of tracking errors from dependencies when the JavaScript hasn’t fully loaded

Here is the JavaScript source of the new tracking snippet:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
        'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();
</script>

The first part of the asynchronous tracking code snippet assigns the _gaq variable to a JavaScript array. After that, two tracking API calls (encoded as arrays) are pushed onto _gaq. When the tracking code initializes, it transforms the _gaq object from a standard array into a new object and executes all the tracking API calls initially collected in the array. With this feature, you can immediately store all necessary tracking calls even before the Google Analytics tracking code is downloaded! No more worrying about race conditions or dependency issues on the ga.js tracking code.

The second half of the snippet provides the logic that loads the tracking code in parallel with other scripts on the page. It executes an anonymous function that dynamically creates a <script> element and sets the source with the proper protocol. As a result, most browsers will load the tracking code in parallel with other scripts on the page, thus reducing the web page load time. Note here the forward-looking use of the new HTML5 “async” attribute in this part of the snippet. While it creates the same effect as adding a <script> element to the DOM, it officially tells browsers that this script can be loaded asynchronously. Firefox 3.6 is the first browser to officially offer support for this new feature. If you’re curious, here are more details on the official HTML5 async specification.

Once loaded, the tracking code, transforms the _gaq array into an Analytics _gaq object. This object acts as a wrapper for the underlying _gat object and executes all the commands, sending data to your Google Analytics account. Your page code can ignore this fact though, because the _gaq.push syntax can be used at any time. See the Asynchronous Tracking Usage Guide for more details.

The new tracking code is now in Beta and available to all Google Analytics users. Keep in mind that use of the code is also optional: all your existing Google Analytics code will continue to work as-is should you decide not to adopt the new tracking method. But if you want to improve the speed of your website and the increase accuracy of your Analytics data, then we think you’ll love this new option.

Learn more about this new tracking code in our Google Code developer docs and get started with our migration guide.

Related posts:

1. Google Analytics Basics: Finding your tracking code Another great video by the Google Analytics team. Learn some...
2. Tracking events using Advanced Segments in Google Analytics Learn how to use the Advanced Segmentation feature in Google...
3. Google Analytics introduces new goals We all know that it’s critical to measure conversions, or...
4. New Google Analytics feature: Analytics Intelligence How would you like to have 24-hour a day access...
5. Steps to using the Google Analytics API After the video where the Google Analytics API is explained,...

Related posts brought to you by Yet Another Related Posts Plugin.