Реализация Exit Intent Popup для удержания пользователя

Реализация Exit Intent Popup для удержания пользователя

Exit Intent — паттерн, при котором попап появляется в момент, когда пользователь собирается покинуть страницу. На десктопе это детектируется по движению мыши к верхнему краю вьюпорта (к кнопке закрытия вкладки или адресной строке). На мобильных устройствах — по нажатию кнопки «назад» или по событию visibilitychange.

Детектирование на десктопе

Ключевой момент: реагировать нужно не на любое движение вверх, а на быстрое движение к верхней части экрана с малым Y-координатой.

// exit-intent.ts
interface ExitIntentOptions {
  threshold?: number;       // px от верха, по умолчанию 20
  delay?: number;           // минимум секунд на странице перед показом
  cooldown?: number;        // ms до следующего показа (0 = показать один раз)
  onExit: () => void;
}

export function createExitIntentDetector(options: ExitIntentOptions) {
  const {
    threshold = 20,
    delay = 3,
    cooldown = 0,
    onExit,
  } = options;

  let triggered = false;
  let pageEnteredAt = Date.now();
  let lastTriggeredAt = 0;

  const STORAGE_KEY = 'exit_intent_last_shown';

  // Проверяем, не показывали ли уже в этой сессии / за период cooldown
  function shouldShow(): boolean {
    if (triggered && cooldown === 0) return false;
    if (Date.now() - pageEnteredAt < delay * 1000) return false;

    if (cooldown > 0) {
      const stored = sessionStorage.getItem(STORAGE_KEY);
      if (stored && Date.now() - Number(stored) < cooldown) return false;
    }

    return true;
  }

  function handleMouseLeave(e: MouseEvent) {
    // Двигаемся к верхнему краю
    if (e.clientY > threshold) return;
    // Достаточно быстро (скорость движения — производная позиции)
    if (!shouldShow()) return;

    triggered = true;
    lastTriggeredAt = Date.now();
    if (cooldown > 0) {
      sessionStorage.setItem(STORAGE_KEY, String(lastTriggeredAt));
    }

    onExit();
  }

  // Мобильный fallback: visibilitychange
  function handleVisibilityChange() {
    if (document.visibilityState === 'hidden' && shouldShow()) {
      triggered = true;
      onExit();
    }
  }

  document.addEventListener('mouseleave', handleMouseLeave);
  document.addEventListener('visibilitychange', handleVisibilityChange);

  return {
    reset() {
      triggered = false;
      sessionStorage.removeItem(STORAGE_KEY);
    },
    destroy() {
      document.removeEventListener('mouseleave', handleMouseLeave);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    },
  };
}

Попап компонент (React)

// ExitIntentPopup.tsx
import { useEffect, useRef, useState } from 'react';
import { createExitIntentDetector } from './exit-intent';

interface ExitIntentPopupProps {
  headline: string;
  subtext: string;
  ctaLabel: string;
  onCta: () => void;
  offer?: string;             // например, "Скидка 10% по промокоду EXIT10"
  delaySeconds?: number;
}

export function ExitIntentPopup({
  headline,
  subtext,
  ctaLabel,
  onCta,
  offer,
  delaySeconds = 5,
}: ExitIntentPopupProps) {
  const [visible, setVisible] = useState(false);
  const [email, setEmail] = useState('');
  const dialogRef = useRef<HTMLDialogElement>(null);
  const detectorRef = useRef<ReturnType<typeof createExitIntentDetector>>();

  useEffect(() => {
    detectorRef.current = createExitIntentDetector({
      delay: delaySeconds,
      cooldown: 24 * 60 * 60 * 1000, // показываем раз в сутки
      onExit: () => setVisible(true),
    });

    return () => detectorRef.current?.destroy();
  }, [delaySeconds]);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;

    if (visible) {
      dialog.showModal();
      // фокус на первый интерактивный элемент
      dialog.querySelector<HTMLElement>('input, button')?.focus();
    } else {
      dialog.close();
    }
  }, [visible]);

  function handleClose() {
    setVisible(false);
  }

  function handleCta() {
    onCta();
    setVisible(false);
  }

  function handleBackdropClick(e: React.MouseEvent<HTMLDialogElement>) {
    if (e.target === dialogRef.current) handleClose();
  }

  return (
    <dialog
      ref={dialogRef}
      onClick={handleBackdropClick}
      className="rounded-2xl p-0 max-w-md w-full shadow-2xl backdrop:bg-black/50"
    >
      <div className="p-8">
        {/* Кнопка закрытия */}
        <button
          onClick={handleClose}
          aria-label="Закрыть"
          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 text-xl leading-none"
        >
          ×
        </button>

        <h2 className="text-xl font-bold text-gray-900 mb-2">{headline}</h2>
        <p className="text-gray-600 text-sm mb-4">{subtext}</p>

        {offer && (
          <div className="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 mb-4">
            <p className="text-sm font-medium text-amber-800">{offer}</p>
          </div>
        )}

        <div className="flex gap-2">
          <input
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            placeholder="ваш@email.com"
            className="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            onClick={handleCta}
            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
          >
            {ctaLabel}
          </button>
        </div>

        <button
          onClick={handleClose}
          className="mt-3 text-xs text-gray-400 hover:text-gray-600 w-full text-center"
        >
          Нет, я ухожу
        </button>
      </div>
    </dialog>
  );
}

Аналитика показов и конверсий

Без измерений оптимизация попапа невозможна. Минимальный набор событий:

function trackPopupEvent(
  event: 'shown' | 'closed' | 'converted',
  meta?: Record<string, unknown>
) {
  // Google Analytics 4
  if (typeof gtag !== 'undefined') {
    gtag('event', `exit_intent_${event}`, {
      page_path: window.location.pathname,
      ...meta,
    });
  }

  // собственная аналитика
  fetch('/api/analytics/events', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    keepalive: true, // важно для событий при уходе со страницы
    body: JSON.stringify({
      event: `exit_intent.${event}`,
      url: window.location.href,
      timestamp: new Date().toISOString(),
      ...meta,
    }),
  });
}

keepalive: true критически важен для fetch в событиях, которые могут срабатывать при закрытии вкладки — без него браузер может отменить запрос.

Ошибки при реализации

Несколько типичных проблем:

Попап на каждом посещении — раздражает, конверсия падает. Нужен cooldown минимум на сутки через localStorage/cookie.

Показ на мобильных через mouseleave — событие не срабатывает. Нужен отдельный детектор через visibilitychange или pagehide.

Отсутствие <dialog> полифила — HTMLDialogElement поддерживается во всех современных браузерах (Chrome 37+, Firefox 98+, Safari 15.4+), но если нужна поддержка старее — используйте dialog-polyfill или кастомную реализацию через aria-modal.

Сроки

Базовый попап с детектором и аналитикой — один-два дня. A/B тестирование нескольких вариантов с автоматическим выбором победителя — ещё два-три дня.