Integrazione full-stack di Device Identification per Next.js (App Router + Pages Router). Aggiunga identificazione dei visitatori, bot detection e smart signals alla sua applicazione Next.js in pochi minuti.
Aggiunga l'SDK al suo progetto con il gestore di pacchetti che preferisce.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactDiventi operativo con la configurazione minima.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Pattern pronti per la produzione con gestione degli errori, stati di caricamento e configurazione avanzata.
// 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')}Tutte le opzioni disponibili per inizializzare e configurare l'SDK.
publicKeystringLa sua chiave pubblica dalla dashboard — può essere distribuita nel browser in sicurezzaendpointstringURL endpoint personalizzato per i deployment instradati tramite proxy — un URL esplicito prevale su regionregionstringRegione dati: us o eutimeoutMsnumberTimeout dell'intera chiamata getResult(), in millisecondilinkedIdstringIl suo ID account interno per l'utente autenticato, così le visite che condividono un dispositivo possono essere collegatetagstringEtichetta libera associata alla richiesta di identificazione, es. checkout o logindebugbooleanRegistra il ciclo di vita dello script e l'attività di rete nella console del browserscriptUrlstringOverride completo dell'URL dello script agent — per self-hosting o Subresource IntegrityApprofondisca con il riferimento API completo, la configurazione dei webhook e le guide avanzate.
Riferimento API completo, guide all'integrazione e best practice.
Recapito degli eventi in tempo reale, schema del payload e verifica della firma.
Configuri notifiche di eventi in tempo reale per ogni identificazione del dispositivo.
Aggiunga il fingerprinting del dispositivo alla sua applicazione Next.js in meno di 5 minuti.