在前端开发中，我们经常需要对用户的行为进行追踪和统计，以了解用户的习惯和喜好，从而优化产品的体验和提升用户满意度。npm 包 happen 就是一个用于追踪用户事件的工具，可以方便地收集和分析用户行为数据。
安装和引入
使用 npm 安装 happen：
npm install happen
然后在代码中引入 happen：
import happen from 'happen';
开始跟踪事件
在页面中需要跟踪的元素上绑定事件，然后使用 happen 进行事件跟踪。例如，我们需要跟踪一次按钮点击事件：
<button id="btn">点击我</button>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
happen('click', 'button', {
text: '点击我'
});
});happen 接收三个参数：
- type：事件类型，可以是任意字符串，比如 'click'、'scroll' 等。
- tag：事件标签，可以是任意字符串，比如 'button'、'link' 等。
- data：事件数据，可以是任意格式，比如对象、字符串等。
在上面的代码中，我们指定了事件类型为 'click'，事件标签为 'button'，事件数据为一个对象，包含了按钮的文本信息。可以根据实际需求自定义事件类型、标签和数据。另外，可以在全局配置中设置事件类型，具体用法见下文。
配置全局参数
可以在页面初始化时设置全局参数，这些参数会被应用于所有的事件跟踪。例如，我们想要将所有的事件类型都添加一个前缀：
happen.config({
eventTypePrefix: 'myapp/'
});然后我们就可以在代码中省略事件类型前缀：
happen('click', 'button', {
text: '点击我'
});在全局配置中还可以设置其它参数，例如：
- tagType：标签类型，可以是任意字符串，比如 'web'、'app' 等。
- dataFormat：数据格式，可以是 'json'、'form' 或 'query'。
- trackUrl：跟踪数据上传的地址。
上传数据
happen 支持在事件发生时实时上传数据或者缓存数据，待页面卸载时再一次性上传。上传数据需要指定上传地址，可以通过全局配置或者事件配置来设置：
happen.config({
trackUrl: 'https://example.com/tracking'
});
happen('click', 'button', {
text: '点击我',
trackUrl: 'https://another-example.com/tracking'
});在事件配置中指定上传地址会覆盖全局配置中的地址。
示例代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ---------- ------- ------ ------- --------------------- ------- ------------------------ ------- -------
-- -------------------- ---- -------
------ ------ ---- ---------
---------------
-------- ------
---------------- --------
---
----- --- - -------------------------------
----------------------------- -- -- -
--------------- --------- -
----- ------
------ ------
---
---以上代码设置了全局参数，然后在按钮点击事件中跟踪了一个事件，上传了事件数据。给按钮设置了背景颜色为蓝色，用于区分不同的点击事件。可以在控制台或者抓包工具中查看上传的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77425