javascript - 使用 Javascript 记录网页上的所有用户交互

Question

我正在构建一个网络项目，很快将在测试阶段发布。我需要记录用户在网页上执行的每一项事件，例如:

• 页面滚动
• 点击内部页面，然后按照该页面进行操作。
• 文本输入

我需要捕获这些事件及其相对发生时间。理想情况下，用户 session 的可播放视频。我进行了研究，但我得到的解决方案仅允许捕获点击事件，而无需相对计时信息。

我觉得，记录用户交互应该不是很困难，并且像这样使用 json 数据的解析器应该能够重播视频:

[
    {
        "time": 0,
        "page": "/page1",
        "event": "new_page",
        "locXY": [50,23]
    },
    {
        "time": 3.45,
        "page": "/page1",
        "event": "scroll",
        "locXY": [50,400]
    },
    {
        "time": 0,
        "page": "/page2",
        "event": "click",
        "locXY": [70,450]
    }
]

Answer 1

在每次点击事件中，您应该请求 Date.now 来获取时间戳。然后您应该将其保存在另一个名为 old time 的 var 中。下次用户单击时，您可以执行 curTime - prevTime 来获取时间差。您可以用初始时间来扩展它。这样您就可以通过执行 curTime - initTime 来查看自第一次点击以来已经过去了多少时间。

在 clickListener 之外定义 prevTime 和 initTime。

简而言之:

//first click:
var curTime = Date.now;
prevTime = curTime;
initTime = curTime;

//Second click:
var curTime = Date.now;
var deltaTime = prevTime - curTime;
var timeSinceInit = initTime - curTime;

// define the new previous timestamp.
prevTime = curTime;

// then parse the data
{
    "time": deltaTime,
    "timeStamp": timeSinceInit,
    "page": "/page1",
    "event": "click",
    "locXY": [mouseX,mouseY]
}

编辑:

刚刚来找我，你可能应该 throttle这。否则，您将记录大量数据，这对您的网站来说将是沉重的。