Full-stack интеграция Device Identification для Next.js (App Router + Pages Router). Добавьте идентификацию посетителей, детекцию ботов и smart signals в своё приложение Next.js за минуты.
Добавьте SDK в свой проект с помощью предпочитаемого менеджера пакетов.
npm install @tracio/reactyarn add @tracio/reactpnpm add @tracio/reactЗапуститесь с минимальной настройкой.
// app/layout.tsximport { TracioProvider } from '@tracio/react'export default function Layout({ children }) { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> {children} </TracioProvider> )}Готовые к продакшену паттерны с обработкой ошибок, состояниями загрузки и расширенной конфигурацией.
// 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')}Все доступные опции для инициализации и настройки SDK.
publicKeystringВаш публичный ключ из дашборда — его безопасно отдавать в браузерendpointstringКастомный URL endpoint для развёртываний с проксированием — явный URL важнее regionregionstringРегион данных: us или eutimeoutMsnumberТаймаут всего вызова getResult(), в миллисекундахlinkedIdstringВаш внутренний ID аккаунта вошедшего пользователя, чтобы связывать визиты с одного устройстваtagstringПроизвольная метка для запроса идентификации, например checkout или logindebugbooleanПишет жизненный цикл скрипта и сетевую активность в консоль браузераscriptUrlstringПолная замена URL скрипта агента — для self-hosting или Subresource IntegrityУглубитесь с полным справочником API, настройкой webhook и продвинутыми руководствами.
Полный справочник API, руководства по интеграции и лучшие практики.
Доставка событий в реальном времени, схема payload и проверка подписи.
Настройте уведомления о событиях в реальном времени для каждой идентификации устройства.
Добавьте фингерпринтинг устройств в своё приложение Next.js менее чем за 5 минут.