Как оптимизировать показ popup в WordPress с использованием cookie и localStorage

Диагностика проблемы с частыми показами popup

Частая проблема при работе с popup в WordPress — навязчивое многократное появление одного и того же окна для одного пользователя. Это ухудшает UX и может привести к росту показателя отказов. Если popup показывается при каждом обновлении страницы, скорее всего, отсутствует механизм запоминания, что пользователь уже видел всплывающее окно.

Для диагностики проверьте, какие механизмы сохранения состояния присутствуют в коде popup: используются ли cookie, localStorage или сессии. Также можно отследить сетевые запросы через DevTools браузера, чтобы увидеть, записываются ли данные о показе.

Пошаговое решение: использование cookie и localStorage для контроля показов popup

1. Добавление cookie для контроля повторных показов

Пример установки cookie на JavaScript после первого показа popup:

function setCookie(name, value, days) {
    const d = new Date();
    d.setTime(d.getTime() + (days*24*60*60*1000));
    let expires = "expires=" + d.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i=0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Для показа popup только если cookie не установлено:

if (!getCookie('popupShown')) {
    // код для показа popup
    setCookie('popupShown', 'yes', 7); // cookie сроком на 7 дней
}

2. Использование localStorage для более гибкого контроля

localStorage позволяет хранить данные дольше, без срока действия. Пример:

if (!localStorage.getItem('popupShown')) {
    // показать popup
    localStorage.setItem('popupShown', 'true');
}

3. Интеграция с WordPress и popup плагинами

Если вы используете собственный JS-код или My Popup от WPShop, добавьте проверку cookie/localStorage перед вызовом показа popup. Для плагинов с хуками — например, my_popup_before_show — можно отменять показ.

add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        if (!localStorage.getItem('popupShown')) {
            // Вызов функции показа popup
            showMyPopup();
            localStorage.setItem('popupShown', 'true');
        }
    });
    </script>
    <?php
});

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

• Откройте сайт в режиме инкогнито.
• Убедитесь, что popup появляется один раз.
• Обновите страницу — popup не должен появляться снова.
• Проверьте в DevTools браузера наличие cookie popupShown или запись в localStorage.

Частые ошибки и как их исправить

• Cookie не устанавливаются из-за политики безопасности: Проверьте, что cookie устанавливаются с правильным path=/ и без атрибута Secure на HTTP-сайте.
• localStorage очищается сторонними плагинами или настройками браузера: учитывайте, что в приватном режиме localStorage может быть недоступен.
• Показы popup запускаются до проверки cookie/localStorage: поместите проверку в DOMContentLoaded или в конец страницы.
• Несовместимость с плагинами кэширования: исключите страницы с popup из кэширования или используйте AJAX-загрузку popup.

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

• Используйте localStorage для хранения состояния показа, чтобы не нагружать cookie и не отправлять лишние данные на сервер.
• Для персонализированных popup храните в cookie или localStorage только метки показа, а не контент.
• Обрабатывайте отсутствие поддержки JavaScript — при отключенном JS popup не будет работать, предусмотрите альтернативу.
• В случае интеграции с WooCommerce учитывайте, что кэширование страниц может влиять на логику показа. Используйте AJAX для динамического контроля.

Сравнение cookie и localStorage для контроля показа popup