39

我想知道诸如 crazyegg.com 之类的网站如何在会话期间存储用户点击数据。显然有一些底层脚本存储了每次点击数据，但是这些数据是如何填充到数据库中的呢？在我看来，简单的解决方案是通过 AJAX 发送数据，但是当您考虑到几乎不可能设置跨浏览器页面卸载功能时，我想知道是否还有其他更高级的获取指标数据的方法。

我什至看到了一个记录每次鼠标移动的网站，我猜他们肯定不会在每次鼠标移动事件时将该数据发送到数据库。

所以，简而言之，我需要什么样的技术来监控我网站上的用户活动，然后存储这些信息以创建度量数据？我不打算重新创建 GA，我只是很想知道这种事情是如何完成的。

提前致谢

4

5 回答 5

39

事实证明，热图分析比仅捕获光标坐标要复杂得多。有些网站是右对齐的，有些是左对齐的，有些是 100% 宽度的，有些是固定宽度的——“居中”……页面元素可以绝对定位或相对定位，浮动等。哦，还有不同的屏幕分辨率甚至多显示器配置。

以下是它在HeatTest中的工作方式（我是创始人之一，由于规则的原因，必须透露）：

  1. JavaScript 处理 onClick 事件：（document.onclick = function(e){ }这不适用于<a>和<input>元素，必须破解你的方式）
  2. 脚本在表单中记录被点击元素的 XPath 地址（因为坐标不可靠，见上文）//body/div[3]/button[id=search] 和元素内的坐标。
  3. 脚本向服务器发送 JSONP 请求（由于浏览器的跨域限制，使用 JSONP）
  4. 服务器将此数据记录到数据库中。

现在，有趣的部分 - 服务器。

  1. 为了计算热图，服务器会在内存中启动浏览器的虚拟实例（我们使用 Chromium 和 IE9）
  2. 呈现页面
  3. 截图，
  4. 查找元素的坐标，然后构建热图。

它需要大量的cpu-power和内存使用。很多。因此，包括我们和 CrazyEgg 在内的大多数热图服务都有用于此任务的虚拟机和云服务器堆栈。

于 2012-05-13T23:28:32.453 回答
32

许多跟踪系统使用的基本思想是使用一个 1x1px 的图像，该图像是通过额外的 GET 参数请求的。该请求被添加到服务器日志文件中，然后处理日志文件以生成一些统计信息。所以一个极简的点击跟踪函数可能看起来像这样：

document.onclick = function(e){
  var trackImg = new Image();
  trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY;
}

AJAX 不会有用，因为它受同源策略的约束（您将无法向跟踪服务器发送请求）。而且您必须将 AJAX 代码添加到您的跟踪脚本中。如果您想发送更多数据（如光标移动），您可以将坐标存储在变量中，并定期轮询 GET 参数中更新路径的新图像。

现在有很多很多问题：

  • 跨浏览器兼容性——要使上述功能在所有重要的浏览器中工作，您可能需要添加 20 多行代码
  • 获取有用的数据
    • 许多页面是固定宽度、居中的，因此原始 X 和 Y 坐标不会让您在页面上创建点击的视觉叠加
    • 一些页面有液体宽度元素，或者使用最小和最大高度的组合
    • 用户可以使用不同的字体大小
    • 响应用户操作而出现在页面上的动态元素
  • 等等等等

完成跟踪脚本后，您只需要创建一个工具来获取原始服务器日志并将它们转换为闪亮的热图 :)

于 2010-03-22T23:42:42.050 回答
7

不知道 crazyegg 如何做到这一点的确切实现细节，但我会这样做的方式是将鼠标事件存储在一个数组中，我会通过 AJAX 定期发送到后端 - 例如，收集并发送捕获的鼠标事件每 30 秒发送到服务器。这减轻了为每个事件创建请求的压力，但它也确保我最多只会丢失 30 秒的数据。您还可以将发送添加到卸载事件，这会增加您获得的数据量，但您不会依赖它。

关于我如何实现它的一些示例（使用 jQuery 作为我的香草 JS 技能有点生疏）：

$(function() {

    var clicks = [];

    // Capture every click
    $().click(function(e) {
        clicks.push(e.pageX+','+e.pageY);
    });

    // Function to send clicks to server
    var sendClicks = function() {
        // Clicks will be in format 'x1,y1;x2,y2;x3,y3...'
        var clicksToSend = clicks.join(';');
        clicks = [];
        $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: {
                clicks: clicksToSend
            }
        });
    }

    // Send clicks every 30 seconds and on page leave
    setInterval(sendClicks, 30000);
    $(window).unload(sendClicks);
});

请注意，我没有以任何方式测试或尝试过这个，但这应该给你一个大致的想法。

于 2010-03-22T22:49:57.407 回答
2

如果您只是在寻找交互，则可以将您的替换<input type="button">为<input type="image">. 这些会自动提交用户点击位置的 X、Y 坐标。

jQuery 还有一个很好的mousemove 事件绑定实现，可以跟踪当前鼠标位置。我不知道你想要的最终结果，但你可以 setTimeOut(submitMousePosition, 1000) 每秒发送一个带有鼠标位置的 ajax 调用或类似的东西。

于 2010-03-22T22:50:57.887 回答
2

我真的不明白为什么您认为不可能将一个用户会话中的所有点击点存储到数据库中？

他们的主题是“查看人们点击的位置”一旦您收集到足够的数据，就很容易在批处理中制作热图。

人们真的低估了数据库、索引和分片。这里唯一困难的是为底层架构筹集足够的资金:)

于 2010-03-22T23:46:39.470 回答