在React Webapp中审核和记录用户行为的最佳解决方案?

时间:2018-07-03 10:07:46

标签: reactjs logging analytics tracking

有哪些可用的库/工具来监视React Webapp中的用户行为?

我使用的是高级Web系统,现在已经变得非常重要,需要收集有关Webapp特定部分的用户行为的数据。示例我想跟踪每个用户在访问它的第一时间上花在配置文件时间上的时间。我也想将其记录在数据库中,以便进行统计并比较以前的统计。

工具必须:

  • 在React应用中工作。
  • 能够跟踪从可见的组件到不可见的时间。
  • 跟踪在单个页面上花费的时间。
  • 成为独立的独立工具,无需第三方。

我不在寻找:

  • 谷歌分析。
  • 显示用户点击位置的工具
  • 需要用户反馈的工具
  • cookie工具

1 个答案:

答案 0 :(得分:0)

大约两年后,我们发现了这个https://www.npmjs.com/package/timeme库,它几乎完全满足了上述需求。

我们将其用于反应:

const TimeMe = require('timeme.js');

getInitialState () {
  return {
    entryTime: new Date()
  };
},

componentDidMount () {
  window.addEventListener('beforeunload', this.loggingInteraction);
  TimeMe.startTimer(pageId);
},

async loggingInteraction () {
  TimeMe.stopTimer(pageId);
  const activeTimeOnPage = TimeMe.getTimeOnPageInSeconds(pageId) * 1000;
  TimeMe.resetRecordedPageTime(pageId);
  const totalTimeOnPage = T.millisecondsBetween(this.state.entryTime, T.now());
  // http send time on page request
},