使用 Javascript 记录网页上的所有用户交互答案

【问题标题】：Recording all user interactions on a webpage using Javascript使用 Javascript 记录网页上的所有用户交互
【发布时间】：2015-11-12 17:50:39
【问题描述】：

我正在构建一个 Web 项目，很快将在测试阶段发布。我需要记录用户在网页上所做的每一项活动，例如：

页面滚动
点击进入内部页面，并在那里关注。
文字输入

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

我觉得，记录用户交互应该不是很难，像这样消耗 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]
    }
]

【问题讨论】：

我认为这个链接会有所帮助stackoverflow.com/questions/13012611/…
它比你想象的更复杂，因为页面上的每个元素“点击”都是简单记录的东西，它们是事件，是的，但除了被点击的元素之外，它们没有其他数据，也许还有一些页面元数据，记录用户滚动是一个坏主意，因为如果没有标准化，您将在几秒钟内拥有数千个。对于您的问题，我会使用JS localStorage tho - 它会通过页面加载将您的数据保存在客户端 PC 上，这解决了无论如何存储数据的问题。
正如@SidneyLiebrand 所说，这不是一个好主意，但相对时机最糟糕，因为当您更改页面时，您想重新启动计数器......这与您的所有时间无关
对于滚动记录，可以简单地记录动作开始的时间、页面位置、动作结束的时间和新的位置。那么动画这个（标准化）就不会太难了。

标签： javascript html

【解决方案1】：

在每个点击事件中，您都应该请求Date.now 来获得您的时间戳。然后你应该将它保存在另一个称为旧时间的var 中。下次用户单击时，您可以执行curTime - prevTime 以获得时间差。您可以使用初始时间扩展它。这样您就可以通过curTime - initTime 来查看自第一次点击以来的时间。

在您的 clickListeners 之外定义 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这个。否则，您将记录大量数据，这对您的网站来说会很沉重。

【讨论】：

小编辑，忘记设置新的prevTime，否则会和初始时间比较。