异步跟踪代码可以让浏览器在后台加载ga.js时继续渲染网页。由于在ga.js完成加载前,浏览器可能会遇到跟踪API请求,因此需要对跟踪代码使用不同的句法(syntax)。这里有一些传统和异步语法的一对一比较迁移案例 。
异步语法
_gaq 是把异步语法实现的对象。它通过队列方式运行,采取先进先出的数据结构来收集API请求,直至 ga.js 准备就绪来执行。要在这个队列中添加数据,使用 _gaq.push 方式。
要推送一个API请求到队列中,你必须把它从传统JavaScript语法转变成一个命令组(command array )。命令组是服从特定格式的简单的JavaScript阵列。在命令组中的第一个元素是你要请求的跟踪者对象模式的名称。它必须是字符串。余下元素是你希望向跟踪者对象模式传递的那些参数。这些可以是任意的JavaScript值。
下面时使用传统语法请求 _trackPageview() 的代码。
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
同样函数的异步语法代码是对 _gaq.push 发出两次请求。
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
在异步语法这,跟踪者对象的创建已经被说明了,但我们仍然要正确的设置网站属性ID。 _setAccount 模式增加了这一函数。所有的跟踪者对象模式都可以以传统或异步方式实施。只是语法不同而已。
HTML事件处理器
异步跟踪语法也可以用在DOM事件处理。例如,下面的按钮在被点击时产生了一次事件。
尽管这个按钮在 ga.js 加载前被点击,这次事件也会被捕捉最终被执行。如果用传统跟踪方式,浏览器可能会忽略这种情景。
推送功能
除了命令组,你也可以把功能对象推送到 _gaq 队列。这个函数包含任意JavaScript和类似的命令组,它们能顺序执行被推送给 _gaq。这个技巧在用来向跟踪APIs发出请求并传回值时非常有用。例如,下面的代码构建了一个URL链接器,然后设置了href属性。
_gaq.push(function() {
var pageTracker = _gat._getTracker('UA-XXXXX-X');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
上面使用 _gat 的例子创建了一个跟踪器对象,但由于被指派给一个本地变量,这一功能外的代码不能使用这个变量。尽管这也是可接受的,你也可以用 _gaq._createAsyncTracker 模式来创建一个参数,可以全局读取的对象。下面的代码显示了如何来做。
_gaq.push(function() {
var pageTracker = _gaq._createAsyncTracker('UA-XXXXX-X', 'myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
_gaq.push(['myTracker._trackPageview']);
上面的例子在这一功能中创建了一个异步跟踪器,随后在命令组中进行了引用。
反向使用也是可以的。例如,如果你使用通过之前被推送命令组来创建一个异步跟踪器,就可以使用 _gaq.getAsyncTracker 模式。下面的代码展示如何来做。
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);
_gaq.push(function() {
var pageTracker = _gaq._getAsyncTracker('myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
一次推送,多个命令
除了针对每一次请求输入 _gaq.push(…) ,你也可以一次推送全部命令。下面的代码展示了这一技巧。
_gaq.push(
['_setAccount', 'UA-XXXXX-X'],
['_setDomainName', 'example.com'],
['_setCustomVar', 1, 'Section', 'Life & Style', 3],
['_trackPageview']
);
因为 _gaq.push 模拟了 Array.push 模式,所以这也是可行的,通过一次请求来推送多个项目。
_gaq.push(
['_setAccount', 'UA-XXXXX-1'],
['_trackPageview'],
['b._setAccount', 'UA-XXXXX-2'],
['b._trackPageview']
);
把命令推送给多个跟踪器也是可以的。
分离跟踪代码
如果你偏好把Google Analytics放在网页底部,你也应该知道并非一定要把跟踪代码放在底部。你可以跟踪代码拆分成两部分并获得异步加载的绝大部分好处,把前半部分放在页面顶部,剩下部分放在底部。因为第一部分跟踪代码对页面渲染几乎没有影响,你可以把这部分放在顶部然后把包含 ga.js 的那部分跟踪代码放在页面底部。
把跟踪代码分成两部分的网页可能看上去是这样的:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
Page Content
Page Content
(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);
})();
两部分代码都需要用自己的脚本标签进行封闭,但最初的异步跟踪代码只有最后6行需要放在底部。所有推送到 _gaq 的代码可以放在顶部。
常见错误
当使用异步或传统语法时,要记住一下几点:
如果你的模式名称没有进行恰当的大小写,你的模式请求将不会生效。例如:
_gaq.push(['_trackpageview']); // bad
_gaq.push(['_trackPageview']); // good
如果你的网页跟踪没有正确运行,检查一下你是否用了正确的模式名称。例如:
_gaq.push(['_setDomain', 'example.com']); // bad
_gaq.push(['_setDomainName', 'example.com']); // good
只有字符串(string)应该使用引号。 其他的都不应该使用引号。
任何不是字符串的值,如布尔值,实体对象(object literal),函数或数组,都不应该用引号括起来。只有在使用某些需要解释的东西如字符串,才能试用银行。如果你从传统语法迁移过来,任何函数参数在异步语法中都不应该使用引号。例如:
_gaq.push(['_setAllowLinker', 'false']); // bad
_gaq.push(['_setAllowLinker', false]); // good
例如:
_gaq.push(['_setAccount', ' UA-65432-1']); // bad
_gaq.push(['_setAccount', 'UA-65432-1']); // good