Перейти к содержимому
BXWiki

Всплывающее окно на витрине - условие показа, частота, скорость

Делаем всплывающее окно подписки или акции так, чтобы оно приносило заявки и не раздражало: условие показа, запоминание отказа, композит и скорость страницы.

Что нужно знать заранее

Окно, которое видит каждый посетитель на каждой странице, приносит отписки, а не заявки. Условие показа и его частота важнее самого предложения внутри окна.

Факт показа и факт отказа хранят на стороне самого браузера. Кука или локальное хранилище переживают переход по страницам, и сервер об этом ничего знать не обязан.

Условие показа часто зависит от посетителя, а страница может отдаваться из общей копии. Поэтому решение о показе принимает браузер, а не собранная заранее разметка страницы.

Шаги

  1. Определить условие показа и согласовать его с заказчиком ещё до вёрстки окна.
  2. Показывать окно с задержкой, а не сразу после открытия страницы посетителем.
  3. Запоминать закрытие окна и не показывать его снова заданное число дней подряд.
  4. Отключать окно для тех, кто уже подписался или оформил заказ на сайте.
  5. Подключать скрипты и стили окна только на тех страницах, где оно нужно.

Решение

Показываем окно по условию и с задержкой:

const shown = localStorage.getItem('promo_popup_until');
if (!shown || Number(shown) < Date.now()) {
    setTimeout(() => {
        if (window.scrollY > 400) { document.querySelector('.promo-popup').hidden = false; }
    }, 15000);   // пятнадцать секунд и заметная прокрутка страницы
}

Два условия сразу отсекают случайных посетителей. Человек, закрывший вкладку через три секунды, окна не увидит, а тот, кто читает страницу, увидит его в разумный момент.

Запоминаем закрытие окна:

document.querySelector('.promo-popup__close').addEventListener('click', () => {
    const days = 7;
    localStorage.setItem('promo_popup_until', String(Date.now() + days * 86400000));
    document.querySelector('.promo-popup').hidden = true;
});

Неделя - вполне разумный срок для повторного показа той же акции. Более частый показ читается посетителем как навязчивость, а более редкий делает окно бесполезным для маркетинга.

Отключаем окно для своих покупателей:

$frame = $this->createFrame()->begin('');
?><div class="promo-popup" hidden data-show="<?= $USER->IsAuthorized() ? 'N' : 'Y' ?>"></div><?php
$frame->end();
// условие по посетителю живёт в динамической области, а не в общей копии страницы

Проверка посетителя внутри динамической области переживает композит. Без неё окно подписки увидит и тот, кто подписался вчера, потому что страница пришла из общей готовой копии.

Подключаем ресурсы только там, где нужно:

if ($APPLICATION->GetCurDir() === '/catalog/') {
    $APPLICATION->SetAdditionalCSS('/local/templates/main/css/popup.css');
    \Bitrix\Main\Page\Asset::getInstance()->addJs('/local/templates/main/js/popup.js');
}
// на страницах оформления заказа и в личном разделе окно не подключают вовсе

Проверяем поведение на мобильных:

Окно терминала
curl -s -A 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)' https://example.com/catalog/ \
  | grep -c 'promo-popup'
# окно на весь экран без видимой кнопки закрытия портит и продажи, и позиции в выдаче

Типичные проблемы

Окно видят все посетители на каждой странице.

Факт показа нигде не запоминается, а условие сводится к загрузке страницы. Закрытие окна записывают в браузере и учитывают его при следующем показе.

Подписчик снова видит предложение подписаться.

Условие показа проверяется в статической части страницы, которая одинакова для всех. Личные условия выносят в динамическую область или в код на стороне браузера.

Окно всплывает сразу и мешает читать страницу.

Показ настроен без задержки и без всякого учёта прокрутки страницы посетителем. Задержку и прокрутку задают вместе, чтобы окно видели действительно заинтересованные люди.

На телефоне окно закрывает весь экран без кнопки закрытия.

Вёрстка окна проверялась только на широком экране самого разработчика. Поведение на телефоне проверяют отдельно: это ещё и требование поисковых систем.

Страницы стали тяжелее после добавления окна.

Скрипты и стили окна подключены сразу на всех страницах сайта. Ресурсы окна подключают только там, где оно действительно показывается посетителю.

Частые вопросы

Через сколько показывать окно?

Обычно через десять-двадцать секунд и после заметной прокрутки страницы. Точные числа подбирают по поведению посетителей конкретного сайта.

Где хранить факт отказа?

В локальном хранилище браузера или в куке с ограниченным сроком. Сервер об этом знать не обязан, и лишних запросов это не создаёт.

Как не показывать окно подписчикам?

Проверять признак подписки в динамической области или в запросе к своему коду. Статическая часть страницы одинакова для всех и для этого не годится.

Мешает ли окно продвижению?

Мешает, если оно перекрывает содержимое на телефоне и закрывается с трудом. Поисковые системы это учитывают, и правило проще соблюдать, чем оспаривать.

Считать ли эффективность окна?

Обязательно: показы, закрытия и заявки. Без этих трёх чисел спор о том, нужно ли окно вообще, идёт на ощущениях.

Смежное

Первоисточник