准确测量用户交互时间

Question

我有一个应用程序表单（使用c# / web forms / Asp.Net构建）。

该应用程序表单是向导样式 - 5个部分 - 大约30个各种输入字段分别在它们之间分割，并且有一个“下一步”按钮以进入以下部分。

我想尝试准确地测量完成表单所需的时间。

显然，我可以使用Asp的stopwatch并记录页面加载和最终按钮提交之间的时间段，但这不会完全准确。

原因是用户可能会中断流程 - 也许他们被其他事情打断或者去查找信息来填写表单。

因此，我想尽可能准确地表示。 我知道这可能涉及JavaScript，因为仅在每个完整部分结束时才会将表单发送回服务器。

但是，JavaScript不是我的语言，因此我不确定最佳策略。 我不要求完成的解决方案，只需要提供实现所需的可行方法建议即可。

- John Ohara

Answer 1

假设以下结构：

<form class="eform">
  <input name="" />
  <input name="" />
  ...
  <input name="" />
</form>

你有几个选项。
例如，当用户开始填写表单时？例如，当点击（将鼠标聚焦在）任何表单输入上时。
并且完成时，当提交按钮被点击时，或者更好的是，当该表单的提交事件被触发时：

var start=0, end;
$('.eform input').on('focus', function(e){
  start=Date.now()
})

$(document).on('submit','.eform', function(e){
   end=Date.now()-start;
   console.log("Seconds filling the form", parseFloat(end/1000).toFixed(2) )
});

- Evhz

Answer 2

这不是一个技术性的答案，而是一个“帮助你上路”的答案。

如果您想在用户端使用它，可以使用本地存储。如果您希望从未完成的表单中获得结果，还需要经常将信息发送到后端。

---

1. 为用户计算一个访问ID
2. 将开始日期时间与关联的ID添加到本地存储中
3. 频繁（每5秒左右）更新本地存储中的结束时间

如果表单出现故障/用户断开连接：

1. 如果用户回来，计算一个新的访问ID
2. 为新的访问ID设置开始日期时间
3. 为新的访问ID设置结束日期时间

---

在表单完成后，计算这些迭代之间的时间。把它们全部加起来，你就得到了用户在表单中行动的完整日志，包括用户断开连接的时间信息（你可能想要这些信息来检查表单是否适当地工作）。

- Randy

Answer 3

设置触发记录的事件，包括“mousemove”、“focus”和“change”。在文档上监听mousemove事件，在输入元素上监听其他事件。当它们触发时，在某个地方存储一个值mydata={}；

在任何一个事件第一次触发时，存储{start:event.timeStamp,lastTriggered:event.timeStamp,accumulated:0}；

在接下来的连续调度中，不再触碰开始字段，但是如果event.timeStamp - mydata.lastTriggered小于一个阈值（比如10000毫秒），则使用event.timeStamp更新lastTriggered，然后将mydata.accumulated += event.timeStamp - mydata.lastTriggered。最后，更新mydata.lastTriggered = event.timeStamp；

在提交时，将mydata转换为字符串并发送到服务器。

- ibrahim tanyalcin

---

发布后，我开始做一些笔记，记录我认为可能是可行的事情 - 结果正是你所确认的。 - John Ohara

没有问题 :))) - ibrahim tanyalcin