Next.js

В Next.js используйте @fingerru/react в клиентском компоненте. Для работы понадобится публичный API-ключ проекта. В быстром старте показано, как получить ключ и проверить запрос.

Установите пакетСкопировать ссылку

npm install @fingerru/react

Создайте клиентский компонентСкопировать ссылку

FingprintProvider и useVisitorData() работают в браузере. Поместите их в файл с директивой 'use client':

Вызов useVisitorData({ immediate: true }) отправляет запрос после монтирования компонента. Хук возвращает состояние запроса в isLoading и error, а результат — в data. Идентификатор находится в data.user.

'use client'

import { FingprintProvider, useVisitorData } from '@fingerru/react'

function VisitorData() {
  const { data, error, isLoading } = useVisitorData({ immediate: true })

  if (isLoading) return <p>Получаем данные...</p>
  if (error) return <p>Не удалось получить данные: {error.message}</p>

  return <p>Visitor ID: {data?.user}</p>
}

export function FingprintVisitor() {
  return (
    <FingprintProvider apiKey="pk_live_example">
      <VisitorData />
    </FingprintProvider>
  )
}

Замените pk_live_example на публичный ключ проекта и добавьте FingprintVisitor на нужную страницу. Чтобы запускать запрос по действию пользователя, установите immediate: false и вызовите getData() в нужном месте. После успешного запроса найдите событие по полю Visitor ID в кабинете.