Всплывающие окна на сайте: как заинтересовать ваших пользователей

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

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

И вот теперь вынуждены признать – мы были не правы. Не совсем правы, если быть точными. Инструмент эффективный и имеет место быть, но нужно уметь его правильно использовать. =)

Для начала разберемся в основных моментах. Существует две технологии всплывающих окон:

Попап (Pop-Up) – когда при переходе на сайт баннер покрывает экран пользователя, и продолжить работу с сайтом можно только после его закрытия.

Пример Попап баннера

Попандер (Pop-Under) – когда при переходе на сайт появляется баннер, но не мешает посетителю взаимодействовать с сайтом.

Пример Попап баннера

Многие путают и называют все всплывающие окна попапами, но теперь-то вы знаете, что к чему, и не ошибетесь.

Для чего можно использовать:

  • проинформировать пользователя об акциях и спецпредложениях;
  • показать новый продукт или услугу;
  • предложить подписаться на рассылку;
  • выделить полезную функцию (если у вас сервис);
  • напомнить о товарах в корзине и т.д.

Основные элементы, которые должно содержать всплывающее окно:

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

Пример всплывающего окна:

Пример всплывающего окна на сайте

Рекомендации по контенту

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

1. Полезным. Скидка 5% или 100 рублей на баланс вряд ли кого-то привлекут, поэтому предлагайте интересные бонусы.

От такого предложения будет трудно отказаться:

Крупная скидка за подписку на рассылку

2. Уместным. Не нужно в книжном разделе предлагать купить купальники или автозапчасти. Также сомнительно выводить всплывающее окно на Главной, когда пользователь только зашел на сайт. Дайте ему время изучить основную информацию, перейти на интересующую страницу.

Хорошие варианты

  • В блоге предложить подписаться на рассылку.
  • Показать акционные товары именно для того раздела, в котором находится пользователь.
  • На странице товара показать комплектующие к нему или соответствующую услугу.

Регистрация на сайте уместна, но пользователь только зашел на сайт и так агрессивно нападать на него не стоит:

Навязчивая форма регистрации

Наша форма подписки, которая появляется внизу статьи:

Форма подписки на рассылку

3. Понятным. Кратко и прозрачно изложите суть предложения. Длинные сообщения и невнятные условия отталкивают. Обязательно укажите выгоду для клиента.

Лаконичные предложения:

  • «Дарим 1 000 рублей за подписку на наши новости» + форма подписки.
  • «Скидка 20% на первый заказ» + форма регистрации.
  • «Посмотрите похожие товары со скидкой» + ссылка на соответствующий раздел.

Предложение слишком общее:

Пример неконкретного предложения

Пример лаконичного текста:

Пример понятного предложения

4. Визуально привлекательным. Анимацию лучше исключить, а на выбранные цвета должно быть приятно смотреть. От видео и музыки с автопроигрыванием тоже стоит отказаться, чтобы не пугать пользователя. Если используете изображения, то обязательно высокого качества. Также текст должен хорошо контрастировать с фоном.

Надпись внизу не сразу заметна:

Пример неконтрастного текста

Симпатично и по делу:

Пример привлекательного баннера

5. С возможностью отказаться. Кнопка «Закрыть» должна быть заметна и удобна для клика.

Кнопка закрытия не сразу заметна:

Кнопка закрытия окна не видна

Заметная небольшая кнопка:

Заметная кнопка закрытия окна

6. Ненавязчивым. Показывайте предложение каждому пользователю один раз. Можно повторять показ не чаще раза в неделю.

Сюда же можно отнести то, что всплывающее окно не должно быть большим и закрывать экран полностью. Допустимый размер – не более четверти экрана. На экране лучше располагать предложение справа или снизу, так вы не помешаете клиенту изучать основную информацию на странице.

Слишком большой и яркий баннер, да еще второе окно ниже:

Навязчивая реклама на сайте

Тоже яркий, но ненавязчивый пример всплывающего окна на сайте:

Лаконичная реклама на сайте

Технические особенности

Добавить всплывающие окна на сайт можно:

  • С помощью HTML и JavaScript.
  • Применяя плагины для вашей CMS. Например, если у вас сайт на Wordpress, то для него есть готовые плагины ITRO Popup Plugin, Optinmonster, YITH Newsletter Popup и др.
  • Используя готовые сервисы: Witget, PopMechanic, CartProtector и др.

Основные варианты настройки:

  • Показ окна после определенного времени. Оптимальное время – 30-90 секунд, когда пользователь уже изучил основную информацию на странице.
  • Сообщение для новых пользователей. Как и для предыдущего способа, лучше выждать немного времени, чтобы не отталкивать посетителя. Рекомендуем предлагать крупный бонус за регистрацию или первый заказ. Такой вариант особенно подойдет для Главной страницы.
  • Вывод окна после прокрутки до определенного места страницы. Хороший вариант для статьи, когда пользователь прочитал ее полностью, или для страницы каталога, когда пользователь дошел до конца списков товаров и ничего не выбрал. Можно показывать сообщение чуть раньше, после прокрутки 50-70% страницы.
  • Показ перед закрытием сайта. Когда курсор направляется в сторону закрытия вкладки, можно тоже показать всплывающее окно.
  • Сообщение для вернувшихся пользователей. Посетитель уже явно заинтересован в вашем продукте, поэтому почему бы не рассказать ему о дополнительных возможностях.

Еще совет: не пытайтесь обойти системы блокировки. Если клиент использует Adblock или другие блокировщики рекламы, то это его право.

Аналитика

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

Пример настройки составной цели для всплывающего окна

Еще рекомендуем тестировать различные варианты, чтобы понять интересы вашей аудитории, например, можно предлагать разные бонусы за подписку. Рекомендуем инструмент от Google Analytics – «Эксперименты», но для настройки понадобится привлечь программистов.

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

Отношение поисковых систем

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

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

Google тоже сообщил, что нужно аккуратнее использовать всплывающие окна, особенно на мобильных. Попадают в зону риска баннеры на весь экран и те, что мешают изучению основной информации на сайте. Еще можно отметить рекомендации от Coalition for Better Ads, на которые ориентируется Google Chrome при блокировке рекламы.

В целом поисковые системы не против всплывающих окон, если они полезны для пользователя.


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

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

Подарок на 500 рублей
Разработка рекламы
Стратегия SMM
Книга по SMM
Бесплатный вебинар
SEO на 20 000 руб.
Скидка 30% на SERM
Маркетинговый аудит
Разработка сайта
Семантическое ядро
SEO-анализ сайта
Подарок на 10 000 руб.

Колесо фортуны –
крутите и выигрывайте подарки!

Введите свой email и нажмите на кнопку

Email

Поздравляем!

Активировать выигрыш
Закрыть и не показывать больше 

Популярные статьи

Все популярные статьи »

Комментарии (0)

Правила комментирования блога

Оставить коммент к статье

Читайте свежие статьи первыми

Дайджест новых статей по интернет-маркетингу 1 раз в неделю

Летим с нами в ТОП

Подписывайтесь на рассылку и получайте практические советы по продвижению сайта

Ваш email

Нажимая на кнопку «Подписаться», вы соглашаетесь на обработку персональных данных

Я уже с вами