Esta guía le lleva paso a paso por la integración de TRACIO en su aplicación. Instalará el SDK de cliente, lo inicializará con su clave pública y leerá su primer resultado de identificación de visitante.
Instale el SDK de TRACIO con su gestor de paquetes preferido:
npm install @tracio/sdkO con pnpm:
pnpm add @tracio/sdkO con yarn:
yarn add @tracio/sdkSi no usa un bundler, coloque la etiqueta de script del edge en su página. Se autoinicializa con la clave pública en el parámetro de consulta k:
<script src="https://edge.tracio.ai/s.js?k=PUBLIC_KEY" async></script>Importe Tracio y llame a Tracio.init() con su clave pública. Esto devuelve una TracioInstance de inmediato; el agente subyacente se carga en segundo plano.
import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc...",})Su clave pública puede incluirse sin problema en el código del lado del cliente. La encontrará en su panel, en la sección API Keys.
Tracio.init() acepta un objeto TracioConfig:
| Opción | Tipo | Por defecto | Descripción |
|---|---|---|---|
publicKey | string | obligatorio | Su clave pública. Cópiela desde su panel. |
region | "us" | "eu" | ninguno | Región de datos opcional. Cuando no se define, el SDK usa el endpoint genérico https://edge.tracio.ai (sin residencia de datos en EE. UU. implícita). Defínala de forma explícita para fijar us o eu. |
endpoint | string | auto | Endpoint de API personalizado (para un endpoint con proxy de origen). |
scriptUrl | string | auto | URL personalizada para el script del agente (para un endpoint con proxy de origen). |
linkedId | string | ninguno | Identificador que vincula a este visitante con una entidad de su sistema. |
tag | string | ninguno | Etiqueta de formato libre adjunta a la solicitud para filtrar más adelante. |
debug | boolean | false | Registra diagnósticos detallados en la consola. |
timeoutMs | number | 15000 | Cuánto tiempo esperar el resultado antes de agotar el tiempo de espera. |
Llame a tracio.getVisitorId() para recibir un identificador de visitante estable. Es una operación asíncrona.
const visitorId = await tracio.getVisitorId()
console.log(visitorId) // "X7fh2Hg9LkMn3pQr"Llame a tracio.getResult() para recibir el resultado de identificación completo, incluida la detección de bots.
const result = await tracio.getResult()
console.log(result.visitorId) // "X7fh2Hg9LkMn3pQr"
if (result.bot.detected) { console.warn("bot, confidence:", result.bot.confidence)}El resultado tiene la forma:
{ visitorId: "X7fh2Hg9LkMn3pQr", bot: { detected: false, confidence: 2, // 0-100 reasons: [], },}Use los callbacks del ciclo de vida para reaccionar cuando el agente esté listo o cuando algo falle, y destroy() para desmontar la instancia:
const tracio = Tracio.init({ publicKey: "5ca175fc..." })
tracio.onReady((result) => { console.log("ready:", result.visitorId)})
tracio.onError((error) => { console.error("tracio error:", error.code, error.message)})
// later, when you no longer need ittracio.destroy()Consulte Gestión de errores para ver la lista completa de códigos de error y los helpers de reintento.
import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc..." })
async function handleLogin(email: string, password: string) { const visitorId = await tracio.getVisitorId()
const response = await fetch("/api/login", { method: "POST", body: JSON.stringify({ email, password, visitorId }), })
return response.json()}import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc...", tag: "payment",})
async function processPayment(paymentData: PaymentData) { const result = await tracio.getResult()
if (result.bot.detected) { throw new Error("Automated client detected") }
const response = await fetch("/api/payment", { method: "POST", body: JSON.stringify({ ...paymentData, visitorId: result.visitorId }), })
return response.json()}