お好みのパッケージマネージャーでSDKをプロジェクトに追加します。
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/react最小限のセットアップで稼働させます。
import { useVisitorId } from '@tracio/react'function App() { const { data: visitorId } = useVisitorId() return <div>Visitor: {visitorId}</div>}エラー処理、ローディング状態、高度な設定を備えた本番対応のパターン。
import { TracioProvider, useTracioResult } from '@tracio/react'function App() { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!} endpoint="/tracio/identify" timeoutMs={15000} > <ProtectedPage /> </TracioProvider> )}function ProtectedPage() { const { data, isLoading, error } = useTracioResult() if (isLoading) return <Spinner /> if (error) return <ErrorBanner message={error.message} /> return ( <div> <p>Visitor: {data?.visitorId}</p> <p>Bot: {data?.bot.detected ? 'detected' : 'clear'} ({data?.bot.confidence}/100)</p> </div> )}SDKの初期化と設定に利用できるすべてのオプション。
publicKeystringダッシュボードから取得した公開鍵 — ブラウザに含めても安全ですendpointstringプロキシ経由デプロイ向けのカスタムエンドポイントURL — 明示的なURLはregionより優先されますregionstringデータリージョン：usまたはeutimeoutMsnumbergetResult()呼び出し全体のタイムアウト（ミリ秒）linkedIdstringログイン中のユーザーの内部アカウントID。同じデバイスを共有する訪問を関連づけられますtagstring識別リクエストに付与する自由形式のラベル（例：checkoutやlogin）debugbooleanスクリプトのライフサイクルとネットワーク動作をブラウザコンソールに出力しますscriptUrlstringエージェントスクリプトURLの完全な上書き — セルフホストやSubresource Integrity向け完全なAPIリファレンス、Webhook設定、高度なガイドでさらに深く学べます。