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