SuperAPI AI 工具集

add-react-analytics

数据与分析

查看项目

更新于 10-16 05:49

技能介绍

用途:把 Temps 分析 SDK 接入 React 应用,实现页面浏览、自定义事件、页面离开、参与度心跳、Web Vitals 和可选会话录制等跟踪。

安装:npm install --ignore-scripts --save-exact @temps-sdk/react-analytics@0.0.4。安装前需说明其会改动依赖与 lockfile 并请求确认;核对 lockfile 记录的版本与 integrity(sha512-UMCA7nwvrUabu3Ro40zx0arhSsFhnYT41ddKChT8NebkBo+DjUK37UClujAzbE+1CIgRfYbP3VcHQwvzCvUlOw==)。对等依赖为 React 18 或 19。

主要能力与用法:包内自带 'use client',Next.js App Router 可直接在 Server Component 中导入 TempsAnalyticsProvider,无需自写客户端包装。属性均为扁平且可选,包括 basePath、domain、disabled、ignoreLocalhost(默认 true,localhost 静默)、autoTrackPageviews、autoTrackPageLeave、autoTrackSpeedAnalytics、autoTrackEngagement、heartbeatInterval、inactivityTimeout、engagementThreshold、enableSessionRecording、sessionRecordingConfig。不存在嵌套 autoTrack={{...}} 属性或 debug 属性。

basePath 与密钥:SDK 向 ${basePath}/event、/speed、/heartbeat 及 /session-replay 发送请求,默认 /api/temps。托管在 Temps 上无需配置;未托管在 Temps 时需把 basePath 指向 Temps 实例的绝对 ingest 地址,并传入项目级 ingestKey(pa...),该 key 设计上可公开在客户端 JS 中。

Hooks:useTrackEvent、useTempsAnalytics(上下文访问器)、useTrackPageview、usePageLeave、useEngagementTracking、useSpeedAnalytics、useScrollVisibility、useAnalytics(独立通用助手,需 { client })。注意 identify 目前为占位空实现,尚不可用,建议把用户属性作为 event_data 附带在 trackEvent 中;reset() 与 getVisitorId() 不存在。

适用场景:Next.js、Vite/CRA、Remix 等 React 应用接入 Temps 分析并做本地验证(可临时设 ignoreLocalhost={false})。

限制与验证:会话录制默认关闭,需 enableSessionRecording 与 sessionRecordingConfig 配置;会话录制开关控件使用另一套 API,本资料未展开。安装后可在 DevTools 网络面板确认 POST 与 2xx 响应,并在仪表盘查看事件、Web Vitals 与会话回放;类型检查建议运行项目已有脚本(如 npm run typecheck -- --noEmit),不要用 npx。