D3Public/GoogleServices
8
0
Fork 0
Code Pull Requests Releases Activity
rel_2.x
GoogleServices/Sources/doku/02_asyncUsageGuide.html

607 lines
49 KiB
HTML
Raw Permalink Normal View History

2.1.0
2011-02-27 00:25:02 +01:00
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Asynchronous Tracking Usage Guide - Google Analytics - Google Code</title>
<script type="text/javascript"><!--
(function(){function a(){this.t={};this.tick=function(c){this.t[c]=(new Date).getTime()};this.tick("start")}var b=new a;window.jstiming={Timer:a,load:b};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;})();
var _tocPath_ = '/html/apis/analytics/_toc.ezt';
var codesite_token = '56328469b0a0a7c65c4a395ddd8cde4c';
var logged_in_user_email = 'dan1978@gmx.net';
//--></script>
<link href="02_asyncUsageGuide-Dateien/codesite.css" type="text/css" rel="stylesheet">
<script src="02_asyncUsageGuide-Dateien/codesite_head.js" type="text/javascript"></script>
<script type="text/javascript">CODESITE_CSITimer['load'].tick('bhs');</script>
<link rel="search" type="application/opensearchdescription+xml" title="Google Code" href="http://code.google.com/osd.xml">
<!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css"><![endif]-->
<link href="02_asyncUsageGuide-Dateien/semantic_headers.css" rel="stylesheet" type="text/css">
<link href="02_asyncUsageGuide-Dateien/local_extensions.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="02_asyncUsageGuide-Dateien/custom_tracker_min.js"></script>
<script src="02_asyncUsageGuide-Dateien/ga.js" async="" type="text/javascript"></script></head><body class="gc-documentation">
<div id="gb">
<span>
<b>dan1978@gmx.net</b>
|
<a href="http://code.google.com/u/dan1978@gmx.net/" id="projects-dropdown" onclick="return false;"><span style="text-decoration: underline;">My favorites</span> <span style="font-size: 0.75em;">▼</span></a>
|
<a id="lang-dropdown" href="http://code.google.com/" onclick="return false;"><span style="text-decoration: underline;">English</span> <span style="font-size: 0.75em;">▼</span></a>
| <a href="http://www.google.com/accounts/Logout?continue=http%3A%2F%2Fcode.google.com%2Fintl%2Fde%2Fapis%2Fanalytics%2Fdocs%2Ftracking%2FasyncUsageGuide.html" onclick="CODESITE_click('/gb/sc/signout');"><span style="text-decoration: underline;">Sign out</span></a>
</span>
</div>
<div class="gbh" style="left: 0px;"></div>
<div class="gbh" style="right: 0px;"></div>
<div id="gc-container">
<a id="top"></a>
<div id="skipto">
<a href="#gc-pagecontent">Skip to page content</a>
<a href="#gc-toc">Skip to main navigation</a>
</div>
<div id="gc-header">
<div id="logo"><a href="http://code.google.com/">
<img src="02_asyncUsageGuide-Dateien/code_logo.gif" alt="Google Code" style="border: 0pt none; margin: 3px 0pt 0pt;" height="40" width="167">
</a></div>
<div id="search">
<div id="searchForm">
<form id="cse" action="http://www.google.com/cse" accept-charset="utf-8" onsubmit="executeGSearch(document.getElementById('gsearchInput').value); return false;">
<noscript>
<input type="hidden" name="cref" value="http://code.google.com/cse/googlecode-context.xml">
</noscript>
<div id="gsc-search-box">
<input id="gsearchInput" name="q" maxlength="2048" class="gsc-input" autocomplete="off" title="Google Code Search" style="width: 345px;" type="text">
<div id="cs-searchresults" onclick="event.cancelBubble = true;"></div>
<input title="Search" id="gsearchButton" class="gsc-search-button" name="sa" value="Search" type="submit">
<div class="greytext">e.g. "adwords" or "open source"</div>
</div>
</form>
</div> <!-- end searchForm -->
</div> <!-- end search -->
</div> <!-- end gc-header -->
<div id="codesiteContent">
<a id="gc-topnav-anchor"></a>
<div id="gc-topnav"><img id="gc-star" src="02_asyncUsageGuide-Dateien/star_off.gif" height="15" width="15">
<h1 class="mozilla">Google Analytics</h1>
<ul id="docs" class="gc-topnav-tabs">
<li id="home_link">
<a href="http://code.google.com/apis/analytics/" title="Google Analytics home page">Home</a>
</li>
<li id="docs_link">
<a href="http://code.google.com/apis/analytics/docs/index.html" class="selected" title="Official Google Analytics documentation">Docs</a>
</li>
<li id="faq_link">
<a href="http://code.google.com/apis/analytics/docs/gdata/gdataFAQ.html" title="Answers to frequently asked questions about Google Analytics">FAQ</a>
</li>
<li id="articles_link">
<a href="http://code.google.com/apis/analytics/docs/gdata/gdataArticlesCode.html" title="Focused articles and tutorials for Google Analytics developers">Articles</a>
</li>
<li>
<a href="http://analytics.blogspot.com/" title="Official Google Analytics blog">Blog</a>
</li>
<li>
<a href="http://code.google.com/apis/analytics/groups/groups.html" title="Google Analytics developer forum">Forum</a>
</li>
<li>
<a href="http://www.google.com/analytics/tos.html" title="Google Analytics terms of service">Terms</a>
</li>
</ul>
</div> <!-- end gc-topnav -->
<div class="g-section g-tpl-210">
<div class="g-unit g-first" id="gc-toc">
<link href="02_asyncUsageGuide-Dateien/local_extensions.css" rel="stylesheet" type="text/css">
<ul class="treelist tlw-nested-only tlw-processed tlw-instance-0">
<li>
<ul>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Overview"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Overview" class="tlw-control tlw-plus"></a><span class="tlw-title"><strong>Overview</strong></span></div><ul style="display: none;" id="0-sub-0">
<li><a href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsOverview.html">Functional Overview</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsAccounts.html">Accounts &amp; Profiles</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsCookies.html">Cookies</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsDomains.html">Domains &amp; Directories</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/concepts/gaConceptsSampling.html">Sampling</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="dottedLine"></div>
<div class="sectionTitle"><span class="sectionFont">Tracking Code</span></div>
<ul class="treelist tlw-nested-only tlw-processed tlw-instance-1" style="margin-top: -15px;">
<li>
<ul>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/home.html">Home</a></li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Collapse Getting Started"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Collapse Getting Started" class="tlw-control tlw-minus"></a><a href="http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html">Getting Started</a></div><ul style="display: block;" id="1-sub-0">
<li class="selected"><a href="http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html">Async Usage</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/asyncMigrationExamples.html">Async Migration</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingEcommerce.html">Ecommerce Tracking</a></li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Event Tracking"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Event Tracking" class="tlw-control tlw-plus"></a><a href="http://code.google.com/apis/analytics/docs/tracking/eventTrackerOverview.html">Event Tracking</a></div><ul style="display: none;" id="1-sub-1">
<li><a href="http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html">Implementing</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/eventTrackerWrappers.html">Extending</a></li>
</ul>
</li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingSite.html">Cross-Domain Tracking</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingTraffic.html">Traffic Sources</a></li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Collapse Visitor Configuration"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Collapse Visitor Configuration" class="tlw-control tlw-minus"></a><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingVisitors.html">Visitor Configuration</a></div><ul style="display: block;" id="1-sub-2">
<li><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingCustomVariables.html">Custom Variables</a></li>
<li class="deprecated"><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingVisitorSegments.html">Custom Visitor Segments</a></li>
</ul>
</li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingOverview.html">Traditional Snippet</a></li>
</ul>
</li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Tracking Reference"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Tracking Reference" class="tlw-control tlw-plus"></a><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApi.html">Tracking Reference</a></div><ul style="display: none;" id="1-sub-3">
<li>Global Objects
<ul>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gat.html">_gat</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gaq.html">_gaq</a></li>
</ul>
</li><li>Tracker Objects
<ul class="treelist tlw-processed tlw-instance-2">
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiBasicConfiguration.html">Basic Configuration</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiCampaignTracking.html">Campaign Tracking</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiDomainDirectory.html">Domains &amp; Directories</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiEcommerce.html">Ecommerce</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiEventTracking.html">Event Tracking</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiSearchEngines.html">Search Engines and Referrers</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiWebClient.html">Web Client</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApiUrchin.html">Urchin Server</a></li>
</ul>
</li>
</ul>
</li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Libraries"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Libraries" class="tlw-control tlw-plus"></a><span class="tlw-title">Libraries</span></div><ul style="display: none;" id="1-sub-4">
<li><a href="http://code.google.com/apis/analytics/docs/tracking/gadgetTracking.html">Gadgets</a></li>
<li><a href="http://code.google.com/chrome/extensions/trunk/tut_analytics.html">Chrome Extensions</a></li>
<li><a style="text-decoration: none;" href="http://code.google.com/mobile/analytics/docs/"><span style="text-decoration: underline;">Mobile</span><span class="new">&nbsp;&nbsp;Updated</span></a> (Labs <img src="02_asyncUsageGuide-Dateien/labs-11.png" alt="in Labs" style="padding: 0pt; margin: 0pt;">)</li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Flash/Flex (Labs )"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Flash/Flex (Labs )" class="tlw-control tlw-plus"></a><span class="tlw-title"><a href="http://code.google.com/apis/analytics/docs/tracking/flashTrackingIntro.html">Flash/Flex</a> (Labs <img src="02_asyncUsageGuide-Dateien/labs-11.png" alt="in Labs" style="padding: 0pt; margin: 0pt;">)</span></div><ul style="display: none;" id="1-sub-5">
<li><a href="http://code.google.com/apis/analytics/docs/tracking/flashTrackingSetupFlash.html">Flash Setup</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/flashTrackingSetupFlex.html">Flex Setup</a></li>
</ul>
</li>
<li><a href="http://code.google.com/apis/analytics/docs/tracking/silverlightTrackingIntro.html">Silverlight</a> (Labs <img src="02_asyncUsageGuide-Dateien/labs-11.png" alt="in Labs" style="padding: 0pt; margin: 0pt;">)</li>
</ul>
</li>
<li>
<a href="http://code.google.com/apis/analytics/docs/tracking/gaTrackingTroubleshooting.html">Troubleshooting</a>
</li>
<li><a href="http://code.google.com/apis/analytics/docs/gaJS/changelog.html">Changelog - ga.js</a></li>
</ul>
</li>
</ul>
<div class="dottedLine"></div>
<div class="sectionTitle"><span class="sectionFont">Management API <span style="letter-spacing: normal;">(Labs <img src="02_asyncUsageGuide-Dateien/labs-11.png" alt="in Labs" style="padding: 0pt; margin: 0pt;">)</span></span></div>
<ul class="treelist tlw-nested-only tlw-processed tlw-instance-3" style="margin-top: -15px;">
<li>
<ul class="treelist tlw-processed tlw-instance-4">
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/home.html">Home</a>
</li><li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Getting Started"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Getting Started" class="tlw-control tlw-plus"></a><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtDeveloperGuide.html">Getting Started</a></div><ul style="display: none;" id="3-sub-0">
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtAuthentication.html">Authorization</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtProtocol.html">Protocol</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtJava.html">Java</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtJavascript.html">Javascript</a></li>
</ul>
</li>
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtFeedReference.html">Feed Reference</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/mgmtLibraries.html">Libraries &amp; Examples</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/mgmt/changelog.html">Changelog</a></li>
</ul>
</li>
</ul>
<div class="dottedLine"></div>
<div class="sectionTitle"><span class="sectionFont">Export API <span style="letter-spacing: normal;">(Labs <img src="02_asyncUsageGuide-Dateien/labs-11.png" alt="in Labs" style="padding: 0pt; margin: 0pt;">)</span></span></div>
<ul class="treelist tlw-nested-only tlw-processed tlw-instance-5" style="margin-top: -15px;">
<li>
<ul>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/home.html">Home</a></li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Getting Started"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Getting Started" class="tlw-control tlw-plus"></a><a href="http://code.google.com/apis/analytics/docs/gdata/gdataDeveloperGuide.html">Getting Started</a></div><ul style="display: none;" id="5-sub-0">
<li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataAuthentication.html">Authorization</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/2.0/gdataProtocol.html">Protocol</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/2.0/gdataJava.html">Java</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/2.0/gdataJavascript.html">Javascript</a></li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Version 1.0"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Version 1.0" class="tlw-control tlw-plus"></a><span class="tlw-title">Version 1.0</span></div><ul style="display: none;" id="5-sub-1">
<li><a href="http://code.google.com/apis/analytics/docs/gdata/1.0/gdataProtocol.html">Protocol</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/1.0/gdataJava.html">Java</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/1.0/gdataJavascript.html">Javascript</a></li>
</ul></li>
</ul>
</li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Feed Reference"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Feed Reference" class="tlw-control tlw-plus"></a><a href="http://code.google.com/apis/analytics/docs/gdata/gdataReference.html">Feed Reference</a></div><ul style="display: none;" id="5-sub-2">
<li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataReferenceAccountFeed.html">Account Feed</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataReferenceDataFeed.html">Data Feed</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataCommonQueries.html">Common Queries</a>
</li><li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataExplorer.html">Query Explorer</a></li>
</ul></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataReferenceDimensionsMetrics.html">Dimensions &amp; Metrics</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gdata/gdataLibraries.html">Libraries &amp; Examples</a></li>
<li style="padding-top: 0pt; padding-bottom: 0pt;">
<div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control" title="Expand Changelog &amp; Issues"><img src="02_asyncUsageGuide-Dateien/cleardot.gif" alt="Expand Changelog &amp; Issues" class="tlw-control tlw-plus"></a><span class="tlw-title">Changelog &amp; Issues</span></div><ul style="display: none;" id="5-sub-3">
<li><a href="http://code.google.com/apis/analytics/docs/gdata/changelog.html">Changelog</a></li>
<li><a href="http://code.google.com/p/gdata-issues/issues/list?can=2&amp;q=label:API-Analytics&amp;colspec=API+ID+Type+Status+Priority+Stars+Summary&amp;cells=tiles">Issue Tracker</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="dottedLine"></div>
<div class="sectionTitle"><span class="sectionFont">Website Optimizer <span style="letter-spacing: normal;">(Labs <img src="02_asyncUsageGuide-Dateien/labs-11.png" alt="in Labs" style="padding: 0pt; margin: 0pt;">)</span></span></div>
<ul class="treelist tlw-nested-only tlw-processed tlw-instance-6" style="margin-top: -15px;">
<li>
<ul>
<li><a href="http://code.google.com/apis/analytics/docs/gwo/index.html">Getting Started</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gwo/commonTasks.html">Common Tasks</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gwo/feedReference.html">Feed Reference</a></li>
<li><a href="http://code.google.com/apis/analytics/docs/gwo/gwoFAQ.html">FAQ</a></li>
</ul>
</li>
</ul>
<a class="hidden" href="#gc-topnav-anchor">More Google Analytics resource links</a>
</div>
<div style="position: relative;" class="g-unit" id="gc-pagecontent">
<script type="text/javascript">CODESITE_docEarlyProcessing();</script>
<h1 class="page_title">Asynchronous Tracking Usage Guide</h1>
<p>
The asynchronous snippet allows browsers to continue rendering the page while <code>ga.js</code> loads in the
background. Since the browser might encounter tracking API calls before <code>ga.js</code> has finished loaded,
a different syntax must be used for customizing your snippet. This document covers how to make tracking API calls
using the asynchronous syntax. See the
<a href="http://code.google.com/apis/analytics/docs/tracking/asyncMigrationExamples.html">Migration Examples</a>
page for a side-by-side comparison of the traditional and asynchronous syntaxes.
</p>
<table class="columns" id="toc-list">
<tbody><tr>
<td>
<ol class="toc">
<li><a href="#Syntax">The Asynchronous Syntax</a></li>
<li><a href="#EventHandlers">HTML Event Handlers</a></li>
<li><a href="#PushingFunctions">Pushing Functions</a></li>
</ol>
</td>
<td>
<ol class="toc">
<li><a href="#MultipleCommands">One Push, Multiple Commands</a></li>
<li><a href="#SplitSnippet">Split Snippet</a></li>
<li><a href="#CommonPitfalls">Common Pitfalls</a></li>
</ol>
</td>
</tr>
</tbody></table>
<a name="Syntax"></a>
<h2>The Asynchronous Syntax</h2>
<p>
The <code>_gaq</code> object is what makes the asynchronous syntax possible.
It acts as a queue, which is a <em>first-in,first-out</em> data structure that collects API
calls until <code>ga.js</code> is ready to execute them. To add something to the queue, use
the <code>_gaq.push</code> method.
</p>
<p>
To push an API call onto the queue, you must convert it from the traditional JavaScript syntax
into a <em>command array</em>. 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.
</p>
<p>The following code calls <code>_trackPageview()</code> using the traditional syntax:</p>
<pre class="prettyprint"><span class="kwd">var</span><span class="pln"> pageTracker </span><span class="pun">=</span><span class="pln"> _gat</span><span class="pun">.</span><span class="pln">_getTracker</span><span class="pun">(</span><span class="str">'UA-XXXXX-X'</span><span class="pun">);</span><span class="pln"><br>pageTracker</span><span class="pun">.</span><span class="pln">_trackPageview</span><span class="pun">();</span></pre>
<p>The equivalent code in the asynchronous syntax requires two calls to <code>_gaq.push</code>.</p>
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-XXXXX-X'</span><span class="pun">]);</span><span class="pln"><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_trackPageview'</span><span class="pun">]);</span></pre>
<p>
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 <code>_setAccount</code> 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.
</p>
<p>
For more information on the asynchronous syntax, see the
<a href="http://code.google.com/apis/analytics/docs/gaJS/gaJSApi_gaq.html#_gaq.push">Tracking Reference</a>
for the <code>_gaq.push</code> method.
</p>
<p class="backtotop"><a href="#top" class="backtotop">Back to Top</a></p>
<a name="EventHandlers"></a>
<h2>HTML Event Handlers</h2>
<p>
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.
</p>
<pre class="prettyprint"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_trackEvent'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'button3'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'clicked'</span><span class="pun">])</span><span class="atv">"</span><span class="tag">/&gt;&lt;button&gt;</span></pre>
<p>
Even if this button is clicked before the browser has finished loading <code>ga.js</code>, the event
will be captured and eventually executed. Using traditional tracking, the browser might throw an
exception in this situation.
</p>
<p class="backtotop"><a href="#top" class="backtotop">Back to Top</a></p>
<a name="PushingFunctions"></a>
<h2>Pushing Functions</h2>
<p>
In addition to command arrays, you can also push function objects onto the <code>_gaq</code> queue.
The functions can contain any arbitrary JavaScript and like command arrays, they are executed
in the order in which they are pushed onto <code>_gaq</code>. This technique is useful for calling
the tracking APIs that return values. For example, the following code builds a linker
URL and sets the <code>href</code> property for a link with the result.
</p>
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> pageTracker </span><span class="pun">=</span><span class="pln"> _gat</span><span class="pun">.</span><span class="pln">_getTracker</span><span class="pun">(</span><span class="str">'UA-XXXXX-X'</span><span class="pun">);</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> link </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'my-link-id'</span><span class="pun">);</span><span class="pln"><br>&nbsp; link</span><span class="pun">.</span><span class="pln">href </span><span class="pun">=</span><span class="pln"> pageTracker</span><span class="pun">.</span><span class="pln">_getLinkerUrl</span><span class="pun">(</span><span class="str">'http://example.com/'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">});</span></pre>
<p>
The example above uses <code>_gat</code> 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 <code>_gat._createTracker</code> method to create a permanent, globally accessible object.
The following code demonstrates how this would work.
</p>
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> pageTracker </span><span class="pun">=</span><span class="pln"> _gat</span><span class="pun">.</span><span class="pln">_createTracker</span><span class="pun">(</span><span class="str">'UA-XXXXX-X'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'myTracker'</span><span class="pun">);</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> link </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'my-link-id'</span><span class="pun">);</span><span class="pln"><br>&nbsp; link</span><span class="pun">.</span><span class="pln">href </span><span class="pun">=</span><span class="pln"> pageTracker</span><span class="pun">.</span><span class="pln">_getLinkerUrl</span><span class="pun">(</span><span class="str">'http://example.com/'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">});</span><span class="pln"><br><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'myTracker._trackPageview'</span><span class="pun">]);</span></pre>
<p>
The example above creates an asynchronous tracker inside the function and then references it later
by name in the command array.
</p><p>
</p><p>
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
<code>_gat._getTrackerByName</code> method. The following code demonstrates how it works.
</p>
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'myTracker._setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-XXXXX-X'</span><span class="pun">]);</span><span class="pln"><br><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> pageTracker </span><span class="pun">=</span><span class="pln"> _gat</span><span class="pun">.</span><span class="pln">_getTrackerByName</span><span class="pun">(</span><span class="str">'myTracker'</span><span class="pun">);</span><span class="pln"><br>&nbsp; </span><span class="kwd">var</span><span class="pln"> link </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'my-link-id'</span><span class="pun">);</span><span class="pln"><br>&nbsp; link</span><span class="pun">.</span><span class="pln">href </span><span class="pun">=</span><span class="pln"> pageTracker</span><span class="pun">.</span><span class="pln">_getLinkerUrl</span><span class="pun">(</span><span class="str">'http://example.com/'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">});</span></pre>
<p class="backtotop"><a href="#top" class="backtotop">Back to Top</a></p>
<a name="MultipleCommands"></a>
<h2>One Push, Multiple Commands</h2>
<p>
Instead of typing <code>_gaq.push(...)</code> for each call, you can push all of your
commands at once. The following code demonstrates this technique.
</p>
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'_setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-XXXXX-X'</span><span class="pun">],</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'_setDomainName'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'example.com'</span><span class="pun">],</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'_setCustomVar'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Section'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'Life &amp; Style'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">3</span><span class="pun">],</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'_trackPageview'</span><span class="pun">]</span><span class="pln"><br></span><span class="pun">);</span></pre>
<p>
This works because the <code>_gaq.push</code> method imitates the <code>Array.push</code> method, which
allows pushing multiple items with one invocation.
</p><p>
</p><p>
Pushing commands to multiple trackers also works.
</p>
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'_setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-XXXXX-1'</span><span class="pun">],</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'_trackPageview'</span><span class="pun">],</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'b._setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-XXXXX-2'</span><span class="pun">],</span><span class="pln"><br>&nbsp; </span><span class="pun">[</span><span class="str">'b._trackPageview'</span><span class="pun">]</span><span class="pln"><br></span><span class="pun">);</span></pre>
<p class="backtotop"><a href="#top" class="backtotop">Back to Top</a></p>
<a name="SplitSnippet"></a>
<h2>Split Snippet</h2>
<p>
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 afect on page rendering, you can leave that part at the
top and put the part of the snippet that inserts <code>ga.js</code> at
the bottom. </p>
<p>
A page with the asynchronous snippet split in half might look like this:
</p>
<pre class="prettyprint"><span class="tag">&lt;html&gt;</span><span class="pln"><br><br></span><span class="tag">&lt;head&gt;</span><span class="pln"><br>&nbsp; </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> _gaq </span><span class="pun">=</span><span class="pln"> _gaq </span><span class="pun">||</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"><br>&nbsp; &nbsp; _gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-XXXXX-X'</span><span class="pun">]);</span><span class="pln"><br>&nbsp; &nbsp; _gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_trackPageview'</span><span class="pun">]);</span><span class="pln"><br>&nbsp; </span><span class="tag">&lt;/script&gt;</span><span class="pln"><br></span><span class="tag">&lt;/head&gt;</span><span class="pln"><br><br></span><span class="tag">&lt;body&gt;</span><span class="pln"><br>&nbsp; </span><span class="tag">&lt;p&gt;</span><span class="pln">Page Content</span><span class="tag">&lt;/p&gt;</span><span class="pln"><br><br>&nbsp; </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"some_random_script.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln"><br><br>&nbsp; </span><span class="tag">&lt;p&gt;</span><span class="pln">Page Content</span><span class="tag">&lt;/p&gt;</span><span class="pln"><br><br>&nbsp; </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"> &nbsp;</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> ga </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'script'</span><span class="pun">);</span><span class="pln"> &nbsp; &nbsp; ga</span><span class="pun">.</span><span class="pln">type </span><span class="pun">=</span><span class="pln"> </span><span class="str">'text/javascript'</span><span class="pun">;</span><span class="pln"> ga</span><span class="pun">.</span><span class="pln">async </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; ga</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="str">'https:'</span><span class="pln"> &nbsp; </span><span class="pun">==</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">location</span><span class="pun">.</span><span class="pln">protocol </span><span class="pun">?</span><span class="pln"> </span><span class="str">'</span><a href="https://ssl/" target="_blank"><span class="str">https://ssl</span></a><span class="str">'</span><span class="pln"> &nbsp; </span><span class="pun">:</span><span class="pln"> </span><span class="str">'</span><a href="http://www/" target="_blank"><span class="str">http://www</span></a><span class="str">'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">'.</span><a href="http://google-analytics.com/ga.js" target="_blank"><span class="str">google-analytics.com/ga.js</span></a><span class="str">'</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nb
<p>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 <code>_gaq</code> can
stay at the top.</p>
<p class="backtotop"><a href="#top" class="backtotop">Back to Top</a></p>
<a name="CommonPitfalls"></a>
<h2>Common Pitfalls</h2>
<p>When using either the asynchronous or traditional syntax, keep in mind the following:
</p><ul>
<li><strong>Method names are case-sensitive.</strong><br>
If you use a method name without the proper casing, your method calls will
not work. Examples:
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_trackpageview'</span><span class="pun">]);</span><span class="pln"> &nbsp; </span><span class="com">// bad</span><span class="pln"><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_trackPageview'</span><span class="pun">]);</span><span class="pln"> &nbsp; </span><span class="com">// good</span></pre>
</li>
<li><strong>Use the correct method names.</strong><br>
If your tracking is not working correctly, check to make sure you are using
the correct name for the method. Examples:
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setDomain'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'example.com'</span><span class="pun">]);</span><span class="pln"> &nbsp; &nbsp; &nbsp; </span><span class="com">// bad</span><span class="pln"><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setDomainName'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'example.com'</span><span class="pun">]);</span><span class="pln"> &nbsp; </span><span class="com">// good</span></pre>
</li>
<li><strong>Only strings should be passed in with
quotes</strong>. All other types should be left unquoted.<br>
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:
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setAllowLinker'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'false'</span><span class="pun">]);</span><span class="pln"> &nbsp; &nbsp;</span><span class="com">// bad</span><span class="pln"><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setAllowLinker'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">]);</span><span class="pln"> &nbsp; &nbsp; &nbsp;</span><span class="com">// good</span></pre>
</li>
<li><strong>Make sure that strings do not contain leading or trailing whitespace.</strong><br>
Examples:
<pre class="prettyprint"><span class="pln">_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">' UA-65432-1'</span><span class="pun">]);</span><span class="pln"> &nbsp; &nbsp;</span><span class="com">// bad</span><span class="pln"><br>_gaq</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="str">'_setAccount'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'UA-65432-1'</span><span class="pun">]);</span><span class="pln"> &nbsp; &nbsp; </span><span class="com">// good</span></pre>
</li>
</ul>
<p class="backtotop"><a href="#top" class="backtotop">Back to Top</a></p>
<div style="height: 3090px;" id="gc-collapsible"></div></div><!-- end gc-pagecontent -->
</div><!-- end gooey wrapper -->
</div> <!-- end codesite content -->
<div id="gc-footer" dir="ltr">
<div class="text">
©2011 Google -
<a href="http://code.google.com/">Code Home</a> -
<a href="http://code.google.com/terms.html">Terms of Service</a> -
<a href="http://code.google.com/privacy.html">Privacy Policy</a> -
<a href="http://code.google.com/more/">Site Directory</a>
<br> <br>
Google Code offered in:
<a href="http://code.google.com/intl/en/">English</a> -
<a href="http://code.google.com/intl/es/">Español</a> -
<a href="http://code.google.com/intl/ja/">日本語</a> -
<a href="http://code.google.com/intl/ko/">한국어</a> -
<a href="http://code.google.com/intl/pt-BR/">Português</a> -
<a href="http://code.google.com/intl/ru/">Pусский</a> -
<a href="http://code.google.com/intl/zh-CN/">中文(简体)</a> -
<a href="http://code.google.com/intl/zh-TW/">中文(繁體)</a>
</div>
</div><!-- end gc-footer -->
</div><!-- end gc-container -->
<script type="text/javascript">CODESITE_CSITimer['load'].tick('ats');</script>
<script src="02_asyncUsageGuide-Dateien/codesite_tail.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
['projectTracker._setAccount', 'YT-8705592-1'],
['projectTracker._setDomainName', 'code.google.com'],
['projectTracker._setCookiePath', window.location.pathname.substring(0,
window.location.pathname.lastIndexOf('/') + 1)],
['projectTracker._trackPageview'],
['siteTracker._setAccount', 'UA-18071-1'],
['siteTracker._setDomainName', 'code.google.com'],
['siteTracker._setCookiePath', window.location.pathname.substring(0,
window.location.pathname.lastIndexOf('/') + 1)],
['siteTracker._trackPageview']
);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'http://www.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
<div style="display: none;" id="menuDiv-lang-dropdown" class="menuDiv instance0"><div class="menuCategory default"><a href="http://code.google.com/intl/en/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">English</a><a href="http://code.google.com/intl/es/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">Español</a><a href="http://code.google.com/intl/ja/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">日本語</a><a href="http://code.google.com/intl/ko/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">한국어</a><a href="http://code.google.com/intl/pt-BR/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">Português (Brasil)</a><a href="http://code.google.com/intl/ru/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">Pусский</a><a href="http://code.google.com/intl/zh-CN/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">中文 (简体)</a><a href="http://code.google.com/intl/zh-TW/apis/analytics/docs/tracking/asyncUsageGuide.html" style="display: block;" class="menuItem">中文 (繁體)</a></div></div><div id="gc-collapsible-arrow"></div><div id="cs-searchresults"><div id="cs-recommended">Suggestions</div><div id="searchResult1"></div><div id="searchResult2"></div><div id="searchResult3"></div><div id="searchResult4"></div><div id="searchResult5"></div><div id="searchResult6"></div><div id="searchResult7"></div></div><div style="display: none;" id="menuDiv-projects-dropdown" class="menuDiv instance1"><div class="menuCategory controls"><hr class="menuSeparator"><a href="http://code.google.com/more/" style="display: block;" class="menuItem">Find developer products...</a><a href="http://code.google.com/hosting/" style="display: block;" class="menuItem">Find open source projects...</a></div></div></body></html>
Copy Permalink