使用JavaScript记录热图的用户数据 [英] Recording user data for heatmap with JavaScript

问题描述

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

I was wondering how sites such as crazyegg.com store user click data during a session. Obviously there is some underlying script which is storing each clicks data, but how is that data then populated into a database? It seems to me the simple solution would be to send data via AJAX but when you consider that it's almost impossible to get a cross browser page unload function setup, I'm wondering if there is perhaps some other more advanced way of getting metric data.

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

I even saw a site which records each mouse movement and I am guessing they are definitely not sending that data to a database on each mouse move event.

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

So, in a nutshell, what kind of technology would I need in order to monitor user activity on my site and then store this information in order to create metric data? I am not looking to recreate GA, I'm just very interested to know how this sort of thing is done.

提前致谢

推荐答案

许多跟踪系统使用的基本思想使用1x1px图像，该图像需要额外的GET参数。请求将添加到服务器日志文件中，然后处理日志文件以生成一些统计信息。
因此，极简主义点击跟踪功能可能如下所示：

The fundamental idea used by many tracking systems uses a 1x1px image which is requested with extra GET parameters. The request is added to server log file, then log files are processed to generate some statistics. So a minimalist click tracking function might look like this:

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

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

AJAX wouldn't be useful because it is subject to same-origin policy (you won't be able to send requests to your tracking server). And you'd have to add AJAX code to your tracking script. If you want to send more data (like cursor movements) you'd store the coordinates in a variable and periodically poll for a new image with updated path in the GET parameter.

现在有很多问题：

• 跨浏览器兼容性 - 使上述功能在所有重要的浏览器中都能正常工作目前您可能需要添加20行代码


• 获取有用数据
  
  
  
  
  • 许多页面都是固定宽度，居中，因此原始X和Y坐标不允许您创建页面上点击的视觉叠加
  
  
  • 某些页面具有液体宽度元素，或使用min的组合 - 和max-height
  
  
  • 用户可以使用不同的字体大小
  
  
  • 页面上显示的动态元素以响应用户的操作
  
  
  • cross-browser compatibility - to make the above function work in all browsers that matter at the moment you'd probably have to add 20 more lines of code
  • getting useful data
    • many pages are fixed-width, centered, so raw X and Y coordinates won't let you create visual overlay of clicks n the page
    • some pages have liquid-width elements, or use a combination of min- and max-height
    • users may use different font sizes
    • dynamic elements that appear on the page in response to user's actions

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

    When you have the tracking script worked out you only need to create a tool that takes raw server logs and turns them into shiny heatmaps :)

    这篇关于使用JavaScript记录热图的用户数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！