Типичная ситуация: интернет-магазин с 2000 посетителей в день, конверсия 0.3%. После внедрения поведенческих поп-апов с Exit intent и scroll depth конверсия выросла до 1.2%. Многие разработчики допускают ошибку, показывая pop-up по таймеру — это раздражает 70% пользователей. Мы используем комбинацию из 4–5 поведенческих поп-апов, которые учитывают контекст. Наши инженеры имеют сертификацию по JavaScript и 5-летний опыт, реализовали более 150 успешных проектов. Гарантируем качество и поддержку 30 дней.
Как настроить триггер exit intent без ложных срабатываний?
Самый эффективный триггер для лендингов — exit intent. Он срабатывает, когда пользователь резко направляет курсор к верхнему краю экрана. Ключевой параметр — порог чувствительности: 10 пикселей от края и скорость движения вверх >50 px/ms. Без этого фильтра pop-up будет показываться при каждом случайном движении. Для мобильных устройств exit intent не работает — там используем событие popstate при нажатии кнопки «Назад».
class ExitIntentDetector {
private threshold = 10;
private sensitivity = 50;
private triggered = false;
private lastY = 0;
private lastTime = 0;
constructor(private onExit: () => void) {
document.addEventListener('mousemove', this.handleMouseMove.bind(this));
// Мобильный fallback
history.pushState({ popup: true }, '');
window.addEventListener('popstate', () => {
if (!this.triggered) {
this.triggered = true;
this.onExit();
history.pushState({ popup: true }, '');
}
});
}
private handleMouseMove(e: MouseEvent): void {
if (this.triggered) return;
const now = Date.now();
const deltaY = e.clientY - this.lastY;
const deltaTime = now - this.lastTime;
const velocityY = deltaY / deltaTime;
if (e.clientY < this.threshold && velocityY < -this.sensitivity) {
this.triggered = true;
this.onExit();
}
this.lastY = e.clientY;
this.lastTime = now;
}
reset(): void {
this.triggered = false;
}
}
const detector = new ExitIntentDetector(() => {
showPopup('exit_offer');
});
Почему важно управлять очередностью pop-up?
Если не контролировать показ, пользователь увидит два или три окна одновременно — это раздражает и снижает конверсию. Менеджер состояния PopupManager решает проблему: он хранит в localStorage метки показанных окон и блокирует одновременное открытие. Кроме того, задаётся cooldown — по умолчанию 7 дней, после которого окно может появиться снова.
class PopupManager {
private shown = new Set<string>(
JSON.parse(localStorage.getItem('shown_popups') ?? '[]')
);
private currentPopup: string | null = null;
canShow(id: string, cooldownDays = 7): boolean {
if (this.currentPopup) return false;
const key = `popup_shown_${id}`;
const lastShown = localStorage.getItem(key);
if (!lastShown) return true;
const daysSince = (Date.now() - parseInt(lastShown)) / 86400000;
return daysSince >= cooldownDays;
}
show(id: string): void {
if (!this.canShow(id)) return;
this.currentPopup = id;
localStorage.setItem(`popup_shown_${id}`, Date.now().toString());
this.shown.add(id);
localStorage.setItem('shown_popups', JSON.stringify([...this.shown]));
document.getElementById(`popup-${id}`)?.classList.add('popup--visible');
document.body.classList.add('popup-open');
}
close(id: string): void {
this.currentPopup = null;
document.getElementById(`popup-${id}`)?.classList.remove('popup--visible');
document.body.classList.remove('popup-open');
}
}
const popups = new PopupManager();
Сравнение триггеров
Exit intent по конверсии (до 5%) превосходит таймерные pop-up (0.5-1%) в 5 раз. Scroll depth также эффективнее таймера в 3-4 раза на длинных страницах.
| Триггер | Сложность реализации | Эффективность | Типичное использование |
|---|---|---|---|
| Exit intent | Средняя | Высокая | Предложение скидки при уходе |
| Scroll depth | Низкая | Средняя | Показ контента после прочтения |
| Time on page | Низкая | Низкая | Общий оффер |
| Inactivity | Средняя | Средняя | Возврат внимания |
| Element visibility | Средняя | Высокая | Контекстные подсказки |
Пошаговый процесс внедрения
| Этап | Длительность | Результат |
|---|---|---|
| Аналитика поведения | 1-2 дня | Карта триггеров и сегментов |
| Разработка триггеров | 2-4 дня | Рабочие детекторы exit intent, scroll depth, etc |
| Верстка и дизайн pop-up | 1-2 дня | Адаптивные макеты |
| Интеграция с CRM/ESP | 1-2 дня | Автоматическая передача лидов |
| A/B-тестирование | 2-3 дня | Оптимизация конверсии |
| Документация и обучение | 1 день | Инструкции для команды |
Что входит в работу
- Аналитика: тепловые карты, сегментация, выбор триггеров под вашу аудиторию.
- Разработка: все триггеры (exit intent, scroll depth, element visibility, таймер бездействия) с PopupManager.
- Дизайн: адаптивные макеты в стиле вашего сайта — до 5 вариантов.
- Интеграция: CRM, ESP, системы аналитики (Google Analytics, Яндекс.Метрика).
- Трекинг: автоматическая фиксация показов, кликов, закрытий в dataLayer.
- Документация: описание триггеров, кода, инструкции для маркетолога.
- Поддержка: 30 дней после запуска — правки, донастройка, консультации.
Как A/B-тестирование повышает конверсию?
Проводим A/B-тесты: сравниваем таймерный pop-up против поведенческого. Результат — поведенческий даёт +180% конверсии при том же трафике. Тестируем разные офферы, заголовки, цвета. Закажите внедрение pop-up системы с A/B-тестированием.
Как настроить scroll depth и element visibility
Эти триггеры требуют минимального кода, но дают заметный прирост конверсии на страницах с длинным контентом.
function onScrollDepth(percentage: number, callback: () => void): () => void {
let fired = false;
const handler = () => {
if (fired) return;
const scrolled = window.scrollY + window.innerHeight;
const total = document.documentElement.scrollHeight;
if (scrolled / total >= percentage / 100) {
fired = true;
callback();
}
};
window.addEventListener('scroll', handler, { passive: true });
return () => window.removeEventListener('scroll', handler);
}
onScrollDepth(70, () => showPopup('mid_page_offer'));
function onElementVisible(selector: string, callback: () => void): void {
const el = document.querySelector(selector);
if (!el) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
observer.disconnect();
callback();
}
},
{ threshold: 0.5 }
);
observer.observe(el);
}
onElementVisible('#pricing-section', () => showPopup('pricing_helper'));
Подробнее об IntersectionObserver.
Трекинг показов
Каждый pop-up должен фиксировать impressions, clicks и closes. Мы интегрируем это через события gtag или dataLayer без дополнительного кода — трекинг автоматически подключается к PopupManager. Получите консультацию, чтобы оценить ваш проект. Свяжитесь с нами для обсуждения деталей.
Экономический эффект
Замена таймерных pop-up на поведенческие даёт рост конверсии в 3–5 раз при тех же затратах на трафик. Окупаемость наступает в течение первой недели за счёт снижения отказов и увеличения лидов. Под ключ реализуем систему за 3–5 дней.
Какие типичные ошибки допускают при настройке?
- Показ pop-up без cooldown — пользователь видит одно и то же на каждом визите.
- Игнорирование мобильных устройств — exit intent не работает, нужен popstate.
- Отсутствие менеджера очереди — два pop-up одновременно.
- Слишком агрессивный exit intent — срабатывает при обычном скролле.
Избежав этих ошибок, вы получите рост конверсии без ухудшения UX. Оценим ваш проект бесплатно.