简介
event-trackr 是一个前端事件跟踪库，它可以帮助你在网站或应用中管理和追踪各种事件的发生情况，例如页面浏览、按钮点击、表单提交等等。使用 event-trackr 可以方便地记录这些事件的发生时间、用户信息、设备信息等等，以便后续的统计分析或优化改进。
本文将详细介绍如何在你的项目中使用 event-trackr。
安装和引入
使用 npm 安装 event-trackr：
npm install event-trackr --save
在需要使用的代码中引入 event-trackr：
import eventTrackr from 'event-trackr';
基本用法
初始化
在项目初始化的时候，需要调用 eventTrackr 的 init 方法进行初始化，例如：
-- -------------------- ---- -------
------------------
------ ------------------- -- -------
---------- ---------------------------- -- -------------
--------- -
------- --------- -- -------
--------- -------- -- -------
---------- -------------------- -- -------
-------- ------------- -- -------
--
----------- -
----------- ----- -- -------------------------------
------- ---------- -- ---------
---------- ------- -- ----------
------------ --------- -- --------
--------------- --------------- -- ---------
------------ ----- -- -------
------------- ----- -- -------
--
---其中，必填的参数有 appId 和 serverUrl，appId 为应用标识，用于区分不同的应用或网站；serverUrl 为数据上传的服务器地址， event-trackr 会将事件数据上传到该地址，你需要提供一个后台接口进行接收和保存。
可选的参数有 userInfo 和 deviceInfo，它们用于记录事件发生时的用户信息和设备信息，可根据需要进行设置。
记录事件
在需要追踪的事件发生时，可以调用 eventTrackr 的 trackEvent 方法进行记录，例如：
-- -------------------- ---- -------
----- --------- - -
------ --------------- -- -------
----------- --- ----------------- -- --------------
----------- -
--------- ------------ -- -------
----------- ------- -- -------
--
--
----------------------------------其中，event、actionTime 是必填的参数，表示事件名称和事件发生时间；actionData 为事件数据，可以自定义需要记录的信息，例如按钮ID、按钮名称等等。
手动上传数据
event-trackr 默认会在页面加载完成后自动上传数据，但如果需要手动上传数据，可以调用 eventTrackr 的 uploadData 方法进行上传，例如：
eventTrackr.uploadData();
高级用法
自定义事件
你可以根据自己的业务需求自定义事件，例如追踪用户的行为路径、网页内容的展示情况等等。自定义事件的实现方法是在 event-trackr 的 init 方法中注册自定义事件名称和相应的处理函数，例如：
-- -------------------- ---- -------
------------------
------ -------------------
---------- ----------------------------
--------- -
------- ---------
--
----------- -
----------- -----
--
------------- -
------------- ------------------- -
-- -- ------------ -----
--
----------- ------------------- -
-- -- ---------- -----
--
--
---其中，customEvents 为自定义事件对象，每个事件包含了事件名称和对应的处理函数。
调用自定义事件时，可以通过以下方式进行：
eventTrackr.trackEvent({
event: 'show_article',
actionTime: new Date().valueOf(),
actionData: {
articleId: '123',
articleTitle: '前端开发实践',
},
});数据过滤
有些情况下，你可能不希望收集某些特定的事件数据，例如敏感信息、测试用例等。此时，你可以通过自定义的数据过滤函数来过滤这些数据。
在 event-trackr 的 init 方法中，可以注册数据过滤函数，例如：
-- -------------------- ---- -------
------------------
------ -------------------
---------- ----------------------------
--------- -
------- ---------
--
----------- -
----------- -----
--
----------- ------------------- -
-- ---------------- --- ------------ -
-- ---------
------ -----
- ---- -
------ ----------
-
--
---其中，dataFilter 为数据过滤函数，接收一个 eventData 参数表示要过滤的事件数据，返回值为过滤后的事件数据。
发送自定义请求头
有些情况下，你可能需要在数据上传时发送一些自定义的请求头信息，例如认证信息、用户令牌等。此时，你可以在 event-trackr 的 init 方法中配置 headers 选项，例如：
-- -------------------- ---- -------
------------------
------ -------------------
---------- ----------------------------
--------- -
------- ---------
--
----------- -
----------- -----
--
-------- -
---------------- ------- -----------------------------------------
--
---其中，headers 为请求头对象，每个属性表示一个请求头字段和对应的值。
示例代码
下面是一个简单的示例代码，演示了如何在页面上追踪按钮点击事件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
------- --------------------------
------- -----------------------------
------- --------------
------ ----------- ---- ---------------
-- --- ------------
------------------
------ -------------------
---------- ----------------------------
--------- -
------- ---------
--
----------- -
----------- -----
--
---
-- ---------
-------------------------------------------------------------- ---------- -
----- --------- - -
------ ---------------
----------- --- -----------------
----------- -
--------- ------------
----------- -------
--
--
-- ----
----------------------------------
---
----------------------------------------------------------------- ---------- -
----- --------- - -
------ ---------------
----------- --- -----------------
----------- -
--------- ---------------
----------- -------
--
--
-- ----
----------------------------------
---
---------
-------
-------总结
本文介绍了如何使用 event-trackr 库进行前端事件追踪，包括库的安装和引入、基本用法、高级用法和示例代码。希望能够对前端开发者进行一定的指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672181e8991b448e3911