Чому 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 кроків
- Налаштуйте детектор
useExitIntentз параметрами порогу та затримки. - Створіть компонент
ExitIntentPopupз опитуванням. - Реалізуйте backend-контролер для збереження відповідей.
- Інтегруйте в цільові сторінки (кошик, оформлення).
- Протестуйте на десктопі та мобільних, налаштуйте відображення.
Процес роботи: від аналітики до деплою
| Етап | Тривалість | Результат |
|---|---|---|
| Аналітика та узгодження | 0,5 дня | Прототип дизайну та текст опитування |
| Розробка детектора та попапа | 1 день | Hooks та компоненти React |
| Backend API та модель | 0,5 дня | Маршрут, валідація, збереження |
| Інтеграція та тестування | 0,5 дня | Перевірка на десктопі та мобільних |
| Деплой та документування | 0,5 дня | Код у репозиторії, інструкція |
Терміни орієнтовно: від 2 до 3 робочих днів. Вартість розраховується індивідуально залежно від складності інтеграції та необхідності кастомізації.
Що входить в роботу (deliverables)
- Код React-компонента
ExitIntentPopupта хукаuseExitIntentу ваш проєкт. - Backend контролер, модель та міграція для збереження відповідей.
- Документація з налаштування параметрів (поріг, затримка, питання).
- Інструкція для перегляду статистики в адмінці.
- Гарантія коректної роботи на останніх версіях Chrome, Firefox, Safari (десктоп та мобільні).
- Підтримка 1 місяць після деплою — відповідаємо на питання та виправляємо баги.
Порівняння з альтернативами
| Критерій | Саморобний popup | Готові сервіси (Sumo, OptinMonster) | Наше рішення під ключ |
|---|---|---|---|
| Гнучкість коду | Повна | Обмежена | Повна, з адаптацією під ваш стек |
| Збір даних у свою CRM | Через API | Експорт CSV | Пряма інтеграція з вашою системою |
| Вартість | Час розробника | $30-100/міс | Фіксована за проєкт |
| Продуктивність | Оптимізація під ваш проєкт | Завантаження скриптів від сервісу | Мінімальна вага, без зайвих запитів |
Наше рішення в 2-3 рази швидше за саморобне (готовий код + досвід) і не вимагає щомісячної плати.
Чому варто замовити реалізацію у нас?
Ви отримуєте готове, перевірене рішення, яке інтегрується у ваш проєкт за 2-3 дні. Ми гарантуємо надійність та точність детекції. Зв'яжіться з нами для консультації — оцінимо ваш проєкт і запропонуємо оптимальне рішення. Замовте реалізацію під ключ і почніть збирати дані для зростання конверсії.