Ce guide vous accompagne pas à pas dans l'intégration de TRACIO à votre application. Vous installerez le SDK client, vous l'initialiserez avec votre clé publique et vous lirez votre premier résultat d'identification de visiteur.
Installez le SDK TRACIO avec votre gestionnaire de paquets préféré :
npm install @tracio/sdkOu avec pnpm :
pnpm add @tracio/sdkOu avec yarn :
yarn add @tracio/sdkSi vous n'utilisez pas de bundler, insérez la balise de script edge dans votre page. Elle s'auto-initialise avec la clé publique passée dans le paramètre de requête k :
<script src="https://edge.tracio.ai/s.js?k=PUBLIC_KEY" async></script>Importez Tracio et appelez Tracio.init() avec votre clé publique. Cela renvoie immédiatement une TracioInstance — l'agent sous-jacent se charge en arrière-plan.
import { Tracio } from "@tracio/sdk"
const tracio = Tracio.init({ publicKey: "5ca175fc...",})Votre clé publique peut être livrée sans risque dans le code côté client. Vous la trouverez dans votre tableau de bord, dans la section API Keys.
Tracio.init() accepte un objet TracioConfig :
| Option | Type | Par défaut | Description |
|---|---|---|---|
publicKey | string | requis | Votre clé publique. Copiez-la depuis votre tableau de bord. |
region | "us" | "eu" | aucune | Région de données facultative. Lorsqu'elle n'est pas définie, le SDK utilise l'endpoint générique https://edge.tracio.ai (sans résidence de données US implicite). Définissez-la explicitement pour fixer us ou eu. |
endpoint | string | auto | Endpoint API personnalisé (pour un endpoint proxifié en first-party). |
scriptUrl | string | auto | URL personnalisée pour le script de l'agent (pour un endpoint proxifié en first-party). |
linkedId | string | aucune | Identifiant reliant ce visiteur à une entité de votre système. |
tag | string | aucune | Étiquette libre attachée à la requête pour un filtrage ultérieur. |
debug | boolean | false | Consigne des diagnostics détaillés dans la console. |
timeoutMs | number | 15000 | Durée d'attente du résultat avant expiration. |
Appelez tracio.getVisitorId() pour recevoir un identifiant visiteur stable. Il s'agit d'une opération asynchrone.
const visitorId = await tracio.getVisitorId()
console.log(visitorId) // "X7fh2Hg9LkMn3pQr"Appelez tracio.getResult() pour recevoir le résultat d'identification complet, y compris la détection des bots.
const result = await tracio.getResult()
console.log(result.visitorId) // "X7fh2Hg9LkMn3pQr"
if (result.bot.detected) { console.warn("bot, confidence:", result.bot.confidence)}Le résultat a la forme suivante :
{ visitorId: "X7fh2Hg9LkMn3pQr", bot: { detected: false, confidence: 2, // 0-100 reasons: [], },}Utilisez les callbacks de cycle de vie pour réagir lorsque l'agent est prêt ou lorsqu'une erreur survient, et destroy() pour démonter l'instance :
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()Consultez Gestion des erreurs pour la liste complète des codes d'erreur et les helpers de nouvelle tentative.
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()}