Как сделать popup по активности пользователя в WordPress

В этой статье разберём, как создать popup, который отображается в зависимости от действий пользователя на сайте WordPress. Такой подход позволяет показывать всплывающие окна не просто по времени или при загрузке страницы, а реагировать на поведение посетителя, повышая релевантность и конверсию.

Почему popup по активности пользователя эффективнее обычных

Стандартные popup часто раздражают пользователей, когда появляются сразу или через фиксированное время. Всплывающие окна, завязанные на активность, показываются в нужный момент, например, когда пользователь прокручивает страницу, кликает по элементам или собирается покинуть сайт.

Такой таргетинг позволяет повысить вовлечённость, собрать больше лидов и уменьшить показатель отказов. В WordPress реализовать такую логику можно как с помощью плагинов, так и вручную через JavaScript и PHP.

Популярные способы определения активности пользователя

Отслеживание прокрутки страницы

Один из самых распространённых триггеров – показ popup при достижении пользователем определённого процента прокрутки страницы. Например, после просмотра 50% контента.

Это можно реализовать с помощью JavaScript, который слушает событие scroll и вычисляет текущую позицию прокрутки.

Определение намерения покинуть сайт (exit intent)

Технология exit intent фиксирует движение курсора мыши к верхней части окна браузера, что часто указывает на попытку закрыть вкладку или перейти в другую.

При таком событии удобно показать popup с предложением скидки, подписки или важного сообщения.

Реакция на клики и взаимодействия с элементами

Иногда popup должен проявляться после взаимодействия с определённым элементом, например, кнопкой, ссылкой или формой. Это позволяет показывать контент, релевантный текущему действию пользователя.

Реализация popup по прокрутке в WordPress с примером кода

Создадим простой popup, который появится, когда пользователь прокрутит 50% страницы. Для этого добавим JavaScript в тему или плагин WordPress.

function wppopup_enqueue_scripts() {
    wp_enqueue_script('wppopup-scroll-popup', get_template_directory_uri() . '/js/scroll-popup.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

В файле scroll-popup.js разместим следующий код:

jQuery(document).ready(function($) {
    var popupShown = false;
    $(window).on('scroll', function() {
        if (popupShown) return;
        var scrollTop = $(window).scrollTop();
        var docHeight = $(document).height() - $(window).height();
        var scrollPercent = (scrollTop / docHeight) * 100;
        if (scrollPercent > 50) {
            popupShown = true;
            $('body').append('<div id="wppopup" style="position:fixed;bottom:20px;right:20px;padding:15px;background:#fff;border:1px solid #ccc;box-shadow:0 0 10px rgba(0,0,0,0.3);z-index:9999;">Подпишитесь на нашу рассылку! <button id="wppopup-close">Закрыть</button></div>');
            $('#wppopup-close').on('click', function() {
                $('#wppopup').remove();
            });
        }
    });
});

Этот код добавляет popup в нижний правый угол, когда пользователь прокрутил страницу больше чем на 50%. Кнопка "Закрыть" убирает окно. Можно расширить функционал, добавив форму подписки или другие элементы.

Использование плагинов для popup по активности

Если не хочется писать код самостоятельно, можно воспользоваться готовыми решениями. Среди популярных плагинов, поддерживающих триггеры по активности:

• My Popup — мощный плагин с настройками показа по прокрутке, времени, exit intent и другим.
• Clearfy Pro — набор оптимизаций и инструментов, включая расширенные настройки popup.

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

Как реализовать exit intent popup с кодом

Рассмотрим простой пример popup с детектором движения мыши к верхней части экрана.

jQuery(document).ready(function($) {
    var exitIntentShown = false;
    $(document).on('mouseleave', function(e) {
        if (exitIntentShown) return;
        if (e.clientY < 10) {
            exitIntentShown = true;
            $('body').append('<div id="wppopup-exit" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 15px rgba(0,0,0,0.5);z-index:9999;">Подождите! Не уходите без скидки! <button id="wppopup-exit-close">Закрыть</button></div>');
            $('#wppopup-exit-close').on('click', function() {
                $('#wppopup-exit').remove();
            });
        }
    });
});

Такой метод прост и хорошо работает на десктопах. На мобильных устройствах exit intent неэффективен, поэтому стоит предусмотреть альтернативные условия показа.

Советы по UX и оптимизации popup по активности

Чтобы popup действительно улучшал опыт пользователя, а не раздражал, соблюдайте несколько правил:

• Не показывайте popup слишком часто одному пользователю. Используйте cookie или localStorage, чтобы запоминать закрытие.
• Адаптируйте popup под мобильные устройства — часто стоит отключать exit intent там.
• Показывайте релевантный контент, связанный с текущим действием пользователя.
• Минимизируйте время загрузки и используйте асинхронную загрузку скриптов popup.

Для хранения состояния можно добавить следующий код:

jQuery(document).ready(function($) {
    if (!localStorage.getItem('wppopupShown')) {
        // показать popup
        localStorage.setItem('wppopupShown', 'true');
    }
});

Так popup отобразится только один раз за сессию или дольше, если менять логику.