网络视频
这个 WebVitals 公用事业提供可配置的钩子,可收集设备容量的度量衡和 网络维度 每个页面视图的衡量标准,然后当用户离开页面时将这些衡量标准发送到报告端点.
量度我们报告
核心网络视频
其他数据(用于对收到的网络信息数据进行分类)
安装
npm install @bbc/web-vitals --save
安装 yarn
网络生命号项目使用 yarn 用于软件包管理。 建议安装 yarn 通过 npm 软件包管理器,当您安装到您的系统中时,它会与节点. js 捆绑在一起。 要安装 Yarn, 请运行此命令 :
npm install --global yarn
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 启用 | 布尔 | 没有 | 虚假 | { enabled: true } |
| 报告终点 | 字符串 | 对 | 不详 | { reportingEndpoint: 'https://url.to.report.to/analytics' } |
| 调用日志 | 函数 | 没有 | () => {} | { loggerCallback: (error) => console.error(error) } |
| 样本 | 整数 | 没有 | 100个 | { sampleRate: 5 } |
| 报告 | 对象 | 没有 | undefined | { reportParams: { pageType: 'STY' } |
| 获取 | 函数 | 没有 | window.fetch | 如果您支持没有本地抓取功能的浏览器, 允许您提供抓取小马填充 |
使用量
钩子可以多种方式配置:
enabled- 设定为true能够将这些指标发送到报告终点。 这样,只有在用户同意适当的隐私和适当的跟踪设置时,才能打开报告功能.reportingEndpoint- 终点,你想发送你的衡量标准loggerCallback- 函数,每当试图发送度量衡失败时都会使用.sampleRate- 提供1-100之间的数字将设定采样百分比,以防止后端报告服务器超载。 例如,asampleRate联 合 国5将意味着5%请求的度量衡将被发送到报告服务器.reportParams- 一个将定义附于报告终点的查询字符串参数的对象。 例如,提供{ pageType: 'STY' }会导致?pageType=STY附于报告终点.
import useWebVitals from "@bbc/web-vitals";
import logger from "./logger";
const Page = props => {
const enabled = isOnClient() && hasUserAcceptedTracking();
useWebVitals({
enabled,
reportingEndpoint: 'https://url.to.report.to/analytics',
loggerCallback = logger.error,
sampleRate: 50,
reportParams: { pageType: 'STY' },
});
return (
<PageComponents />
);
};
何时使用此工具
最好能用到您的应用程序的顶层。 在检查网站访问者是否需要根据当地有关法律接受任何个性化或跟踪许可时,您应恪尽职守,并利用这一点确定网站的价值 enabled 道具 (英语).
useEffect 钩子只是运行客户端,但在与服务器侧渲染结合使用此钩子时,您可能也希望包含一个代码是否运行客户端的检查,以确保您不会在服务器的能力和用户的能力之间获得不一致.
不使用此工具时
在非页面级别组件中,特别是如果这些组件可能多次被添加到一页.
在用户未为相关个性化或追踪许可提供许可的情况下,可能需要相关的地方法律.
捐款
Web Vitals 完全开源. 我们感谢任何贡献,无论是新的公用事业、故障修复还是总体改进。 请参看我们的主要贡献指南,可查阅: 网络维生数据库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
网络视频是 Apache 2.0 许可。 。 。 .