Разработка pop-up модулей на 1С-Битрикс

Разработка pop-up модулей на 1С-Битрикс

Всплывающее окно, которое появляется не вовремя, раздражает. То же окно, которое появляется в нужный момент с релевантным предложением, приносит подписчиков и продажи. Разница — в триггерах, таргетинге и техническом исполнении. В Битрикс нет встроенного конструктора pop-up'ов. Маркетплейсные решения обычно перегружены и конфликтуют с композитным кэшем. Кастомная разработка даёт полный контроль: что показываем, кому, когда и как часто.

Триггеры показа

Триггер — событие, которое инициирует показ pop-up. Технически каждый триггер — это JavaScript-обработчик, который вызывает функцию показа модального окна.

Exit-intent — курсор мыши перемещается к верхней границе viewport. Отслеживается через mouseleave на document.documentElement. Работает только на десктопе. На мобильных аналог — скролл вверх страницы (пользователь тянется к адресной строке). Детектируется через touchmove с анализом направления:

document.addEventListener('mouseleave', (e) => {
    if (e.clientY < 10) showPopup('exit-intent');
});

Глубина скролла — пользователь проскроллил 50%, 70%, до конца страницы. Используем IntersectionObserver на маркерном элементе, размещённом в нужном месте, или вычисляем процент через window.scrollY / (document.body.scrollHeight - window.innerHeight).

Время на странице — setTimeout с задержкой 15-30 секунд. Простейший триггер.

Неактивность — пользователь не двигает мышью и не скроллит N секунд. Реализуется через debounce-таймер, который сбрасывается на mousemove, scroll, keydown.

Клик по элементу — конкретная кнопка или ссылка. Стандартный addEventListener('click').

Количество просмотренных страниц — счётчик в sessionStorage. При каждом pageview инкрементируем; при достижении порога — показываем.

Таргетинг: кому показывать

Pop-up без таргетинга — спам. Условия показа проверяются на сервере (при генерации конфига) и на клиенте (при срабатывании триггера).

Серверные условия (формируются в PHP-компоненте):

• Группа пользователя: авторизован / гость / конкретная группа. Проверяется через $USER->GetUserGroupArray().
• Раздел сайта: показывать только в каталоге, только на главной, исключить корзину. Проверяется по $APPLICATION->GetCurDir().
• Тип устройства: десктоп / мобильный. Определяется по User-Agent или через \Bitrix\Main\Service\MicroService\BaseSender (если подключена аналитика Битрикс).
• UTM-метки: показать pop-up только посетителям из рекламной кампании. Проверяется $_GET['utm_source'] с сохранением в сессию.

Клиентские условия:

• Частота показа: не чаще раза в сутки / за сессию / за N визитов. Контролируется через localStorage с timestamp последнего показа.
• Закрытие: если пользователь закрыл pop-up — не показывать повторно. Записываем флаг popup_{id}_closed в localStorage.

Архитектура: компонент + инфоблок

Pop-up'ы удобно управлять через инфоблок. Каждый элемент — отдельный pop-up с настройками:

Компонент local:popup.manager подключается в header.php (или в шаблон сайта). Он выбирает активные pop-up'ы, фильтрует по серверным условиям и формирует JSON-конфигурацию, которую JavaScript использует для инициализации триггеров.

Совместимость с composite-кэшем

Composite cache кэширует HTML. Если конфигурация pop-up'ов зашита в HTML — на закэшированной странице будет устаревший набор. Решение стандартное для Битрикс: динамическая область \Bitrix\Main\Page\Frame или вынос конфигурации в отдельный AJAX-endpoint.

Предпочтительнее AJAX: при загрузке страницы JavaScript запрашивает /ajax/popup_config.php, получает JSON с массивом активных pop-up'ов и их настройками. Страница полностью кэшируется, конфигурация всегда актуальна.

Минус — дополнительный HTTP-запрос. На практике он весит 1-3 КБ и выполняется за 20-50 мс, что незаметно для пользователя.

Типовые шаблоны

Подписка на email. Форма с одним полем (email) и кнопкой. Отправка через AJAX в обработчик, который добавляет email в почтовый список Битрикс (\Bitrix\Sender\Internals\Model\PostingRecipientTable) или через API внешнего сервиса (Mailchimp, Unisender). Обязательно: двойное подтверждение (double opt-in) для соответствия ФЗ-152 / GDPR.

Промо-код. Показываем код скидки, копирование по клику. Код берётся из купонов модуля sale — \Bitrix\Sale\Internals\DiscountCouponTable. Pop-up может генерировать уникальный купон для каждого посетителя (привязка к FUSER_ID).

Обратный звонок. Форма: имя + телефон. Отправка создаёт лид в CRM Битрикс24 через REST API (crm.lead.add) или записывает в локальный инфоблок для ручной обработки.

Аналитика показов

Без аналитики непонятно, работает ли pop-up. Минимум — три метрики: показы, закрытия, конверсии (целевое действие). Данные отправляются в Яндекс.Метрику / Google Analytics через ym(COUNTER_ID, 'reachGoal', 'popup_show_' + popupId) или в собственную таблицу b_popup_stats.

Сроки