การผสานรวม Device Identification แบบ full-stack สำหรับ Next.js (App Router + Pages Router) เพิ่มการระบุผู้เข้าชม การตรวจจับบอต และ smart signals เข้าสู่แอปพลิเคชัน Next.js ของคุณภายในไม่กี่นาที
เพิ่ม SDK เข้าสู่โปรเจกต์ของคุณด้วย package manager ที่คุณต้องการ
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
publicKeystringpublic key ของคุณจากแดชบอร์ด — ปลอดภัยที่จะส่งไปกับเบราว์เซอร์endpointstringURL endpoint ที่กำหนดเองสำหรับการติดตั้งแบบกำหนดเส้นทางผ่านพร็อกซี — URL ที่ระบุชัดจะมีผลเหนือ regionregionstringภูมิภาคข้อมูล: us หรือ eutimeoutMsnumberเวลาหมดเวลาของการเรียก getResult() ทั้งหมด เป็นมิลลิวินาทีlinkedIdstringID บัญชีภายในของคุณสำหรับผู้ใช้ที่ล็อกอินอยู่ เพื่อเชื่อมโยงการเข้าชมที่ใช้อุปกรณ์เดียวกันtagstringป้ายกำกับอิสระที่แนบไปกับคำขอระบุตัวตน เช่น checkout หรือ logindebugbooleanบันทึกวงจรชีวิตของสคริปต์และกิจกรรมเครือข่ายลงคอนโซลของเบราว์เซอร์scriptUrlstringแทนที่ URL ของสคริปต์เอเจนต์ทั้งหมด — สำหรับโฮสต์เองหรือใช้ Subresource Integrityเจาะลึกยิ่งขึ้นด้วยเอกสารอ้างอิง API ฉบับเต็ม การกำหนดค่า webhook และคู่มือขั้นสูง
เอกสารอ้างอิง API ฉบับเต็ม คู่มือการผสานรวม และแนวปฏิบัติที่ดีที่สุด
การส่งอีเวนต์แบบเรียลไทม์ สคีมาของ payload และการตรวจสอบลายเซ็น
กำหนดค่าการแจ้งเตือนอีเวนต์แบบเรียลไทม์สำหรับการระบุอุปกรณ์ทุกครั้ง
เพิ่ม device fingerprinting เข้าสู่แอปพลิเคชัน Next.js ของคุณภายในเวลาไม่ถึง 5 นาที