网站分析 Web Analytics » 异步跟踪 http://www.webanalytics.org.cn 专注于网站分析工具、网站分析方法与网站分析实践 Fri, 25 Jun 2010 05:55:20 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Google Analytics推出异步跟踪 http://www.webanalytics.org.cn/google-analytics-launches-asynchronous-tracking/ http://www.webanalytics.org.cn/google-analytics-launches-asynchronous-tracking/#comments Fri, 04 Dec 2009 05:50:22 +0000 深蓝 http://www.webanalytics.org.cn/?p=271
  • 跟踪代码的加载速度更快，改善浏览器的执行效率
  • 增强数据收集的准确性
  • 消除因为JavaScript未完全加载引起的误差
    • 下面是异步跟踪的代码： 
    <script type="text/javascript">

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

  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
        'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();

</script>
    ]]>     从12月1日开始，Google Analytics推出了异步跟踪的方式，用户可以在同步跟踪与异步跟踪之间选择。异步的跟踪方式具有以下优点：

    1. 跟踪代码的加载速度更快，改善浏览器的执行效率
    2. 增强数据收集的准确性
    3. 消除因为JavaScript未完全加载引起的误差

    下面是异步跟踪的代码：

    <script type="text/javascript">

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

  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
        'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();

</script>

    这段代码最开始，在JavaScript中分配了一个变量名为_gap的数组。紧接着，在下面两行把两个API的调用放入了这个数组中。当跟踪代码初始化时，会将_gap从一个标准的数组转化成一个新的对象，然后执行之前放入的API调用。通过这个特性，你可以在跟踪代码被下载前，先将API调用准备好，而不用担心Race Condition（因为多线程执行造成的紊乱）。

    第二部分代码会并发的加载跟踪代码。这部分代码在一个匿名的方法中执行，它会建立一个新的Script标签并且通过合适的协议引用跟踪代码。这样做，可以减少页面加载的时间。注意这里很前卫的使用了HTML5中新的“async”标记，它会告诉浏览器这段JavaScript代码可以异步的方式来加载。Firefox3.6是第一款支持这个特性的浏览器。如果与疑问，可以参考HTML5 async specification。

    跟踪代码一旦被加载，会将_gap数组转化为一个Analytics _gaq 对象。这个对象会包装底层的_gap对象，并执行所有的命令，向Google Analytics发送数据。你页面上的代码甚至可以忽略这个事实，因为_gap.push这个语法可以在任何时候使用。在Asynchronous Tracking Usage Guide可以获得详细信息。

    这种新的跟踪方式现在处于Beta测试，所有Google Analytics的账户都可以使用。

    一个完整的例子：

    <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.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      ga.setAttribute('async', 'true');
      document.documentElement.firstChild.appendChild(ga);
    })();
  </script>
</body>
</html>
    ]]>     http://www.webanalytics.org.cn/google-analytics-launches-asynchronous-tracking/feed/ 0