Full-Stack-Integration von Device Identification für Next.js (App Router + Pages Router). Fügen Sie Ihrer Next.js-Anwendung in Minuten Besucheridentifikation, Bot Detection und Smart Signals hinzu.
Fügen Sie das SDK mit Ihrem bevorzugten Paketmanager zu Ihrem Projekt hinzu.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactMit dem minimalen Setup einsatzbereit werden.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Produktionsreife Muster mit Fehlerbehandlung, Ladezuständen und erweiterter Konfiguration.
// 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 verfügbaren Optionen zum Initialisieren und Konfigurieren des SDK.
publicKeystringIhr öffentlicher Schlüssel aus dem Dashboard — sicher im Browser auslieferbarendpointstringIndividuelle Endpunkt-URL für Proxy-geroutete Deployments — eine explizite URL hat Vorrang vor regionregionstringDatenregion: us oder eutimeoutMsnumberTimeout für den gesamten getResult()-Aufruf, in MillisekundenlinkedIdstringIhre interne Konto-ID für den angemeldeten Nutzer, damit Besuche auf demselben Gerät verknüpft werden könnentagstringFrei wählbares Label für die Identifikationsanfrage, z. B. checkout oder logindebugbooleanProtokolliert Script-Lebenszyklus und Netzwerkaktivität in der Browser-KonsolescriptUrlstringVollständige Überschreibung der Agent-Script-URL — für Self-Hosting oder Subresource IntegrityVertiefen Sie sich mit der vollständigen API-Referenz, der Webhook-Konfiguration und fortgeschrittenen Leitfäden.
Vollständige API-Referenz, Integrationsleitfäden und Best Practices.
Echtzeit-Ereigniszustellung, Payload-Schema und Signaturprüfung.
Konfigurieren Sie Echtzeit-Ereignisbenachrichtigungen für jede Geräteidentifikation.
Fügen Sie Ihrer Next.js-Anwendung in unter 5 Minuten Device-Fingerprinting hinzu.