Snelstart

Deze handleiding leidt je door de integratie van TRACIO in je applicatie. Je installeert de client-SDK, initialiseert deze met je public key en leest je eerste resultaat van de bezoekersidentificatie uit.

Stap 1: De SDK installeren

Installeer de TRACIO-SDK met je favoriete package manager:

npm install @tracio/sdk

Of met pnpm:

pnpm add @tracio/sdk

Of met yarn:

yarn add @tracio/sdk

Zero-build-CDN-snippet

Als je geen bundler gebruikt, plaats je de edge-scripttag in je pagina. Deze initialiseert zichzelf automatisch met de public key in de query-parameter k.

Kies vanaf waar het script laadt. Sommige netwerken en browserextensies blokkeren verzoeken aan analytics-domeinen van derden: bedrijfsfilters, blockers op DNS-niveau, regionale beperkingen, privacy-extensies. Geserveerd vanaf je eigen subdomein is het script een first-party-verzoek op je site en blijft het werken in zulke omgevingen — zie Eigen domeinen:

<script src="https://metrics.yoursite.com/s.js?k=PUBLIC_KEY" async></script>

Of laad het vanaf het gedeelde edge-domein, de snelste manier om te beginnen:

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

Stap 2: De SDK initialiseren

Importeer Tracio en roep Tracio.init() aan met je public key. Dit geeft direct een TracioInstance terug — de onderliggende agent laadt op de achtergrond.

import { Tracio } from "@tracio/sdk"

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

Je public key kan zonder bezwaar in client-side code worden uitgeleverd. Je vindt hem in je dashboard onder API Keys.

Configuratieopties

Tracio.init() accepteert een TracioConfig-object:

Stap 3: Een bezoekers-ID verkrijgen

Roep tracio.getVisitorId() aan om een stabiele bezoekersidentificator te ontvangen. Dit is een asynchrone operatie.

const visitorId = await tracio.getVisitorId()

console.log(visitorId) // "X7fh2Hg9LkMn3pQr5tBvQw3xZa9mK2pL4nR8dT6y"

Stap 4: Het volledige resultaat uitlezen

Roep tracio.getResult() aan om het volledige identificatieresultaat te ontvangen, inclusief botdetectie.

const result = await tracio.getResult()

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

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

Het resultaat heeft de vorm:

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

Stap 5: Levenscyclus en fouten

Gebruik de levenscyclus-callbacks om te reageren wanneer de agent gereed is of wanneer er iets misgaat, en destroy() om de instantie af te breken:

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

Zie Foutafhandeling voor de volledige lijst met foutcodes en retry-helpers.

Veelvoorkomende integratiepatronen

Loginbeveiliging

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

Betalingsfraudepreventie

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

Volgende stappen

• Hoe het werkt — Begrijp de signaalverzameling en de identificatiepijplijn
• JavaScript-SDK-referentie — Volledige SDK-API-documentatie
• Webhooks — Ontvang identificatiegebeurtenissen in realtime op je server
• Data API — Lees bezoekers, sessies en velocity vanuit je backend
• Botdetectie — Diepgaande blik op automatiseringsdetectie