Schnellstart

Diese Anleitung führt Sie durch die Integration von TRACIO in Ihre Anwendung. Sie installieren das Client-SDK, initialisieren es mit Ihrem Public Key und lesen Ihr erstes Ergebnis der Besucher-Identifizierung aus.

Schritt 1: SDK installieren

Installieren Sie das TRACIO-SDK mit Ihrem bevorzugten Paketmanager:

npm install @tracio/sdk

Oder mit pnpm:

pnpm add @tracio/sdk

Oder mit yarn:

yarn add @tracio/sdk

Zero-Build-CDN-Snippet

Wenn Sie keinen Bundler verwenden, fügen Sie das Edge-Script-Tag in Ihre Seite ein. Es initialisiert sich automatisch mit dem Public Key im Query-Parameter k:

<script src="https://edge.tracio.ai/s.js?k=PUBLIC_KEY" async></script>

Schritt 2: SDK initialisieren

Importieren Sie Tracio und rufen Sie Tracio.init() mit Ihrem Public Key auf. Dies gibt sofort eine TracioInstance zurück — der zugrunde liegende Agent lädt im Hintergrund.

import { Tracio } from "@tracio/sdk"

const tracio = Tracio.init({
  publicKey: "5ca175fc...",
})

Ihr Public Key kann bedenkenlos im clientseitigen Code ausgeliefert werden. Sie finden ihn in Ihrem Dashboard unter API Keys.

Konfigurationsoptionen

Tracio.init() akzeptiert ein TracioConfig-Objekt:

Schritt 3: Besucher-ID ermitteln

Rufen Sie tracio.getVisitorId() auf, um einen stabilen Besucher-Identifikator zu erhalten. Dies ist ein asynchroner Vorgang.

const visitorId = await tracio.getVisitorId()

console.log(visitorId) // "X7fh2Hg9LkMn3pQr"

Schritt 4: Vollständiges Ergebnis auslesen

Rufen Sie tracio.getResult() auf, um das vollständige Identifizierungsergebnis einschließlich Bot-Erkennung zu erhalten.

const result = await tracio.getResult()

console.log(result.visitorId) // "X7fh2Hg9LkMn3pQr"

if (result.bot.detected) {
  console.warn("bot, confidence:", result.bot.confidence)
}

Das Ergebnis hat die Form:

{
  visitorId: "X7fh2Hg9LkMn3pQr",
  bot: {
    detected: false,
    confidence: 2,        // 0-100
    reasons: [],
  },
}

Schritt 5: Lebenszyklus und Fehler

Nutzen Sie die Lebenszyklus-Callbacks, um zu reagieren, wenn der Agent bereit ist oder etwas fehlschlägt, und destroy(), um die Instanz abzubauen:

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 it
tracio.destroy()

Siehe Fehlerbehandlung für die vollständige Liste der Fehlercodes und Retry-Helfer.

Häufige Integrationsmuster

Login-Schutz

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()
}

Zahlungsbetrugsprävention

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()
}

Nächste Schritte

• Funktionsweise — Signalerhebung und Identifizierungs-Pipeline verstehen
• JavaScript-SDK-Referenz — Vollständige SDK-API-Dokumentation
• Webhooks — Identifizierungsereignisse in Echtzeit auf Ihrem Server empfangen
• Bot-Erkennung — Tiefer Einblick in die Automatisierungserkennung