使用 JavaScript 记录热图的用户数据

Question

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

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

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

提前致谢

Answer 1

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

它在 HeatTest 中的工作原理（我是创始人之一，根据规则必须透露这一点）：

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

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

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

它需要大量的CPU 功率和内存使用。 很多。因此，大多数热图服务（包括我们和 CrazyEgg）都拥有用于此任务的虚拟机和云服务器堆栈。

Answer 2

许多跟踪系统使用的基本思想是使用 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 坐标无法让您在页面中创建点击的视觉叠加
  • 某些页面具有液体宽度元素，或使用最小高度和最大高度的组合
  • 用户可以使用不同的字体大小
  • 响应用户操作而出现在页面上的动态元素
• 等。

当您制定了跟踪脚本后，您只需要创建一个工具来获取原始服务器日志并将其转换为闪亮的热图： ）

Answer 3

不知道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);
});

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

Answer 4

如果您只是寻求交互，则可以将 替换为 。这些将自动与用户单击位置的 X、Y 坐标一起提交。

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

Answer 5

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

他们的座右铭是“查看人们点击的位置”
一旦收集到足够的数据，就可以很容易地在批处理过程中制作热图。

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