简介
bd-static-new 是一个轻量级的 npm 包，用于快速搭建基于百度统计的静态文档页，可以按照不同的页面和事件进行统计，支持定制化扩展和配置。
安装
使用 npm 安装 bd-static-new，执行以下命令：
npm install bd-static-new --save
安装完成后，在需要使用 bd-static-new 的代码中引入即可：
import { BaiduStatistics } from 'bd-static-new';如何使用
在使用 bd-static-new 进行页面统计时，需要先通过 BaiduStatistics 类来实例化一个百度统计对象，然后在需要统计的位置调用相应的方法即可。
实例化
实例化一个百度统计对象时，需要指定站点的唯一码（Site ID），该唯一码可以在百度统计管理页面中获取到，示例代码如下：
const siteId = 'xxxxxx'; // 在百度统计管理页面中获取的站点唯一码 const baiduStatistics = new BaiduStatistics(siteId);
页面统计
在使用 bd-static-new 进行页面统计时，需要先通过 baiduStatistics 对象来实例化一个新的 Page 对象，然后在需要统计的页面位置调用 pageView 方法。
const page = baiduStatistics.createPage('pageName');
page.pageView();其中，pageName 表示页面的名称，可以自由指定。
事件统计
在使用 bd-static-new 进行事件统计时，需要在需要统计的事件位置调用相应的方法，不同的事件类型对应着不同的方法，示例代码如下：
-- -------------------- ---- ------- ----- ---- - --------------------------------------- -- ---- ------------ --------- --------- ------- -------- ------ --------- ------ -- --- -- ---- ------------- --------- --------- ------- --------- ------ --------- ------ -- --- -- ---- ----------- --------- ------- ------- ------- ------ ------- ------ -- ---
其中，category 表示事件的分类，action 表示事件的操作，label 表示事件的标签，value 表示事件的值。
定制化扩展和配置
bd-static-new 支持自定义配置和扩展统计项，通过传入 options 参数来实现，示例代码如下：
-- -------------------- ---- -------
----- ------- - -
---------------- ---------- -- ---------------
------- - -- --------
------ -
--------- --------
------- --------
------ --------
------ --
--
--
--
----- --------------- - --- ----------------------- ---------其中，ignoreEventType 表示需要忽略的事件类型，events 表示自定义事件的配置信息。
总结
通过本文的介绍，读者可以了解到如何使用 bd-static-new 这个 npm 包进行页面和事件统计，同时也了解了如何进行定制化扩展和配置，希望能够帮助到前端开发人员提升网站数据分析和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b0e