Monday, February 1, 2010

Asynchronous Tracking

Asynchronous Tracking is an alternative way to track website visitors with Google Analytics. Unlike a traditional installation, asynchronous tracking optimizes how browsers load ga.js so its impact on user experience is minimized. It also allows you to put your Analytics snippet higher in the page without delaying subsequent content from rendering. The Asynchronous Tracking requires a different Analytics snippet and a different syntax for making tracking API calls.

The Snippet

The Analytics snippet is a small piece of JavaScript code that you paste into your pages. It activates Google Analytics tracking by inserting ga.js into the page, which in turn provides an API for customizing how your page is tracked. The following snippet represents the minimum configuration needed to track a page asynchronously. It specifies the page's web property ID and then calls _trackPageview to send the tracking data back to the Google Analytics servers.

 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';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();

To use this on your pages, copy the code snippet above, replacing UA-XXXXX-X with your web property ID. If you need to do more than basic page tracking, see the tracking reference for a list of methods available in the API and see the usage guide for details on using the asynchronous syntax.

Important: If you want to use the asynchronous snippet, you should remove the existing tracking snippet first. We do not recommend using both snippets together on the same page.

Installation Instructions

This section covers the installation of the asynchronous snippet on pages that either don't currently use Google Analytics or are currently using traditional tracking with ga.js. If you are using the urchin.js snippet, please see the Tracking Code Migration Guide. Asynchronous tracking is not available in urchin.js.

To convert your pages to use the asynchronous snippet, follow these steps:

  1. If the page already uses Analytics, remove your existing tracking code snippet and any customizations you have made.

    To reduce errors, we recommend that you remove the existing tracking code snippet from the include file or mechanism that injects it into your web pages. You can paste your existing tracking code snippet in a text file to keep track of any customized methods you use.

  2. Insert the asynchronous snippet at the top of the section of your pages.

    One of the main advantages of the asynchronous snippet is that you can position it at the top of the HTML document. This increases the likelihood that the tracking beacon will be sent before the user leaves the page. We've determined that on most pages, the optimal location for the asynchronous snippet is at the top of the section. 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.

  3. Modify the _setAccount method with your web property ID.

    For more information on web property IDs, see the "Web Property" section in the Accounts and Profiles document.

  4. Add your customizations back in using the asynchronous syntax. The Usage Guide and Migration Examples pages provide many examples of these conversions.

Note: Even with asynchronous loading, some content might be blocked from rendering in certain browsers. To avoid this possibility, other scripts in your site should be positioned in one of these ways:

  • before the tracking code snippet in the section of your HTML
  • after both the tracking code snippet and all page content (e.g. at the bottom of the HTML body)

If that isn't an option, you can still put the asynchronous snippet at the bottom of the page. You can also split your snippet to retain some of the benefits of asynchronous tracking.