Question

我已经看到了类似的问题，答案并不是我所追求的。由于这个问题略有不同，我再问一遍 - 希望你会同意这不是重复的。

我想做什么：生成一个图像，显示用户看到的我自己网站的内容（实际上，每个特定用户）。

为什么我要这样做：我有一些代码可以识别用户鼠标在很长一段时间内徘徊的页面上的位置（ppl倾向于将鼠标移动到感兴趣的区域）。我还记录点击位置。这些记录为X / Y co-ords。相对于页面的左上角

注意：这仅适用于进行可用性测试的用户。

我希望能够捕获屏幕截图然后使用服务器端的东西来覆盖图像上的鼠标数据（热点，鼠标路径等）

我遇到的问题是页面内容是非常动态（在显示期间而不是在服务器端生成期间） - 取决于用户类型，分配的角色等等...盒子可能会丢失 - 并且布局的其余部分也相应地重新调整 - 因此页面没有单一的“正确”屏幕截图。

选项1（感觉有点讨厌）：将走DOM并将其序列化并将其发送回服务器。然后我打开适当的浏览器并反序列化DOM。这应该工作，但听起来很难自动化。我怀疑相对URL等问题也存在一些问题。

选项2：页面加载完成后，捕获客户区域的图像（我理想情况下要捕获页面的整个长度，但怀疑这将更难）。大多数页面不需要滚动，因此这不应该是主要的问题 - 需要改进版本2.我会通过AJAX将此图像上传到服务器。

注意：我不希望看到我自己页面内容之外的任何内容（chrome，地址栏，任何内容）

我宁愿能够在最终用户电脑上安装任何东西（因此javascript）。如果唯一的可能性是客户端应用程序，我们可以做到这一点，但当将随机用户进行可用性测试时，这将意味着更麻烦（目前，我们只是向朋友/家人/豚鼠发送不同的URL）

Answer 1

一种替代解决方案是“记录”页面上主要结构元素的位置和尺寸：

（使用jQuery）

var pageStructure = {};

$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
    var elem = $(this);
    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    pageStructure[this.id] = [offset.left, offset.top, width, height];
});

然后您将序列化的pageStructure与鼠标数据一起发送，并根据该数据重建给定页面的布局。

Answer 2

我们总是谈论我工作的一件事是所有权的价值与从头开始制作东西所需的成本。对于我所拥有的团队，我们可以构建几乎任何东西......但是，在100美元范围内的每小时费率，它需要是一个非常有市场的工具或替换非常昂贵的产品，因为它值得我们的时间。所以，当涉及到这样的事情已经完成时，我会先考虑在别处寻找。想想你可以用额外的时间做些什么......

一个简单，快速的谷歌搜索发现：http://www.trymyui.com/它可能并不完美，但它指出这样的解决方案已经存在且已经正在运行/测试。或者，您可以下载this heatmap等脚本。显然，您需要添加一些内容，以便在创建地图时重新创建屏幕上的内容。

祝你好运。

Answer 3

IMO，不值得重新发明轮子。只需购买像ClickTale这样的现有解决方案。

http://www.clicktale.com/

使用javascript捕获网站截图

3 个答案: