React

Device Intelligence för React

Förstaparts React-hook för enhetsidentifiering. Lägg till besökaridentifiering, botdetektering och smart signals i din React-applikation på minuter.

Kom igång Boka demo

Snabbinstallation

Lägg till SDK:n i ditt projekt med din föredragna pakethanterare.

npmnpm install @tracio/react

yarnyarn add @tracio/react

pnpmpnpm add @tracio/react

Grundläggande användning

Kom igång med den minimala konfigurationen.

$tsx

import { useVisitorId } from '@tracio/react'
function App() {
  const { data: visitorId } = useVisitorId()
  return <div>Visitor: {visitorId}</div>
}

Avancerade mönster

Produktionsklara mönster med felhantering, laddningstillstånd och avancerad konfiguration.

Provider-konfiguration med laddnings- och feltillstånd — Klicka för att expandera

import { TracioProvider, useTracioResult } from '@tracio/react'
function App() {
  return (
    <TracioProvider
      publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}
      endpoint="/tracio/identify"
      timeoutMs={15000}
    >
      <ProtectedPage />
    </TracioProvider>
  )
}
function ProtectedPage() {
  const { data, isLoading, error } = useTracioResult()
  if (isLoading) return <Spinner />
  if (error) return <ErrorBanner message={error.message} />
  return (
    <div>
      <p>Visitor: {data?.visitorId}</p>
      <p>Bot: {data?.bot.detected ? 'detected' : 'clear'} ({data?.bot.confidence}/100)</p>
    </div>
  )
}

Konfigurationsalternativ

Alla tillgängliga alternativ för att initiera och konfigurera SDK:n.

publicKeystringDin publika nyckel från dashboarden — säker att skicka med i webbläsaren

endpointstringAnpassad endpoint-URL för proxyroutade driftsättningar — en explicit URL vinner över region

regionstringDataregion: us eller eu

timeoutMsnumberTimeout för hela getResult()-anropet, i millisekunder

linkedIdstringDitt interna konto-ID för den inloggade användaren, så att besök som delar enhet kan kopplas

tagstringFritt formulerad etikett kopplad till identifieringsbegäran, t.ex. checkout eller login

debugbooleanLoggar skriptets livscykel och nätverksaktivitet till webbläsarkonsolen

scriptUrlstringFullständig åsidosättning av agentskriptets URL — för self-hosting eller Subresource Integrity

Nästa steg

Gå djupare med den fullständiga API-referensen, webhook-konfiguration och avancerade guider.

Dokumentation

Fullständig API-referens, integrationsguider och bästa praxis.

Läs dokumentationen

Webhooks

Händelseleverans i realtid, nyttolastschema och signaturverifiering.

Visa webhooks