Опитування при виході: технічна реалізація та аналіз даних

Чому 30% користувачів йдуть, не купивши? Як опитування при виході виявляє причини

На сторінці оплати або в кошику 30% сесій раптово перериваються. Кожен втрачений клієнт забирає з собою потенційний прибуток. Гіпотез багато: ціна, складність, недовіра. Але без даних ви гадаєте. Ми вирішуємо це за допомогою exit intent popup, який з'являється в момент виходу і ставить одне запитання: «Чому ви йдете?». Відповіді накопичуються, і через тиждень ви бачите точну картину — 40% пішли через ціну, 25% не знайшли доставку, 15% просто дивилися. Далі — персоналізовані офери або A/B тести. Реалізація займає 2–3 дні, стек — React, TypeScript, Laravel. Наша команда має 5+ років досвіду в UX-аналітиці та розробила подібні інструменти для 20+ проєктів.

Як працює детекція exit intent: технічні деталі

Детектор відстежує дві події: mouseleave (курсор покидає вікно) для десктопа та popstate (кнопка «Назад») для мобільних. Поріг спрацьовування — 20 пікселів від верхнього краю, затримка перед включенням — 3 секунди (щоб не заважати в початковий момент). Докладніше про подію MouseEvent.

// hooks/useExitIntent.ts
interface UseExitIntentOptions {
  threshold?: number; // px від верхнього краю, за замовчуванням 20
  delay?: number; // мс затримки перед активацією детектора
  onExitIntent: () => void;
}

export function useExitIntent({
  threshold = 20,
  delay = 3000,
  onExitIntent
}: UseExitIntentOptions) {
  const triggered = useRef(false);

  useEffect(() => {
    let enabled = false;
    const timer = setTimeout(() => {
      enabled = true;
    }, delay);

    const handleMouseLeave = (e: MouseEvent) => {
      if (!enabled || triggered.current) return;
      if (e.clientY <= threshold) {
        triggered.current = true;
        onExitIntent();
      }
    };

    // Мобільні: виявлення через popstate (кнопка "Назад")
    const handlePopState = () => {
      if (!triggered.current) {
        triggered.current = true;
        history.pushState(null, '', location.href); // Скасовуємо навігацію
        onExitIntent();
      }
    };

    // Для мобільних — додаємо запис в історію
    history.pushState(null, '', location.href);
    window.addEventListener('popstate', handlePopState);
    document.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      clearTimeout(timer);
      document.removeEventListener('mouseleave', handleMouseLeave);
      window.removeEventListener('popstate', handlePopState);
    };
  }, [threshold, delay, onExitIntent]);
}

Альтернативні методи — visibilitychange або beforeunload — гірші: перший не спрацьовує при закритті вкладки, другий — занадто агресивний і блокує навігацію. Наш підхід — золота середина: точність без шкоди UX.

Popup з опитуванням: користувацький досвід

Попап з'являється з плавною анімацією, містить одне запитання з 5 варіантами відповіді. Після вибору та відправки — подяка. Важливо: ми запам'ятовуємо факт показу в sessionStorage, щоб не спамити в одній сесії.

// ExitIntentPopup.tsx
const EXIT_QUESTIONS = [
  {
    id: 'reason',
    text: 'Чому ви йдете?',
    options: [
      'Не знайшов потрібну функцію',
      'Занадто дорого',
      'Складно розібратися',
      'Просто дивлюся',
      'Інше',
    ],
  },
];

export function ExitIntentPopup() {
  const [visible, setVisible] = useState(false);
  const [reason, setReason] = useState('');
  const [done, setDone] = useState(false);

  // Не показувати якщо вже показували в цій сесії
  const alreadyShown = sessionStorage.getItem('exit_popup_shown');

  useExitIntent({
    delay: 5000,
    onExitIntent: () => {
      if (!alreadyShown) {
        setVisible(true);
        sessionStorage.setItem('exit_popup_shown', '1');
      }
    },
  });

  const submit = async () => {
    if (!reason) return;
    await fetch('/api/exit-intent', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ reason, page: window.location.pathname }),
    });
    setDone(true);
    setTimeout(() => setVisible(false), 2000);
  };

  if (!visible) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl">
        <button onClick={() => setVisible(false)} className="absolute top-4 right-4 text-gray-400">✕</button>
        {done ? (
          <p className="text-center text-green-600 font-medium py-4">Дякуємо за відповідь!</p>
        ) : (
          <>
            <h3 className="text-xl font-bold mb-2">Зачекайте!</h3>
            <p className="text-gray-600 mb-4 text-sm">Перш ніж піти — допоможіть нам стати кращими.</p>
            <p className="font-medium mb-3">Чому ви йдете?</p>
            <div className="space-y-2">
              {EXIT_QUESTIONS[0].options.map(opt => (
                <label key={opt} className="flex items-center gap-2 cursor-pointer">
                  <input type="radio" name="reason" value={opt} onChange={() => setReason(opt)} className="accent-blue-600" />
                  <span className="text-sm">{opt}</span>
                </label>
              ))}
            </div>
            <button onClick={submit} disabled={!reason} className="mt-4 w-full bg-blue-600 disabled:bg-gray-300 text-white rounded-lg py-2 text-sm">
              Відправити
            </button>
          </>
        )}
      </div>
    </div>
  );
}

Backend: збереження та аналіз

// ExitIntentController
public function store(Request $request): JsonResponse
{
    $request->validate([
        'reason' => 'required|string|max:200',
        'page' => 'nullable|string'
    ]);

    ExitIntentResponse::create([
        'reason' => $request->reason,
        'page' => $request->input('page'),
        'user_id' => auth()->id(),
        'session' => $request->session()->getId(),
    ]);

    return response()->json(['success' => true]);
}

Аналіз по сторінках допомагає знайти вузькі місця: якщо на pricing-сторінці 40% йдуть через «Занадто дорого» — потрібно працювати над позиціонуванням або додати порівняння тарифів.

Як правильно детектувати вихід користувача?

Універсального рішення немає. Для десктопа mouseleave — стандарт, але він не спрацьовує при закритті вкладки через Ctrl+W. Для мобільних — popstate з корекцією історії. Ми комбінуємо обидва методи і додаємо затримку, щоб не ловити випадкові рухи. В результаті точність детекції — 95%.

Навіщо зберігати причину відходу та сторінку?

Без прив'язки до сторінки дані марні. Якщо ви бачите «Занадто дорого» на сторінці товару — це сигнал до перегляду ціни. Якщо «Не знайшов функцію» на лендінгу — проблема в юзабіліті. Ми зберігаємо page та session, щоб аналізувати воронку та повторні візити.

Як реалізувати exit intent popup: 5 кроків

1. Налаштуйте детектор useExitIntent з параметрами порогу та затримки.
2. Створіть компонент ExitIntentPopup з опитуванням.
3. Реалізуйте backend-контролер для збереження відповідей.
4. Інтегруйте в цільові сторінки (кошик, оформлення).
5. Протестуйте на десктопі та мобільних, налаштуйте відображення.

Процес роботи: від аналітики до деплою

Терміни орієнтовно: від 2 до 3 робочих днів. Вартість розраховується індивідуально залежно від складності інтеграції та необхідності кастомізації.

Що входить в роботу (deliverables)

• Код React-компонента ExitIntentPopup та хука useExitIntent у ваш проєкт.
• Backend контролер, модель та міграція для збереження відповідей.
• Документація з налаштування параметрів (поріг, затримка, питання).
• Інструкція для перегляду статистики в адмінці.
• Гарантія коректної роботи на останніх версіях Chrome, Firefox, Safari (десктоп та мобільні).
• Підтримка 1 місяць після деплою — відповідаємо на питання та виправляємо баги.

Порівняння з альтернативами

Наше рішення в 2-3 рази швидше за саморобне (готовий код + досвід) і не вимагає щомісячної плати.

Чому варто замовити реалізацію у нас?

Ви отримуєте готове, перевірене рішення, яке інтегрується у ваш проєкт за 2-3 дні. Ми гарантуємо надійність та точність детекції. Зв'яжіться з нами для консультації — оцінимо ваш проєкт і запропонуємо оптимальне рішення. Замовте реалізацію під ключ і почніть збирати дані для зростання конверсії.