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

Автор: Михаил Карпов | Опубликовано: 16.03.2026

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

Почему важен отсроченный запуск popup и отслеживание активности

Мгновенный показ popup при загрузке страницы часто раздражает посетителей и увеличивает показатель отказов. Отсроченный запуск позволяет дать пользователю время ознакомиться с контентом, а затем аккуратно предложить дополнительную информацию или подписку. Отслеживание активности пользователя (например, движение мыши, прокрутка страницы, клики) помогает показывать popup только заинтересованным, что повышает эффективность и снижает навязчивость.

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

Выбор плагина для создания popup с отсрочкой и активностью

Существует множество плагинов для работы с popup. Для нашей задачи важны функции отсрочки показа и отслеживания активности пользователя. Рассмотрим два популярных варианта:

My Popup — лёгкий и удобный плагин, который поддерживает настройку задержки показа и условия по активности пользователя. Имеет понятный интерфейс и хорошо подходит для большинства случаев.
Popup Maker — мощный плагин с расширенными возможностями по триггерам показа и условиям, в том числе по пользовательской активности и времени.

Для примера реализации ниже используем My Popup, так как он прост в настройке и интеграции с кодом.

Как настроить popup с отсроченным запуском в My Popup

После установки и активации плагина My Popup:

Перейдите в My Popup > Добавить новый.
Создайте контент всплывающего окна — это может быть форма подписки, сообщение или любой HTML.
В настройках показа укажите задержку в секундах — например, 10 секунд.
В разделе триггеров выберите «Показать при активности пользователя» — например, движение мыши или прокрутка.
Сохраните popup и разместите его на нужных страницах через шорткод или автоматический показ.

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

Пример реализации отсроченного popup с отслеживанием активности на чистом JavaScript для WordPress

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

function wppopup_showPopup() {
  if(document.getElementById('wppopup')) return; // Popup уже показан
  const popup = document.createElement('div');
  popup.id = 'wppopup';
  popup.style.position = 'fixed';
  popup.style.width = '300px';
  popup.style.height = '200px';
  popup.style.top = '50%';
  popup.style.left = '50%';
  popup.style.transform = 'translate(-50%, -50%)';
  popup.style.background = '#fff';
  popup.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
  popup.style.padding = '20px';
  popup.style.zIndex = 9999;
  popup.innerHTML = `
    <h3>Подпишитесь на рассылку</h3>
    <form id='wppopup-form'>
      <input type='email' placeholder='Ваш email' required style='width: 100%; padding: 8px; margin-bottom: 10px;'>
      <button type='submit' style='width: 100%; padding: 8px;'>Отправить</button>
    </form>
    <button id='wppopup-close' style='position: absolute; top: 5px; right: 10px; background: transparent; border: none; font-size: 18px; cursor: pointer;'>×</button>
  `;
  document.body.appendChild(popup);
  document.getElementById('wppopup-close').onclick = function() {
    document.body.removeChild(popup);
    localStorage.setItem('wppopup_closed', 'yes');
  };
  document.getElementById('wppopup-form').onsubmit = function(e) {
    e.preventDefault();
    alert('Спасибо за подписку!');
    document.body.removeChild(popup);
    localStorage.setItem('wppopup_closed', 'yes');
  };
}

function wppopup_init() {
  if(localStorage.getItem('wppopup_closed') === 'yes') return; // Уже закрывали

  let popupShown = false;
  // Запускаем таймер отсрочки 10 сек
  setTimeout(() => {
    function onActivity() {
      if(!popupShown) {
        wppopup_showPopup();
        popupShown = true;
        window.removeEventListener('mousemove', onActivity);
        window.removeEventListener('scroll', onActivity);
      }
    }
    // Слушаем активность пользователя
    window.addEventListener('mousemove', onActivity);
    window.addEventListener('scroll', onActivity);
  }, 10000);
}

document.addEventListener('DOMContentLoaded', wppopup_init);

Этот скрипт покажет popup через 10 секунд после загрузки страницы, но только если пользователь двинет мышь или прокрутит страницу. После закрытия popup больше не показывается за счёт записи в localStorage.

Расширение функционала: интеграция с плагином WP Remark для сбора аналитики

Для анализа эффективности popup полезно отслеживать конверсии и поведение пользователей. Плагин WP Remark позволяет собирать такую аналитику и интегрируется с popup.

Чтобы связать кастомный popup с WP Remark, добавьте в обработчик отправки формы вызов функции для фиксации события:

document.getElementById('wppopup-form').onsubmit = function(e) {
  e.preventDefault();
  if(typeof wpshopRemarkEvent === 'function') {
    wpshopRemarkEvent('popup_subscribe');
  }
  alert('Спасибо за подписку!');
  document.body.removeChild(document.getElementById('wppopup'));
  localStorage.setItem('wppopup_closed', 'yes');
};

Подробнее о WP Remark и его возможностях можно узнать на официальном сайте https://wpshop.ru/plugin/wpremark/.

Советы по UX при создании popup с задержкой и активностью

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

Не показывайте popup слишком рано — минимум 5–10 секунд после загрузки.
Используйте отслеживание активности — только заинтересованные увидят popup.
Добавьте кнопку явного закрытия и возможность закрыть popup по нажатию клавиши Esc.
Не показывайте popup повторно, если пользователь уже его закрыл (используйте cookie или localStorage).
Оптимизируйте дизайн popup под мобильные устройства, чтобы не мешать навигации.

Следуя этим советам, вы повысите лояльность посетителей и эффективность маркетинговых кампаний.