使用你偏好的包管理器将 SDK 添加到你的项目。
npm install @tracio/angularyarn add @tracio/angularpnpm add @tracio/angular以最简配置快速上手运行。
import { Component, inject, effect } from '@angular/core'import { TracioService } from '@tracio/angular'@Component({ ... })export class AppComponent { private tracio = inject(TracioService) constructor() { // visitorId() is a signal — read it reactively effect(() => console.log(this.tracio.visitorId())) }}包含错误处理、加载状态和高级配置的生产级模式。
import { Component, inject } from '@angular/core'import { TracioService } from '@tracio/angular'@Component({ selector: 'app-protected', template: ` <div *ngIf="tracio.result() as result"> <p>Visitor: {{ result.visitorId }}</p> <p>Bot: {{ result.bot.detected ? 'detected' : 'clear' }} ({{ result.bot.confidence }}/100)</p> </div> `,})export class ProtectedComponent { // provideTracio({ publicKey }) is registered in app.config.ts readonly tracio = inject(TracioService)}用于初始化和配置 SDK 的所有可用选项。
publicKeystring来自仪表盘的公钥 — 可安全地随浏览器代码发布endpointstring用于代理路由部署的自定义端点 URL — 显式 URL 优先于 regionregionstring数据区域：us 或 eutimeoutMsnumber整个 getResult() 调用的超时时间（毫秒）linkedIdstring已登录用户在您系统内的账户 ID，用于关联共享同一设备的访问tagstring附加到识别请求上的自由格式标签，例如 checkout 或 logindebugboolean将脚本生命周期和网络活动输出到浏览器控制台scriptUrlstring完全覆盖 agent 脚本 URL — 用于自托管或 Subresource Integrity通过完整的 API 参考、webhook 配置和高级指南深入了解。