Integración full-stack de Device Identification para Next.js (App Router + Pages Router). Añada identificación de visitantes, detección de bots y smart signals a su aplicación de Next.js en minutos.
Añada el SDK a su proyecto con su gestor de paquetes preferido.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactPóngase en marcha con la configuración mínima.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Patrones listos para producción con manejo de errores, estados de carga y configuración avanzada.
// 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')}Todas las opciones disponibles para inicializar y configurar el SDK.
publicKeystringSu clave pública desde el dashboard — segura para enviar al navegadorendpointstringURL de endpoint personalizada para despliegues enrutados por proxy — una URL explícita tiene prioridad sobre regionregionstringRegión de datos: us o eutimeoutMsnumberTiempo de espera de toda la llamada getResult(), en milisegundoslinkedIdstringSu ID de cuenta interno del usuario autenticado, para vincular visitas que comparten dispositivotagstringEtiqueta libre asociada a la solicitud de identificación, p. ej. checkout o logindebugbooleanRegistra el ciclo de vida del script y la actividad de red en la consola del navegadorscriptUrlstringAnulación completa de la URL del script del agente — para autoalojamiento o Subresource IntegrityProfundice con la referencia completa de la API, la configuración de webhooks y las guías avanzadas.
Referencia completa de la API, guías de integración y mejores prácticas.
Entrega de eventos en tiempo real, esquema del payload y verificación de firmas.
Configure notificaciones de eventos en tiempo real para cada identificación de dispositivo.
Añada fingerprinting de dispositivo a su aplicación de Next.js en menos de 5 minutos.