三、数据采集

　　正确展示对应的版本后，要开始采集需要的数据了。有一个可选的数据，是当前版本有多少 PV （Page Views，访问量），如果需要记录这个数据的话，在正确版本加载完成之时要发送一个打点信息。不过很多需求中，具体版本的 PV 的精确数值可能不是很重要，而且要收集这个信息需要多一次打点操作，所以一般情况下这个数据是可选的。

　　必须的数据是测试区域内用户的点击信息。当用户在测试区域点击了鼠标左键（无论这个点击是点击在链接、文字、图片还是空白处），我们需要发送一条对应的打点信息到打点服务器。一般来说，这个打点信息至少需要包含以下数据：

　　当前 A/B 测试以及版本标识
　　点击事件的位置
　　点击时间戳（客户端时间）
　　当前点中的URL（如果点在非超链接区域，此项为空）
　　用户标识（比如 Cookie ID）
　　用户浏览器信息
　　为了尽可能精确地还原用户的点击位置，我们的页面对前端有比较高的要求，要求页面在不同的浏览器下有基本一致的表现，至少在IE6、7、8以及 Fiefox 下，页面横向的元素要精确一致，纵向上很难做到完全一致，但也要尽可能保持统一。另外，这样的测试也不太适合自适应宽度的页面，比较适合定宽的页面，为了避免不同分辨率下页面左右空白不同导致鼠标点击位置的不同，点击位置取的应该是相对于测试区域左上角的位置。除此之外，好再记录一下测试区域相对于页面内容左上角的位置，在后面还原点击分布图以及绘制热区图时会用到这个数据。

　　数据打点该如何发送以及如何存储呢？这要取决于你的打点服务器如何存储信息。

　　四、数据存储

　　我们使用了一台专用的服务器收集打点信息，为了能支持尽可多尽可能密集的打点请求，这台服务器的 apache 服务网站目录下只有两个静态文件，分别是 abtest.html 和 abtest.gif ，两者都是非常小的空白文件（空白图片）。访客端进行打点时，只需要以 GET 的方式带上相关的参数请求两个文件中的任意一个即可。比如：

　　?abid=1-a&clickBlockX=244&clickBlockY=372&clickBlockW=392&clickBlockH=76&clickTime=1263264082137&clickRX=233&clickRY=47&clickURL

=&clickBeaconID=123.180.140.*.1267882109577.3&browserType=FireFox

　　这个请求可以通过 Ajax 的方式发送，也可以通过 JS 在页面上创建 new Image() 对象的方式完成。

　　对打点服务器来说，这只是一条普通的 HTTP 请求，它会在日志里留下一条普通的日志记录，形如：

　　123.180.140.* - - [13/Jan/2010:15:21:15 +0800] "GET /abtest.gif?a=123&b=456&c=789 HTTP/1.1" 304 - "-" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.6 (KHTML， like Gecko) Chrome/4.0.266.0 Safari/532.6"

　　可以看到了，除了 JS 发送给我们的信息外，Apache 还帮我们记录了一些信息，比如访客 IP 、服务器时间、用户浏览器信息。

　　对于数据记录和存储来说，到这一步足够了。Apache 静态文件 + 日志的方式足够高效，基本不用担心性能的问题。剩下的，是另外一个问题，如何从 Apache 日志中读取打点信息并加以分析，这已经和前端无关了，并且是一个比较复杂的问题，将在后续日志中介绍。