使用 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 坐标不会让您在页面上创建点击次数的视觉叠加
  • 某些页面具有 Liquid-width 元素，或使用 min- 和 max-height 的组合
  • 用户可以使用不同的字体大小
  • 响应用户操作而出现在页面上的动态元素

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

  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屋！