介绍
Recruit-GrowingIO 是 GrowingIO 公司开发并维护的一个 npm 包，它提供了一组方法和类，可以方便地接入 GrowingIO 数据统计系统，让前端开发者轻松实现埋点统计功能。
GrowingIO 是一家专注于数据分析和数据化运营的公司，其提供了一整套数据采集、存储、处理和展示的技术解决方案，可以帮助企业更好地了解用户行为并进行精准的运营。
在使用 Recruit-GrowingIO 包之前，你需要先在 GrowingIO 官网注册账号并创建项目，在项目设置界面里获取到项目的 Project ID 和 Tracker Server。
安装 Recruit-GrowingIO
在项目根目录下执行以下命令：
npm install recruit-growingio --save
配置
在项目中引入 Recruit-GrowingIO 包：
import GrowingIO from 'recruit-growingio';
初始化 GrowingIO 实例：
const gio = new GrowingIO('PROJECT_ID', 'TRACKER_SERVER');其中 PROJECT_ID 和 TRACKER_SERVER 分别为你在 GrowingIO 官网上获取到的项目 ID 和 Tracker Server 地址。
事件追踪
在页面中需要追踪事件的元素上添加 data-growing-title 和 data-growing-content 属性，分别表示事件的标题和内容。
<button class="btn" data-growing-title="按钮点击" data-growing-content="埋点测试">按钮</button>
添加事件监听器，调用 gio.track() 方法触发事件统计：
document.querySelector('.btn').addEventListener('click', () => {
gio.track();
});可以在 gio.track() 方法中传入参数，用于对事件进行更细致的设置。例如：
gio.track('form', 'submit', {
name: 'test-form',
id: 1234,
data: {
value1: 'abc',
value2: 123,
},
});其中，第一个参数表示事件类别，第二个参数表示事件操作，第三个参数为事件属性对象，可以传入自定义属性。
用户信息追踪
在用户登录后，可以通过 gio.setUserId() 方法设置用户 ID，用于进行标识并追踪该用户的行为：
gio.setUserId('USER_ID');可以通过 gio.clearUserId() 方法清除当前用户 ID，用于用户退出登录等操作。
页面 PV 统计
在每个页面加载时，调用 gio.pv() 方法进行 PV 统计：
gio.pv();
可以在 gio.pv() 方法中传入参数，用于对页面进行更细致的设置。例如：
gio.pv('page', {
path: '/home',
title: '首页',
referrer: document.referrer,
time: new Date(),
});其中，第一个参数表示页面类型，第二个参数为页面属性对象，包含 path、title、referrer 等属性。
示例代码
完整的使用示例代码如下：
-- -------------------- ---- -------
------ --------- ---- --------------------
----- --- - --- ----------------------- ------------------
-------------------------------------------------------- -- -- -
------------
---
-------------------------
-------------- -
----- --------
------ -----
---
-- ------ --------------
------------------结语
Recruit-GrowingIO 包提供了一种方便、快捷的方式，让前端开发者可以轻松实现埋点统计功能，并与 GrowingIO 平台进行数据对接，为业务提供重要的数据支撑和决策依据。希望本文对大家的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/recruit-growingio