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

Question

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

我甚至看到一个记录每个鼠标移动的网站,我猜他们肯定不会在每个鼠标移动事件中将数据发送到数据库.

因此,简而言之,我需要什么样的技术来监控我网站上的用户活动,然后存储这些信息才能创建指标数据？我不打算重新创建GA,我只是非常有兴趣知道这种事情是如何完成的.

提前致谢

Answer 1

热图分析比仅仅捕获光标坐标更复杂.有些网站是右对齐的,有些是左对齐的,有些是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功耗和内存使用量.很多.因此,包括us和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作为我的vanilla 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);
});

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