Popup

Словом «попап» называют две разные вещи. Исторически это новое окно браузера, открытое скриптом через window.open(). В 2000-х такими окнами злоупотребляла реклама, и браузеры научились их блокировать: сейчас новое окно откроется, только если вызвано прямо в ответ на клик пользователя. Сегодня под попапом чаще понимают слой внутри страницы — затемнение и окно с формой поверх контента. Технически это обычно модальное окно.

Пример на элементе dialog

<dialog id="subscribe">
  <p>Подборка новинок раз в месяц — подписаться?</p>
  <form method="dialog">
    <button>Закрыть</button>
  </form>
</dialog>

<script>
  setTimeout(() => document.getElementById('subscribe').showModal(), 30000);
</script>

Окно показывается через 30 секунд на странице. Встроенный элемент dialog сам затемняет фон, закрывается по Escape и кнопкой из формы с method="dialog", держит фокус внутри себя. Раньше всё это писали вручную или тянули тяжёлую библиотеку.

Как не навредить конверсии и SEO

Google с 2017 года может понижать в мобильной выдаче страницы, где сразу после перехода из поиска основной контент закрыт навязчивым окном. Исключения — окна, которых требует закон: согласие на cookie, проверка возраста. Подробнее о таких случаях — в статье «Межстраничная реклама». Но даже без санкций агрессивный попап отталкивает людей: многие закрывают вкладку, не дочитав.

• Не показывать окно сразу при входе — дать человеку сначала увидеть то, ради чего он пришёл.
• Делать заметную кнопку закрытия, особенно на телефоне, где окно легко перекрывает весь экран.
• Запоминать отказ: после закрытия не показывать окно на каждой странице снова, а сохранить отметку в cookie или localStorage.
• Если в окне форма с телефоном или почтой, добавить согласие на обработку персональных данных, как и в обычной форме.

Уместный попап — это предложение, привязанное к контексту: калькулятор доставки на странице товара, напоминание о незавершённой корзине. Измерять его пользу стоит по заявкам, а не по числу показов; о том, какие цифры считать нормой, — в статье о конверсии сайта. Для небольших панелей рядом с кнопкой лучше подходит popover.