31 июля, 2024

Поп-ап: что это такое и зачем его добавляют на сайт

Рассказываем, когда бизнесу можно использовать всплывающие окна.

Бизнес применяет разные инструменты, чтобы оставаться на связи с аудиторией. Один из них — всплывающие баннеры на сайте, или поп-апы. Разбираемся, что это такое, как их настроить и как измерить их эффективность.

Что такое поп-ап

В Русском орфографическом словаре ещё не закрепилось корректное написание этого термина, поэтому в разных источниках его называют по-разному: «поп ап», «попап» или «поп-ап». Несмотря на разницу в написании, все эти слова подразумевают одно и то же.

Поп-ап (pop-up) — это баннер или форма, которая появляется на сайте через несколько секунд после того, как пользователь зайдёт на страницу. Можно настроить окно так, чтобы оно появлялось, когда выполняется одно из трёх условий: проходит определённое количество времени, посетитель нажимает конкретную кнопку на странице или переходит в нужный раздел.

Поп-ап с предложением подключить услугу

Поп-ап с предложением подключить услугу

Картинки делают яркими, но лаконичными, чтобы пользователь за пару секунд понял суть акции или новости

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

Зачем нужны поп-апы и как они влияют на конверсию сайта

Всплывающие баннеры применяют, чтобы:

  • Привлечь внимание посетителя к новости или акции. Человек заходит на сайт, а компания сразу показывает ему всплывающие окна с выгодным предложением или важной информацией. Например, о сезонной распродаже или о бесплатной доставке при заказе от 3 000 рублей. Так клиенту не нужно будет искать эту информацию на других страницах.
  • Сформировать базу контактов, которую потом можно прогреть до сделки. Компания может дать бонус в обмен на контакты клиента, например скидку за подписку на рассылку. Дальше письма познакомят подписчиков с продуктом компании и подтолкнут их к покупке.
  • Привлечь аудиторию через лид-магнит. Если посетитель площадки просматривает страницу услуги, его можно вовлечь в воронку продаж с помощью лид-магнита. Это бесплатный продукт, который повышает доверие к бизнесу и подталкивает клиента к покупке. Вот пример: студия дизайна интерьеров дарит за подписку гайд об ошибках, которые допускают подрядчики. На последней странице брошюры студия рассказывает о своих услугах.
  • Донести до пользователя какую-то техническую информацию. Например, уточнить город, предложить скачать приложение или сообщить, что сайт использует куки. Такой вид окон называют сервисными.

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

Поп-ап в мобильном приложении

Поп-ап в мобильном приложении

Поп-апы активно используются в мобильных приложениях

Для продвижения товаров и услуг в интернете используйте Яндекс Директ. Платформа позволяет бизнесам эффективно привлекать клиентов даже с небольшим рекламным бюджетом.

Какие бывают типы поп-апов

Всплывающие окна бывают двух типов. Они различаются внешним видом и целями.

👉 Первый тип — hello-board. Дословно название переводится как «доска с приветствием». Это окошко возникает ближе к краю экрана — сборку, сверху, справа или слева. Небольшой поп-ап не мешает пользователю изучать информацию на сайте и обычно несёт какую-то техническую информацию. Например, уточняет город, предлагает скачать приложение или сообщает, что сайт использует куки.

Такие баннеры не раздражают пользователя, потому что они не закрывают контент. Поэтому, если хотите поделиться важной новостью или рассказать о свежей акции, делайте hello-board ярким, чтобы он привлекал внимание.

Всплывающее окно в правом нижнем углу экрана

Всплывающее окно в правом нижнем углу экрана

Текст на всплывающих плашках не всегда читают, поэтому для важных новостей они не подходят

👉 Второй тип — page-stop. Перевод этого названия звучит как «остановка страницы». И это действительно так: окно с информацией появляется в центре экрана, при этом включается оверлей, то есть фон вокруг баннера меняет цвет, чтобы подчеркнуть контраст с привычным интерфейсом, — например, становится тёмным. Посетитель сайта не может перейти на другую страницу, пока не закроет такое окно.

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

Яркий поп-ап в центре затемнённого экрана

Яркий поп-ап в центре затемнённого экрана

Чтобы привлечь внимание к картинке, часть экрана вокруг неё затемняют

Ещё один вариант классификации — разделить поп-апы на виды, которые зависят от сценариев использования. Всего их пять.

➡️ Entry pop-up. Этот вид называют приветственным окном, потому что картинка появляется в тот момент, когда страница загрузилась, но пользователь ещё не успел ничего нажать или перейти в другой раздел. Это гарантированно привлекает внимание посетителя сайта, потому что изображение занимает весь экран. Чтобы открыть нужную информацию, человеку нужно либо закрыть баннер, либо выполнить целевое действие: оставить контакты, подписаться на рассылку и так далее.

Нужно держать в голове, что кто-то может просто закрыть сайт, потому что посчитает рекламу слишком навязчивой. Лучше использовать этот вид, когда нужно сообщить аудитории о технических неисправностях или переезде на другую площадку. Активно используют такой вид окон маркетплейсы, когда запрашивают разрешение на доступ к геопозиции.

Поп-ап, который сообщает, что магазин переехал на новый сайт

Поп-ап, который сообщает, что магазин переехал на новый сайт

Пользователь видит эту информацию в тот момент, когда заходит на портал

➡️ Timed pop-up. Он возникает через несколько секунд после того, как ресурс подгрузился. Такой вид поп-апов ещё называют окном с временной отсрочкой. Обычно она составляет от 2 до 60 секунд. Чтобы определиться со временем, можно посмотреть через Яндекс Метрику, сколько секунд в среднем пользователи проводят на странице, а затем с помощью тестов подобрать вариант с самой высокой конверсией.

Окна с временной отсрочкой помогают собирать контакты тёплой аудитории, предлагают ей заполнить разные формы — например, чтобы получить консультацию или обратный звонок.

Поп-ап, который предлагает подписаться на канал в Телеграме

Поп-ап, который предлагает подписаться на канал в Телеграме

Можно позвать аудиторию в другой канал — в соцсеть или чат-бот

➡️ Scroll pop-up, или окно, которое открывается при пролистывании. По принципу действия оно похоже на предыдущий вариант. Только его появление зависит не от времени, а от количества экранов, которые успел просмотреть посетитель площадки. Обычно этот показатель ставят в районе 50–75% от всего объёма страницы. То есть если сайт состоит из 10 экранов, реклама всплывёт после пятого или седьмого. Это удобно, когда предложение привязано к конкретному контенту на странице. Часто встречается такой пример: баннер с призывом забронировать услугу со скидкой 10% возникает, когда клиент доходит до раздела с тарифами.

➡️ Exit pop-up. Появляется в тот момент, когда человек закрывает страницу, поэтому называется окном прощания. Его задача — удержать посетителя на странице. Иногда такие баннеры отсылают к популярным материалам по теме. Другой вариант — предложить клиенту оставить контакты, чтобы не пропустить полезную информацию.

➡️ Click pop-up. Триггер для появления такого окна — нажатие на кнопку или ссылку. Этот вариант часто используют, когда важно не перегрузить интерфейс, но при этом дать клиентам всю необходимую информацию. Поэтому важно продумать путь, который проходит человек на сайте, чтобы все кнопки и ссылки были заметны. Иначе клиент их не увидит и не выполнит целевое действие.

Поп-ап, который появляется, если нажать на кнопку оплаты

Поп-ап, который появляется, если нажать на кнопку оплаты

Форму не видно до тех пор, пока не сработает триггер

Как настроить всплывающие окна на сайте

Создать поп-апы можно разными способами. Например, помогут сделать всплывающее окно HTML и CSS, а также умение пользоваться js-библиотеками. Обычно этим занимаются разработчики или веб-мастера. Можно использовать специальные сервисы. В них есть шаблоны, удобно настраивать условия показа, а ещё есть встроенная статистика и опции A/B-тестирования.

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

А в конструкторе сайтов Tilda есть специальные блоки для работы с поп-апами.

Краткая инструкция для сайтов на Tilda

Сделать всплывающее окно в Тильде могут пользователи тарифов Personal или Business.

  1. Для этого перейдите в библиотеку блоков, затем — в категорию «Форма» и выберите нужный блок. Настройте контент внутри него: определите нужные поля, добавьте текст, настройте внешний вид.
  2. Дальше подберите подходящий формат. В Tilda блоки различаются расположением и количеством полей. Есть формы, которые появляются в центре или углу экрана. Ещё варианты — баннеры с несколькими полями и без формы обратной связи.
  3. Добавьте блок в меню Pop-up. В нём автоматически появится ссылка на форму. Её следует добавить в меню «Контент» в поле «Ссылка», чтобы окно появлялось в нужный момент. Если надо, чтобы блок появлялся через определённое время, по скроллу или при закрытии страницы, в списке блоков выберите вкладку «Другое», затем перейдите в «Триггер» и выберите нужное действие, которое будет вызывать поп-ап.

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

Как измерить эффективность поп-апов

Есть разные показатели, по которым определяют, насколько хорошо работают всплывающие формы. Обычно метрику подбирают исходя из цели, с которой запускали поп-ап. Например, чтобы рассчитать конверсию в лиды, нужны данные:

  • Сколько пользователей выполнили целевое действие — подписались на рассылку, оставили контакты
  • Сколько человек увидели форму на сайте

Первое число делят на второе и умножают на 100%. Получается конверсия. Она зависит от сферы, поэтому оптимальный показатель можно вычислить только с помощью тестов.

Если целью кампании было нарастить количество подписчиков в телеграм-канале, нужно посмотреть, сколько человек в итоге на него подписалось.

Чтобы определить прирост базы рассылки, нужно запомнить, сколько контактов было в ней до запуска поп-апа. Затем сравнить это количество с числом подписчиков через какое-то время, например через месяц.

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

Ошибки, из-за которых поп-апы не работают

Поп-ап — рекламный инструмент, поэтому он должен быть ёмким и понятным. Чтобы пользователь сразу считал суть предложения, следует избегать этих ошибок.

  • Всплывающее окно «плывёт», когда его смотрят с компьютера. Даже если 90% пользователей просматривают сайт со смартфона, всегда есть те, кто откроет его с ноутбука. Поэтому баннер должен автоматически подстраиваться под экран любого размера.
  • Неясно, какую мысль доносит поп-ап. Задача всплывающего окна — зацепить внимание посетителя сайта. На это есть буквально доли секунды, поэтому суть акции или предложения лучше формулировать ёмко, а в визуале расставлять акценты так, чтобы главное сразу бросалось в глаза. Обязательно перечислите на баннере выгоды, которые получит человек, если выполнит целевое действие.
  • Нет призыва к действию. Пользователь должен понимать, что нужно сделать, чтобы получить обещанную выгоду. Например, оставить телефон или подписаться на рассылку. В противном случае клиент пройдёт мимо предложения или закроет сайт. Образец поп-апа выглядит так: цепляющий заголовок, выгоды для клиента, призыв к действию.
  • Неверная настройка условий показа. Перед публикацией формы убедитесь, что указали нужные триггеры и что они отвечают цели. Например, нет смысла просить контакты человека, который уже подписан на рассылку.

Яндекс Директ — сервис для простого привлечения клиентов в интернете

Дополнительные материалы:

Что такое лендинг и как его создать

Как создать сайт с нуля без разработчиков

Информационные услуги оказываются ООО «Яндекс» и не являются образовательными