Реалізація Exit Intent Popup (опитування при виході) на сайті

Реалізація exit intent попапа з опитуванням

Exit intent popup з'являється, коли користувач збирається покинути сторінку — курсор рухається до верхньої частини екрана (браузер) або користувач натискає кнопку «Назад» (мобільні). Використовується для утримання (пропозиція знижки) або збору зворотного зв'язку (чому ви йдете?).

Детекція exit intent

// 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]);
}

Попап з опитуванням

// 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]);
}

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

Графік

Exit intent детектор (десктоп + мобільні), попап з опитуванням, збереження відповідей: 2-3 робочих дні.