使用你偏好的包管理器将 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 优先于 regionregionstring数据区域：us 或 eutimeoutMsnumber整个 getResult() 调用的超时时间（毫秒）linkedIdstring已登录用户在您系统内的账户 ID，用于关联共享同一设备的访问tagstring附加到识别请求上的自由格式标签，例如 checkout 或 logindebugboolean将脚本生命周期和网络活动输出到浏览器控制台scriptUrlstring完全覆盖 agent 脚本 URL — 用于自托管或 Subresource Integrity通过完整的 API 参考、webhook 配置和高级指南深入了解。