什么是 engagement-coe？
Engagement-coe 是一个用于前端监控指标收集与指标计算的 npm 包，它可以帮助我们快速监控网页的用户行为，统计用户活跃度并将结果返回给后端。
engagement-coe 的优势
计算准确。engagement-coe 可以根据你需要的指标完整的记录用户行为，准确地计算每个指标的数据结果。
代码简洁。少量的代码就可以完成对指定指标的监控。
数据展示方便。engagement-coe 生成的数据结果，可以直接用来展示出一个用户的行为轨迹，看出页面使用效果。
安装
你可以通过下列命令，在你的项目中安装 engagement-coe：
npm install engagement-coe --save
使用
在你的项目中引入 engagement-coe：
import engagement from 'engagement-coe';
初始化
第一步是初始化 engagement，这个操作应该在 DOM 加载完成之后进行。
-- -------------------- ---- ------- ----- ------- - - ------------ ----- ------------------- ----- ------------ ----- ------------ ----- - ------------------------ ------ -- - -- ----------- ---- ----- --
options 是一个包含控制 engagement-coe 是否进行某种操作的对象。目前包含如下选项：
trackClicks（默认为true）：控制监控鼠标单击事件的开关。trackMouseMovement（默认为true）：控制监控鼠标移动事件的开关。trackScroll（默认为true）：控制监控页面滚动事件的开关。trackResize（默认为true）：控制监控页面大小改变事件的开关。
停止打点
如果你不想再进行页面数据监控了，你可以通过以下命令来停止 engagement-coe 的打点数据收集：
engagement.stop(); // 停止打点
示例代码
下面将展示一段通过 engagement-coe 来实现计算页面停留时间的示例代码：
-- -------------------- ---- ------- ----- ------- - - ------------ ----- ------------------- ----- -- ------------------------ ------ -- - -- ----------- ---- ----- --------------------- - --------------- --- ----- --------- - --- ----------------- --------------------- - ---------- - ----- ------- - --- ----------------- ----- -------- - -------- - ---------- - ----- ----- -------------- - -- ---- ----------- ------ -------- --- --------------------------------- ------ --- --
上述例子中，我们定义了一个包含以下选项的对象：
const options = {
trackClicks: true,
trackMouseMovement: true,
};这意味着 engagement-coe 会收集关于鼠标单击和鼠标移动事件的数据。
在 init 方法中，我们传入了一个回调函数，当 engagement-coe 完成了操作并且收集到了指定指标的数据时，它将把数据返回给这个回调函数。在上述例子中，我们只处理了 stayTime 这个指标。
随后，我们定义了一个变量 startTime，存储了当前时间。我们利用 window.onbeforeunload 事件，监控了页面的卸载事件，并在这个事件发生时，计算了当前时间与进入页面时的差，并将这个差值存储在了名为 stayTimeDetail 的变量中。
最后，我们调用 engagement.track() 方法来记录这个指标， false 参数说明这里是一个自定义的指标，而不是平台默认的指标。
总结
engagement-coe 作为一款优秀的前端指标收集和计算 npm 包，它的使用简单，代码量小，同时其提供的指标数据统计功能也是非常可靠和准确的。同时，由于其支持多种指标的收集和计算，开发者可以尝试将其用于不同场景的指标收集和分析，以期更好地衡量和优化产品的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf3b