Full-stack Device Identification-integratie voor Next.js (App Router + Pages Router). Voeg binnen enkele minuten bezoekersidentificatie, botdetectie en smart signals toe aan je Next.js-applicatie.
Voeg de SDK toe aan je project met je favoriete package manager.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactGa van start met de minimale setup.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Productieklare patronen met foutafhandeling, laadstatussen en geavanceerde configuratie.
// app/api/webhook/tracio/route.ts — identification events land here in real timeimport crypto from 'crypto'function verify(raw: Buffer, header: string, secret: string) { const p = Object.fromEntries(header.split(',').map((kv) => kv.split('='))) const signed = Buffer.concat([Buffer.from(`${p.t}.`), raw]) const expected = crypto.createHmac('sha256', secret).update(signed).digest('hex') const a = Buffer.from(p.v1, 'hex') const b = Buffer.from(expected, 'hex') return a.length === b.length && crypto.timingSafeEqual(a, b)}export async function POST(req: Request) { const raw = Buffer.from(await req.arrayBuffer()) const sig = req.headers.get('x-tracio-signature') ?? '' if (!verify(raw, sig, process.env.TRACIO_WEBHOOK_SECRET!)) { return new Response('Invalid signature', { status: 401 }) } const event = JSON.parse(raw.toString()) if (event.bot.result === 'bot') { await blockVisitor(event.visitorId) } return new Response('OK')}Alle beschikbare opties voor het initialiseren en configureren van de SDK.
publicKeystringJe public key uit het dashboard — veilig om in de browser mee te sturenendpointstringAangepaste endpoint-URL voor proxy-gerouteerde deployments — een expliciete URL gaat vóór regionregionstringDataregio: us of eutimeoutMsnumberTime-out voor de hele getResult()-call, in millisecondenlinkedIdstringJe interne account-ID van de ingelogde gebruiker, zodat bezoeken vanaf hetzelfde apparaat gekoppeld kunnen wordentagstringVrij label dat aan het identificatieverzoek wordt gekoppeld, bijv. checkout of logindebugbooleanLogt de levenscyclus van het script en netwerkactiviteit naar de browserconsolescriptUrlstringVolledige override van de URL van het agentscript — voor self-hosting of Subresource IntegrityGa dieper met de volledige API-referentie, webhookconfiguratie en geavanceerde gidsen.
Volledige API-referentie, integratiegidsen en best practices.
Realtime event-levering, payload-schema en handtekeningverificatie.
Configureer realtime eventmeldingen voor elke device-identificatie.
Voeg in minder dan 5 minuten device-fingerprinting toe aan je Next.js-applicatie.