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

Розробка pop-up модулів на 1С-Bitrix

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

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

Триггер — подія, яка ініціює показ 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 (якщо підключена аналітика Bitrix).
• 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: динамічна область \Bitrix\Main\Page\Frame або вивіз конфіга в окремий endpoint.

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

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

Типові шаблони

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

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

Зворотний дзвінок. Форма: ім'я + телефон. Відправка створює лід у CRM Bitrix24 через REST API (crm.lead.add) або записує в локальний інфоблок для ручної обробки.

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

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

Строки