My favorites ▼ | English ▼ | Sign in

Google Analytics

Tracking Basics (Asynchronous Syntax)

This document covers how to use the Analytics Tracking Code with the latest asynchronous syntax. With this version of the tracking code, you can also place the Analytics snippet higher in the page without delaying subsequent content from rendering. See the Migration Examples page for a side-by-side comparison of the traditional and asynchronous syntaxes.

  1. Tracking Code Quickstart
  1. How the Asynchronous Syntax Works
  2. Tracking with HTML Event Handlers
  3. Pushing Functions
  1. One Push, Multiple Commands
  2. Splitting the Snippet
  3. Avoiding Common Pitfalls

Tracking Code Quickstart

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. To use this on your pages, copy the code snippet below, replacing UA-XXXXX-X with your web property ID. Paste this snippet into your website template page so that it appears before the closing </head> tag.

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. For step-by-step instructions on setting up tracking, see the Help Center article on setting up tracking. 

<script 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';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

The snippet above represents the minimum configuration needed to track a page asynchronously. It uses _setAccount to set the page's web property ID and then calls _trackPageview to send the tracking data back to the Google Analytics servers.

Important: If you are updating your pages from the traditional snippet to the latest, asynchronous version, you should remove the existing tracking snippet first. We do not recommend using both snippets together on the same page. For migration instructions, see Migrating to Async.

How the Asynchronous Syntax Works

The _gaq object is what makes the asynchronous syntax possible. It acts as a queue, which is a first-in,first-out data structure that collects API calls until ga.js is ready to execute them. To add something to the queue, use the _gaq.push method.

To push an API call onto the queue, you must convert it from the traditional JavaScript syntax into a command array. Command arrays are simply JavaScript arrays that conform to a certain format. The first element in a command array is the name of the tracker object method you want to call. It must be a string. The rest of the elements are the arguments you want to pass to the tracker object method. These can be any JavaScript value.

The following code calls _trackPageview() using the traditional syntax:

var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();

The equivalent code in the asynchronous syntax requires two calls to _gaq.push.

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

In the asynchronous syntax, the creation of the tracker object is implied, but we still need a way to set the web property ID for the tracker. The _setAccount method has been added to provide this capability. All the other tracker object methods are the same in both asynchronous and traditional tracking. Only the syntax is different.

For more information on the asynchronous syntax, see the Tracking Reference for the _gaq.push method.

Back to Top

Tracking with HTML Event Handlers

The asynchronous tracking syntax should also be used from within DOM event handlers. For example, the following button generates an event when it is clicked. 

<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"/><button>

Even if this button is clicked before the browser has finished loading ga.js, the event will be captured and eventually executed. Using traditional tracking, the browser might throw an exception in this situation.

Back to Top

Pushing Functions onto the Queue

In addition to command arrays, you can also push function objects onto the _gaq queue. The functions can contain any arbitrary JavaScript and like command arrays, they are executed in the order in which they are pushed onto _gaq. This technique is useful for calling the tracking APIs that return values. For example, the following code builds a linker URL and sets the href property for a link with the result. 

_gaq.push(function() {
  var pageTracker = _gat._getTracker('UA-XXXXX-X');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

The example above uses _gat to create a tracker object, but because it is assigned to a local variable, code outside of the function cannot use it. While this is acceptable, you can use the _gat._createTracker method to create a permanent, globally accessible object. The following code demonstrates how this would work. 

_gaq.push(function() {
  var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

_gaq.push(['myTracker._trackPageview']);

The example above creates an asynchronous tracker inside the function and then references it later by name in the command array.

The opposite use case is also possible. For example, if you need to use an asynchronous tracker object created via a previously pushed command array, use the _gat._getTrackerByName method. The following code demonstrates how it works. 

_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);

_gaq.push(function() {
  var pageTracker = _gat._getTrackerByName('myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

Back to Top

One Push, Multiple Commands

Instead of typing _gaq.push(...) for each call, you can push all of your commands at once. The following code demonstrates this technique. 

_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);

This works because the _gaq.push method imitates the Array.push method, which allows pushing multiple items with one invocation.

Pushing commands to multiple trackers also works. 

_gaq.push(
  ['_setAccount', 'UA-XXXXX-1'],
  ['_trackPageview'],
  ['b._setAccount', 'UA-XXXXX-2'],
  ['b._trackPageview']
);

Back to Top

Splitting the Snippet

If you prefer to put the Analytics snippet at the bottom of the page, you should know that you don't have to put the whole snippet at the bottom. You can still keep most of the benefits of asynchronous loading by splitting the snippet in half—keep the first half at the top of the page and move the rest to the bottom. Because the first part of the tracking snippet has little to no effect on page rendering, you can leave that part at the top and put the part of the snippet that inserts ga.js at the bottom.

A page with the asynchronous snippet split in half might look like this: 

<html>

<head>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
  </script>
</head>

<body>
  <p>Page Content</p>

  <script src="some_random_script.js"></script>

  <p>Page Content</p>

  <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';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   </script>
</body>
</html>

Both pieces of code need to be wrapped in their own script tags, but only the last six lines of the original asynchronous snippet need to be moved to the bottom. All the lines that push methods onto _gaq can stay at the top.

Back to Top

Avoiding Common Pitfalls

When using either the asynchronous or traditional syntax, keep in mind the following:

  • Method names are case-sensitive.
    If you use a method name without the proper casing, your method calls will not work. Examples: 
    _gaq.push(['_trackpageview']);   // bad
_gaq.push(['_trackPageview']);   // good
  • Use the correct method names.
    If your tracking is not working correctly, check to make sure you are using the correct name for the method. Examples: 
    _gaq.push(['_setDomain', 'example.com']);       // bad
_gaq.push(['_setDomainName', 'example.com']);   // good
  • Only strings should be passed in with quotes. All other types should be left unquoted.
    Any value that is not a string, such as a booleans, object literals, functions or arrays, should be passed in without quotation marks. Use only quotation marks when you are passing in something that is meant to be interpreted as a string. If you are migrating from the traditional syntax, any function parameter that was passed in without quotation marks should remain unquoted in the asynchronous syntax. Examples: 
    _gaq.push(['_setAllowLinker', 'false']);    // bad
_gaq.push(['_setAllowLinker', false]);      // good
  • Make sure that strings do not contain leading or trailing whitespace.
    Examples: 
    _gaq.push(['_setAccount', ' UA-65432-1']);    // bad
_gaq.push(['_setAccount', 'UA-65432-1']);     // good

Back to Top