Всплывающие окна (popup) — отличный инструмент для повышения конверсии, сбора подписок и привлечения внимания к важной информации. Однако частое появление popup раздражает пользователей, особенно если окно появляется при каждом посещении страницы. Чтобы избежать этого, нужно использовать cookie — небольшой файл, который хранится в браузере и позволяет запомнить, что пользователь уже видел popup, и не показывать его повторно в течение определённого времени.
Зачем использовать cookie для popup в WordPress
Без cookie popup будет появляться при каждом обновлении страницы или новом заходе на сайт, что снижает удобство и может привести к снижению конверсии из-за раздражения посетителей. С помощью cookie можно:
- Показывать popup только один раз за сессию или за определённый период.
- Персонализировать поведение popup в зависимости от действий пользователя.
- Улучшить пользовательский опыт и повысить эффективность маркетинговых акций.
Таким образом, использование cookie — это баланс между эффективностью и комфортом для пользователя.
Как создать popup на основе cookie с помощью плагина My Popup
Для тех, кто предпочитает готовые решения, плагин My Popup отлично подходит для реализации popup с поддержкой cookie. Он позволяет настроить условия показа, в том числе с установкой cookie, чтобы контролировать частоту появления окна.
Основные возможности My Popup для работы с cookie:
- Настройка времени действия cookie — сколько дней или часов popup не будет появляться повторно.
- Возможность сохранять cookie только при закрытии popup или при клике по кнопке.
- Удобный визуальный редактор для создания дизайна окна без кода.
Это решение подходит для пользователей, которые хотят быстро и без программирования реализовать логику с cookie.
Создание собственного popup с cookie на чистом JavaScript и PHP в WordPress
Шаг 1. Добавляем HTML и CSS popup
Вам нужно добавить разметку для popup в шаблон сайта. Обычно это делается в файле footer.php или через хук wp_footer:
function wppopup_add_popup_html() {
?>
<div id="wppopup" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
<div style="background:#fff; padding:20px; max-width:400px; margin:100px auto; position:relative;">
<button id="wppopup-close" style="position:absolute; top:10px; right:10px;">×</button>
<h2>Подпишитесь на нашу рассылку</h2>
<p>Получайте лучшие предложения и новости.</p>
<form>
<input type="email" placeholder="Ваш Email" required />
<button type="submit">Подписаться</button>
</form>
</div>
</div>
<?php
}
add_action('wp_footer', 'wppopup_add_popup_html');Шаг 2. Скрипт для показа popup с проверкой cookie
Добавьте JavaScript, который будет показывать popup, если cookie не установлена, и ставить cookie при закрытии:
function wppopup_enqueue_scripts() {
wp_add_inline_script('jquery-core', "
document.addEventListener('DOMContentLoaded', function() {
function wppopup_getCookie(name) {
var matches = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}()\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
function wppopup_setCookie(name, value, days) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + (value || '') + expires + '; path=/';
}
if (!wppopup_getCookie('wppopup_closed')) {
var popup = document.getElementById('wppopup');
popup.style.display = 'block';
document.getElementById('wppopup-close').addEventListener('click', function() {
popup.style.display = 'none';
wppopup_setCookie('wppopup_closed', 'yes', 7); // не показывать 7 дней
});
}
});
");
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');Шаг 3. Обработка формы подписки (опционально)
Чтобы popup был полезным, стоит добавить обработку формы подписки через AJAX или отправку на email. Ниже простой пример с AJAX:
function wppopup_handle_subscribe() {
if (!empty($_POST['email']) && is_email($_POST['email'])) {
$email = sanitize_email($_POST['email']);
// Здесь логика добавления email в базу или рассылку
wp_send_json_success('Спасибо за подписку!');
} else {
wp_send_json_error('Неверный email');
}
}
add_action('wp_ajax_wppopup_subscribe', 'wppopup_handle_subscribe');
add_action('wp_ajax_nopriv_wppopup_subscribe', 'wppopup_handle_subscribe');И добавьте JS для отправки формы:
document.querySelector('#wppopup form').addEventListener('submit', function(e) {
e.preventDefault();
var email = this.querySelector('input[type="email"]').value;
fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=wppopup_subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'email=' + encodeURIComponent(email)
}).then(response => response.json()).then(data => {
alert(data.success ? data.data : data.data);
});
});Другие плагины для popup с поддержкой cookie
Кроме My Popup, есть несколько популярных плагинов, которые предлагают гибкие настройки cookie и условий показа:
- Popup Maker — мощный плагин с множеством триггеров и правил отображения, включая cookie и пользовательские условия.
- OptinMonster — коммерческий сервис с интеграцией в WordPress, позволяет создавать сложные popup с управлением частотой показа через cookie.
- Popup Builder — простой и функциональный, подходит для базовых задач с cookie.
Используйте эти плагины, если нужна расширенная функциональность без программирования.
Рекомендации по настройке cookie для popup
При работе с cookie учитывайте следующие моменты:
- Время действия cookie — выбирайте разумный срок, например, 7 или 14 дней, чтобы не показывать popup слишком часто, но и не пропустить новых посетителей.
- Тип cookie — сессионные cookie удаляются при закрытии браузера, постоянные остаются дольше.
- Юридическая сторона — при использовании cookie убедитесь, что ваш сайт соответствует требованиям GDPR и других законов о персональных данных, уведомляйте пользователей при необходимости.
Хорошая практика — давать пользователю возможность закрыть popup и не видеть его повторно, чтобы не создавать негативного опыта.
Выводы по созданию popup на основе cookie в WordPress
Использование cookie для управления показом popup — базовая и необходимая техника для повышения удобства пользователей и эффективности маркетинга. Вы можете реализовать её с помощью мощных плагинов, таких как My Popup, либо написать собственный код, который даст полный контроль над логикой и внешним видом.
Предложенный выше пример показывает, как быстро и просто сделать popup, который запоминает пользователя и не показывает окно повторно в течение недели. Это улучшает UX и помогает грамотно взаимодействовать с аудиторией.