Реализация 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]);
}

Popup с опросом

// 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% уходят из-за «Слишком дорого» — нужно работать с позиционированием или добавить сравнение тарифов.

Сроки

Exit intent детектор (десктоп + мобильные), попап с опросом, сохранение ответов: 2–3 рабочих дня.