Google Analytics 异步代码详解 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> Google Analytics 异步代码详解

Google Analytics 异步代码详解

浏览:3174次出处信息

Google Analytics 的异步代码发布很久了，大家都听说过。可是真正用的人，或者花点时间了解的人不多。的确当标准的代码已经能够满足监测需求，而且已经部署到位了，再换成异步纯粹是折腾和浪费精力。

当什么情况下，你必须开始了解异步代码，甚至是使用它呢？

1、Google Analytics 代码放在底部。

用 HTTPWatch 测试你的网站，如果页面的 Google Analytics GIF 请求很晚（个人觉得30秒就很晚了）。这种情况，说明你的网页的 Google Analytics 的监测部署其实已经不太理想。
HttpWatch Tracking GA GIF Request Delay 或者你页面的 JS 写了很多，难免有错误的 JS，影响了 Google Analytics 代码的执行。

2、Google Analytics 代码放在顶部。

按 Google Analytics 的官方建议，所有的电子商务网站的监测，Google Analytics 的代码应放在 <head></head> 之间。处理监测请求一定程度会导致影响了网页的加载速度。

如果是以上两种情况，使用异步代码就能够得到有效的改进。

第一步：准备代码并部署。

<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>

自行替换 UA-XXXXX-X 为你的帐户 ID。并复制粘贴到 <head></head> 之间。

第二步：检查是否数据接收正常，以及效果。

用 HTTPWatch 检查一下即可。你会发现，传统的监测代码，ga.js 与 GIF 请求非常的相近（文章上方的截图为例）。而异步代码的特点是：ga.js 的请求与 GIF 的请求不在一起了。

第三步：高阶的说明与应用：

Google Analytics 有两个通用对象，分别是 _gat 与 _gaq 。 _gaq 就是主要服务于新的异步代码的。举例详说：

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

在 _gat 对象下，有一个 _getTracker 的方法，创建一个基于 UA-ID 的新对象：pageTracker。然后通过调用 pageTracker 下的大量方法，如 _trackPageview()、_trackEvent() 等等，实现网页的监测。

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

异步则不尽相同。在 _gaq 对象下，只有一个 push 的方法，通过这个 push 的方法，将所有的监测请求当成数组传送，实现网页的监测。例如，上方通过 push 方法，实现了 trackPageview。

我尽可能通俗地解释了，如果你理解了我这么不专业的解释之后，我们开始实例应用：

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

第一个例子是实现了两个自定义监测，分别是自定义cookie的域名，自定义了一个变量。

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

_gaq.push(['t2._setAccount', 'UA-65432-2']);
_gaq.push(['t2._trackPageview']);

第二个例子是实现了两个 UA-ID 的监测。注意到第二个，使用了 t2点开头。t2 是任意命名的，你可以命名为 a1点，也可以命名为 b点。第一个为什么没有点呢？可以这样理解，第一个为“空点”。

最后总结：

我个人建议，只要你的网站加载 Google Analytics GIF 请求时间小于30秒，就不需要使用异步代码，否则最好使用异步代码。所有的学习资料链接如下：

异步代码的基本说明：http://code.google.com/intl/zh-CN/apis/analytics/docs/tracking/asyncTracking.html
异步代码的函数说明：http://code.google.com/intl/zh-CN/apis/analytics/docs/gaJS/gaJSApi_gaq.html#_gaq.push

最最后，给大家一个预告，一个Google Analytics的新功能即将与大家网页：

Google Analytics Tag Validatoin，帮助你检查代码是否添加完整正确。

http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=179348

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：JavaScript 压缩中的权衡

后一篇：时间相关的一些前后台知识 >>

文章信息

作者：Tenly 来源： Tenly 的互联网哲学
标签： Google 异步
发布时间：2010-12-09 23:00:16

建议继续学习

近3天十大热文