使用你偏好的包管理器将 SDK 添加到你的项目。
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/react以最简配置快速上手运行。
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}包含错误处理、加载状态和高级配置的生产级模式。
// app/api/webhook/tracio/route.ts — identification events land here in real timeimport crypto from 'crypto'function verify(raw: Buffer, header: string, secret: string) { const p = Object.fromEntries(header.split(',').map((kv) => kv.split('='))) const signed = Buffer.concat([Buffer.from(`${p.t}.`), raw]) const expected = crypto.createHmac('sha256', secret).update(signed).digest('hex') const a = Buffer.from(p.v1, 'hex') const b = Buffer.from(expected, 'hex') return a.length === b.length && crypto.timingSafeEqual(a, b)}export async function POST(req: Request) { const raw = Buffer.from(await req.arrayBuffer()) const sig = req.headers.get('x-tracio-signature') ?? '' if (!verify(raw, sig, process.env.TRACIO_WEBHOOK_SECRET!)) { return new Response('Invalid signature', { status: 401 }) } const event = JSON.parse(raw.toString()) if (event.bot.result === 'bot') { await blockVisitor(event.visitorId) } return new Response('OK')}用于初始化和配置 SDK 的所有可用选项。
publicKeystring来自仪表盘的公钥 — 可安全地随浏览器代码发布endpointstring用于代理路由部署的自定义端点 URL — 显式 URL 优先于 regionregionstring数据区域:us 或 eutimeoutMsnumber整个 getResult() 调用的超时时间(毫秒)linkedIdstring已登录用户在您系统内的账户 ID,用于关联共享同一设备的访问tagstring附加到识别请求上的自由格式标签,例如 checkout 或 logindebugboolean将脚本生命周期和网络活动输出到浏览器控制台scriptUrlstring完全覆盖 agent 脚本 URL — 用于自托管或 Subresource Integrity通过完整的 API 参考、webhook 配置和高级指南深入了解。