@letar/forms — Declarative Form Components for React

Встроенная аналитика на уровне полей — отслеживание отказов, времени на поле и конверсии

Обзор

67% форм бросают до завершения. Поле пароля — 10,5% отказов. useFormAnalytics() даёт видимость того, где именно пользователи испытывают трудности.

import { AnalyticsPanel, createUmamiAdapter, useFormAnalytics } from '@letar/forms'

function ContactForm() {
  const analytics = useFormAnalytics({
    formId: 'contact-form',
    adapters: [createUmamiAdapter()],
  })

  return (
    <Form schema={ContactSchema} onSubmit={save}>
      <Form.Field.String name="name" />
      <Form.Field.String name="email" />
      <Form.Field.Textarea name="message" />
      <Form.Button.Submit>Отправить</Form.Button.Submit>

      {/* Панель только для разработки */}
      {process.env.NODE_ENV === 'development' && <AnalyticsPanel analytics={analytics} />}
    </Form>
  )
}

Что отслеживается

Метрика	Описание
Фокусы	Сколько раз каждое поле получало фокус
Время на поле	Миллисекунды, проведённые на каждом поле
Ошибки	Ошибки валидации по полям
Исправления	Сколько раз пользователь возвращался к полю
Конверсия	Процент заполненных полей (0-100%)
Отказ	Последнее поле, число заполненных, общее время при `beforeunload`
Завершение	Общее время и раскладка по полям при submit

Адаптеры

Umami

import { createUmamiAdapter } from '@letar/forms/analytics'
const adapter = createUmamiAdapter()

Яндекс Метрика

import { createYandexMetrikaAdapter } from '@letar/forms/analytics'
const adapter = createYandexMetrikaAdapter(12345) // ID счётчика

Отправляет цели: form_{formId}_field_focus, form_{formId}_abandon, form_{formId}_complete.

Google Analytics 4

import { createGtagAdapter } from '@letar/forms/analytics'
const adapter = createGtagAdapter()

PostHog

import { createPostHogAdapter } from '@letar/forms/analytics'
const adapter = createPostHogAdapter()

Свой адаптер

const myAdapter: AnalyticsAdapter = {
  name: 'my-analytics',
  track(event, formId) {
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify({ event, formId }),
    })
  },
}

API: useFormAnalytics(config?)

const analytics = useFormAnalytics({
  enabled: true,
  formId: 'contact-form',
  adapters: [createUmamiAdapter()],
  trackCorrections: true,
  onFieldFocus: (field, timestamp) => {},
  onFieldBlur: (field, timestamp, timeSpentMs) => {},
  onFieldError: (field, error) => {},
  onAbandon: (lastField, filledFields, totalFields) => {},
  onComplete: (totalTimeMs, fieldTimes) => {},
})

Возвращает:

Поле	Тип	Описание
`fieldAnalytics`	`Map<string, FieldAnalytics>`	Метрики по полям
`completionRate`	`number`	0-100%
`lastFocusedField`	`string \| null`	Последнее поле в фокусе
`totalTimeMs`	`number`	Время с момента монтирования
`totalErrors`	`number`	Общее число ошибок
`trackAbandon()`	`() => void`	Принудительно отправить abandon
`trackComplete()`	`() => void`	Принудительно отправить complete
`reset()`	`() => void`	Сбросить все метрики

AnalyticsPanel

Плавающая dev-панель с метриками в реальном времени:

<AnalyticsPanel
  analytics={analytics}
  position="bottom-right" // bottom-right | bottom-left | top-right | top-left
/>

Импорт

import { AnalyticsPanel, useFormAnalytics } from '@letar/forms'
import { createUmamiAdapter } from '@letar/forms/analytics'

Аналитика форм