什么是beacons - 在Web Analytics中的应用（网站分析的灯塔）

    一直很想写篇关于beacon的文章，今天找资料时，无意间找到了一篇很好的英文文章，写的很好，现将其翻译过来，供大家学习。（省得我自己再写了！哈哈哈！让您见笑了啊！）

英文原文地址：
http://www.seolion.com/how-web-beacons-work/

    友情提示：阅读完本文后，如果您觉得还是有些迷茫，您不妨再仔细阅读下以上的英文原文。由于作者的翻译水平有限，可能有很多地方翻译的不太准确（虽然有些地方我已经阅读原文很多遍，但是有的地方还是觉得翻译的不太好。），请大家多多谅解吧。哈哈哈！！！

    Web beacons通常是一张1*1像素的透明图片,被包含在网页或Email中。它是客户端与Web Analytics数据收集服务器间进行数据交换的桥梁。

    下面让我们看看Web beacons是如何将数据传输到服务器的。

    Web beacons是通过javascript tags实现的。
    （原文：Web beacons through javascript tags）
    通常，Web Analytics数据收集方法是通过javascript tag实现的。每个需要被分析或被跟踪的网页会包含一些javascript的代码。例如，下面是statcounter分析工具（它是免费的，这点很重要）的代码：

<!-- Start of StatCounter Code -->
< script type="text/javascript">
    <!-- var sc_project=2296441; var sc_invisible=1; var sc_partition=21;
    var sc_security="0d580486"; //-->
</ script>
< script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js">
</ script>
< noscript>
    <div class="statcounter">
        <a class="statcounter" href="http://www.statcounter.com/">
            <img class="statcounter" src="http://c22.statcounter.com/counter.php?sc_project=2296441&java=0&security=0d580486&invisible=1"
            alt="web tracker" />
        </a>
    </div>
</ noscript>
<!-- End of StatCounter Code -->

    让我们来分析一下这段代码。
    前5行代码，是一些和statcounter账号相关的需要被初始化的变量（例如，sc_project, sc_invisible等等）。接下来的一行代码是引用一个statcounter的js文件。
    statcounter的代码做了很多的事情。例如，它会找到当前被访问的页面的referring URL是什么，你使用的浏览器的窗口大小以及你的IP等等。
   
    接下来我们就开始讲解今天的重点：Web beacon.
    Web analytics收集到的数据就是通过statcounter的脚本完成的。在完成上述数据收集的初始化操作之后（前5行代码），收集的数据将会被发送到statcounter的服务器。
    Web beacon(或者称它为“附属图片”)使这一切得以实现。首先，准备一个图片请求用的URL（通常在这个URL中包含了需要被收集的数据的所有变量及数值信息），然后Javascript生成一个<img>标签，其src属性就是刚才准备好的URL。当浏览器在准备显示这个图片时，statcounter.com的脚本会根据请求中的参数（在第一步中已经准备好的）来收集数据，然后statcounter.com会发送一张1*1像素的透明图片作为response（别忘了，它是一个图片请求），并最终在浏览器中显示出来（这一切，对于访问者而言，并没有感觉出有什么变化，因为它只是一张1*1像素的透明图片）。

>（下班了，明天就是中秋了，先回家了啊。放假回来再继续写啊。其它未翻译的部分我先>copy过来了。）（不好意思了各位。）

（中秋的休假太短了，三天一下子就过去了。我的心啊...，现在开始期待十一了！哈哈哈哈！现在继续把中秋前没翻译完的给翻译了。希望大家中秋过的都很愉快，并一起期待十一的到来吧！哈哈哈哈！）

    Web beacons是作为被监测网页的数据传输载体。
    （原文：Web beacons as part of a mobile specific web page）

    您可能注意到以上statcounter代码中的<noscript>部分。在<noscript>的代码中，有一个<img>标签。<img>标签中src属性的URL中就是所包含的一些需要被传递的基本变量信息。当浏览器可识别<script>标签，但无法支持其中的脚本时，<noscript>标签中的内容才会被执行。（如果浏览器支持javascript，那么<noscript>标签中的内容就不会被执行）。在移动设备上打开一个具有监测tag的网站时，通常会包含类似上面的<noscript>标签，此时，noscript中的代码会被执行。
    上面代码示例中的<script>和<noscript>在功能上的区别仅在于，是否有任何javascript代码被引用或发生数据交换。因为，<script>和<noscript>中的代码都会生成<img>图片标签，并且其src属性的值是准备好的URL。但是使用<noscript>时有个限制，不能像<script>所引用的javascript代码所完成的工作那样，在第一步就传递所有需要用到的值（例如，浏览器的窗口大小等），但我们可以在服务器级别控制<img>标签的输出，并找到需要传递的必要数据（如，客户端的IP地址，URL引用等）。(这一段，作者觉得翻译的不太好，大家可以参看英文原文的上下文，再仔细体会下。)

    至此，本文已经为大家介绍了采用page tag方式对网页进行分析的一般方法(page tag方式一般都会使用到beacon)，并且还谈到了采取此方法是如何对数据进行收集的。如何您使用过一些网站分析工具的话，如Google Analytics, Omniture SiteCatalyst等（感兴趣的读者，还可以参看我写的《国外主流网站分析工具介绍》这篇文章：http://yhz61010.iteye.com/admin/blogs/709282），您会发现，它们的统计方式和上面讲的基本是一样。不过Omniture还提供了另外一种方法来收集数据，那就是使用Omniture的javascript tag时，你可以预先提供一些想要监测的自定义变量，这样你就可以统计更多的数据，对访问者的行为进行更好的分析。