お好みのパッケージマネージャーで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はregionより優先されますregionstringデータリージョン：usまたはeutimeoutMsnumbergetResult()呼び出し全体のタイムアウト（ミリ秒）linkedIdstringログイン中のユーザーの内部アカウントID。同じデバイスを共有する訪問を関連づけられますtagstring識別リクエストに付与する自由形式のラベル（例：checkoutやlogin）debugbooleanスクリプトのライフサイクルとネットワーク動作をブラウザコンソールに出力しますscriptUrlstringエージェントスクリプトURLの完全な上書き — セルフホストやSubresource Integrity向け完全なAPIリファレンス、Webhook設定、高度なガイドでさらに深く学べます。