События аналитики

Form Guardian предоставляет комплексные события аналитики для отслеживания взаимодействий с формой и жизненного цикла черновиков.

Обзор

События аналитики позволяют вам:

• Отслеживать, когда черновики сохраняются или восстанавливаются
• Мониторить истечение черновиков
• Интегрироваться с системами аналитики (Google Analytics, Mixpanel и т.д.)
• Показывать пользовательские UI уведомления
• Реализовать диалоги подтверждения перед восстановлением

Доступные события

onBeforeSave

Вызывается перед сохранением черновика в хранилище. Используйте для:

• Отслеживания попыток сохранения
• Валидации данных перед сохранением
• Отображения индикаторов загрузки

import { useFormAutosave } from '@form-guardian/react';

const { formRef } = useFormAutosave('my-form', {
  onBeforeSave: async (values) => {
    console.log('Собираюсь сохранить:', values);
    // Отследить в аналитике
    analytics.track('draft_save_start', { formId: 'my-form' });
    // Показать индикатор загрузки
    setSaving(true);
  },
});

onAfterSave

Вызывается после успешного сохранения черновика. Используйте для:

• Отслеживания успешных сохранений
• Обновления состояния UI
• Показа уведомлений об успехе

const { formRef } = useFormAutosave('my-form', {
  onAfterSave: async (values) => {
    console.log('Успешно сохранено:', values);
    // Отследить в аналитике
    analytics.track('draft_save_success', { formId: 'my-form' });
    // Обновить UI
    setSaving(false);
    showNotification('Черновик сохранен');
  },
});

onBeforeRestore

Вызывается перед восстановлением черновика в форму. Используйте для:

• Показа диалогов подтверждения
• Отслеживания попыток восстановления
• Валидации восстановленных данных

const { formRef } = useFormAutosave('my-form', {
  onBeforeRestore: async (values) => {
    console.log('Собираюсь восстановить:', values);
    // Показать диалог подтверждения
    const confirmed = await showConfirmDialog('Восстановить черновик?');
    if (!confirmed) {
      throw new Error('Восстановление отменено');
    }
    // Отследить в аналитике
    analytics.track('draft_restore_start', { formId: 'my-form' });
  },
});

Примечание: Если onBeforeRestore выбрасывает ошибку, восстановление будет отменено.

onAfterRestore

Вызывается после успешного восстановления черновика. Используйте для:

• Отслеживания успешных восстановлений
• Показа уведомлений
• Обновления состояния приложения

const { formRef } = useFormAutosave('my-form', {
  onAfterRestore: async (values) => {
    console.log('Успешно восстановлено:', values);
    // Отследить в аналитике
    analytics.track('draft_restore_success', { formId: 'my-form' });
    // Показать уведомление
    showNotification('Черновик восстановлен');
  },
});

onDraftExpired

Вызывается когда черновик истекает из-за TTL. Используйте для:

• Отслеживания истечений
• Уведомления пользователей
• Очистки связанного состояния

const { formRef } = useFormAutosave('my-form', {
  ttl: { days: 7 },
  onDraftExpired: async (formId) => {
    console.log('Черновик истек:', formId);
    // Отследить в аналитике
    analytics.track('draft_expired', { formId });
    // Уведомить пользователя
    showNotification('Ваш черновик истек');
  },
});

Интеграция с Google Analytics

import { useFormAutosave } from '@form-guardian/react';
import ReactGA from 'react-ga4';

function MyForm() {
  const { formRef } = useFormAutosave('contact-form', {
    onAfterSave: () => {
      ReactGA.event({
        category: 'Form',
        action: 'Draft Saved',
        label: 'Contact Form',
      });
    },
    onAfterRestore: () => {
      ReactGA.event({
        category: 'Form',
        action: 'Draft Restored',
        label: 'Contact Form',
      });
    },
    onDraftExpired: () => {
      ReactGA.event({
        category: 'Form',
        action: 'Draft Expired',
        label: 'Contact Form',
      });
    },
  });

  return <form ref={formRef}>...</form>;
}

Полный пример с аналитикой

import { useFormAutosave } from '@form-guardian/react';
import { useState } from 'react';

function AnalyticsForm() {
  const [saving, setSaving] = useState(false);
  
  const { formRef, clearDraft } = useFormAutosave('analytics-form', {
    autoRestore: true,
    ttl: { days: 7 },
    
    onBeforeSave: async (values) => {
      setSaving(true);
      analytics.track('draft_save_start', {
        formId: 'analytics-form',
        fieldCount: Object.keys(values).length,
      });
    },
    
    onAfterSave: async (values) => {
      setSaving(false);
      analytics.track('draft_save_success', {
        formId: 'analytics-form',
        dataSize: JSON.stringify(values).length,
      });
    },
    
    onBeforeRestore: async (values) => {
      const confirmed = confirm('Восстановить несохраненные изменения?');
      if (!confirmed) {
        throw new Error('Восстановление отменено пользователем');
      }
      analytics.track('draft_restore_accepted', {
        formId: 'analytics-form',
      });
    },
    
    onAfterRestore: async (values) => {
      analytics.track('draft_restore_success', {
        formId: 'analytics-form',
        restoredFields: Object.keys(values).length,
      });
    },
    
    onDraftExpired: async (formId) => {
      analytics.track('draft_expired', { formId });
    },
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    // Отправить форму
    await clearDraft();
    analytics.track('form_submit_success', {
      formId: 'analytics-form',
    });
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      {saving && <div>Сохранение...</div>}
      <input name="name" placeholder="Имя" />
      <input name="email" placeholder="Email" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Следующие шаги

• 📊 Пакетная обработка - Оптимизируйте сохранения
• 📈 Хук статуса черновика - Отслеживайте статус в реальном времени
• 🍳 Рецепты - Продвинутые паттерны