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

Автор: Евгения Ширяева | Опубликовано: 16.11.2025

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

Почему персонализация popup важна для сайта на WordPress

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

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

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

Лучшие плагины для персонализации popup в WordPress

Popup Maker — расширенный контроль и интеграции

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

Типу устройства (мобильный, десктоп)
Источник трафика
Времени на сайте
Активности пользователя (например, скролл страницы)

Также есть расширения для интеграции с WooCommerce и формами подписки.

OptinMonster — мощный SaaS с расширенной персонализацией

OptinMonster — это облачное решение, которое позволяет создавать персонализированные popup с помощью визуального конструктора и продвинутой логики таргетинга. Поддерживаются такие триггеры, как:

Поведение мыши (exit intent)
Геолокация пользователя
Повторные визиты
История просмотров страниц

Плагин требует подписки, но отлично подходит для коммерческих проектов.

Hustle — простой плагин с базовой персонализацией

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

Как создать персонализированный popup в WordPress с помощью кода

Если нужно очень гибкое и легковесное решение, можно написать собственный popup с таргетингом. Рассмотрим пример создания popup, который показывается только зарегистрированным пользователям, которые посетили страницу товара, используя AJAX и cookie.

Создание popup-контента и подключения скриптов

В functions.php вашей темы или в собственном плагине добавьте следующий код для подключения скриптов и создания AJAX-обработчика:

function wppopup_enqueue_scripts() {
    wp_enqueue_script('wppopup-script', get_template_directory_uri() . '/js/wppopup.js', array('jquery'), '1.0', true);
    wp_localize_script('wppopup-script', 'wppopup_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppopup_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

function wppopup_ajax_check_user() {
    check_ajax_referer('wppopup_nonce', 'nonce');
    if (is_user_logged_in() && isset($_POST['visited_product']) && $_POST['visited_product'] === 'yes') {
        wp_send_json_success(array('show_popup' => true));
    } else {
        wp_send_json_success(array('show_popup' => false));
    }
    wp_die();
}
add_action('wp_ajax_wppopup_check_user', 'wppopup_ajax_check_user');
add_action('wp_ajax_nopriv_wppopup_check_user', 'wppopup_ajax_check_user');

Этот код подключает JavaScript и создаёт AJAX-обработчик, который проверяет, залогинен ли пользователь и посещал ли он страницу товара.

JavaScript для показа popup по условию

Создайте файл wppopup.js в папке вашей темы /js/ и добавьте туда:

jQuery(document).ready(function($) {
    // Пример установки cookie при посещении страницы товара
    if ($('body').hasClass('single-product')) {
        document.cookie = "visited_product=yes; path=/";
    }

    // Проверка через AJAX, показывать ли popup
    $.post(wppopup_ajax_obj.ajax_url, {
        action: 'wppopup_check_user',
        nonce: wppopup_ajax_obj.nonce,
        visited_product: getCookie('visited_product')
    }, function(response) {
        if(response.success && response.data.show_popup) {
            showWppopup();
        }
    });

    function getCookie(name) {
        let matches = document.cookie.match(new RegExp(
            '(?:^|; )' + name.replace(/([\.\$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }

    function showWppopup() {
        if($('#wppopup').length === 0) {
            $('body').append('<div id="wppopup" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 15px rgba(0,0,0,0.3);z-index:10000;">'+
            '<h2>Специальное предложение для вас!</h2><p>Спасибо, что посетили наш товар.</p>'+
            '<button id="wppopup-close">Закрыть</button></div>');
            $('#wppopup-close').on('click', function() {
                $('#wppopup').remove();
            });
        }
    }
});

Этот скрипт проверяет, был ли пользователь на странице товара, и если он залогинен — показывает popup с приветствием и кнопкой закрытия.

Улучшение персонализации: таргетинг по геолокации и времени

Чтобы сделать popup ещё более релевантным, можно добавить таргетинг по геолокации. Для этого можно использовать IP-геолокацию через API (например, ipinfo.io). Также можно ограничивать показ popup определённым временем суток или днём недели.

Пример добавления геолокационного условия в AJAX-обработчик:

function wppopup_ajax_check_user() {
    check_ajax_referer('wppopup_nonce', 'nonce');

    $user_ip = $_SERVER['REMOTE_ADDR'];
    $geo = wp_remote_get("https://ipinfo.io/{$user_ip}/json");
    $geo_data = json_decode(wp_remote_retrieve_body($geo));

    $allowed_countries = array('RU', 'BY', 'KZ');
    $country = isset($geo_data->country) ? $geo_data->country : '';

    $current_hour = (int) current_time('H');

    if (is_user_logged_in() && isset($_POST['visited_product']) && $_POST['visited_product'] === 'yes' && in_array($country, $allowed_countries) && $current_hour >= 9 && $current_hour <= 20) {
        wp_send_json_success(array('show_popup' => true));
    } else {
        wp_send_json_success(array('show_popup' => false));
    }

    wp_die();
}

Таким образом popup будет показываться только пользователям из России, Беларуси и Казахстана с 9:00 до 20:00 по серверному времени.

Советы по оптимизации и UX для персонализированных popup

Чтобы popup приносил пользу, а не раздражал, важно:

Не показывать popup слишком часто — используйте cookie или localStorage для ограничения частоты.
Чётко показывать возможность закрыть окно.
Делать popup адаптивным для мобильных устройств.
Тестировать разные варианты сообщений и условий показа (A/B тесты).
Отслеживать эффективность popup с помощью аналитики (Google Analytics, Яндекс.Метрика).

Например, для ограничения частоты показов можно добавить в JavaScript проверку cookie wppopup_shown и ставить её при первом показе:

function showWppopup() {
    if($('#wppopup').length === 0 && !getCookie('wppopup_shown')) {
        $('body').append('<div id="wppopup" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 15px rgba(0,0,0,0.3);z-index:10000;">'+
        '<h2>Специальное предложение для вас!</h2><p>Спасибо, что посетили наш товар.</p>'+
        '<button id="wppopup-close">Закрыть</button></div>');
        $('#wppopup-close').on('click', function() {
            $('#wppopup').remove();
        });
        document.cookie = "wppopup_shown=true; max-age=86400; path=/"; // Показывать 1 раз в сутки
    }
}