Создаем всплывающие окна popup
Содержание:
- Виды всплывающих уведомлений
- Экспериментируйте
- Лучшие готовые виджеты всплывающих окон
- Как сделать всплывающее окно на сайте WordPress
- Tim Ferriss
- Ведёт на другие рекламные страницы
- Глава 7. Как бороться с баннерной слепотой
- Модальное окно
- Собирайте email-адреса
- Сертифицированный курс «Ведение бюджетного учета в программе «1С:Бухгалтерия бюджетного учреждения 8»
- Подбирайте правильный размер мобильного поп-апа
- How To Create Popups
- Как правильно оформить pop-up
- Значение термина «Диагональ экрана»
- Полный синтаксис window.open
- Перезвоним вам
- Виды всплывающих окон
- Как оптимизировать всплывающие окна
- Images
- Открыть всплывающее окно при загрузке страницы
- Выводы
Виды всплывающих уведомлений
Интернет-маркетологи признают 2 вида поп-апов.
- Hello-board. Такой вид поп-апа легкий для восприятия и вызывает меньше раздражения. Он перекрывает небольшую часть страницы и основные функции остаются доступными.
- Page-stop. Всплывающее окно-террорист закрывает страницу полностью и лишает пользователя возможности работать с сайтом. Ему остается либо выполнить требования, например, подписаться на рассылку, либо закрыть окно. Page-stop pop-up характеризуется высокой конверсией и, в то же время, негативной реакцией посетителей.
Конечно же, не всегда pop-up, закрывающие всю страницу бесят людей. Это индивидуально. Больше раздражают другие моменты, о которых вы узнаете далее.
Экспериментируйте
Крутые объявления, которые привлекают клиентов, не делаются на коленке за 5 минут. Если нужна качественная pop-up реклама, которая будет приносить доход — экспериментируйте и тестируйте. Определенного шаблона всплывающих окон не существует. Выше мы описали несколько советов, которые помогут сделать качественный оффер.
Поиграйтесь с заголовками, обратите внимание на какие больше реагируют пользователи? Можно попробовать писать объявления с ноткой юмора, если это может подходить тематике вашего продукта. Пробуйте различные кнопки
Отходите от шаблонных объявлений, поиграйте с дизайном. Качественная визуальная реклама привлекает больше клиентов, чем обычный текст на монотонном фоне
Пробуйте различные кнопки. Отходите от шаблонных объявлений, поиграйте с дизайном. Качественная визуальная реклама привлекает больше клиентов, чем обычный текст на монотонном фоне.
Лучшие готовые виджеты всплывающих окон
1. Форма обратного звонка
Сервис «Обратный звонок» работает следующим образом:
- На сайт загружается код. Это можно сделать самостоятельно, например, по видеоурокам.
- После этого появится всплывающее окно. Через него пользователи могут задавать свои вопросы и общаться с менеджером компании в чате.
- Сервис автоматически осуществляет дозвон. Как только сотрудник компании возьмёт трубку, начнётся соединение с клиентом. В среднем процесс занимает 17-18 секунд.
- Информацией о посетителе сохранится в заявке (ФИО, регион, номер телефона, рекламная кампания, UTM-метки и т. п.), как и запись всего разговора.
2. Онлайн-чат для общения с клиентами
Работа сервиса происходит следующим образом:
- На ресурс загружается код. Это можно сделать самостоятельно, например, по видеоурокам.
- Появляется всплывающее окно чата. Посетители сайта могут задать в нем свои вопросы.
- Сотрудники компании коммуницируют с пользователями в личном кабинете или с помощью мобильного приложения.
- Довольный общением клиент совершает покупку.
3. Генератор входящего трафика
Сервис позволяет:
- Более чем в два раза увеличить количество звонков с сайта.
- Уменьшить затраты на продвижение за счет роста количества обращений без увеличения рекламного бюджета.
- Реализовать остатки определенных товаров.
- Повысить лояльность аудитории за счет организации акций и клиентских мероприятий.
- Сформировать клиентскую базу с контактами для последующей работы с ней.
4. Сервис «Стадный инстинкт»
Данный инструмент имеет следующие преимущества:
- Способен почти в два раза увеличить конверсию.
- Сокращает расходы на продвижение за счет роста входящего трафика.
- Привлекает новых клиентов, воздействуя на их эмоции и реакции.
- Повышает доверие клиентов за счёт того, что они сделали более одной покупки на сайте
- Информирует аудиторию об акциях и специальных предложениях.
Подробнее
Сервис имеет свои уникальные особенности:
Настраиваемый дизайн. Фон, цвет текста и другие категории можно установить так, чтобы они гармонировали с основной площадкой. Наличие анимации
Можно анимировать появление виджета, чтобы максимально привлечь внимание аудитории. Подстановка названия города
Сервис автоматически выберет и подставит в текст название нужного населенного пункта. Подстановка имени. Так же, как и в предыдущем пункте, реализовывается автоматически. Подстановка суммы заказа. Число выбирается из заданного интервала и включается в текст. Настройка сценария показов. С помощью этой функции можно задать, кому и с какой периодичностью будет показываться всплывающее окно сайта.
5. Сервис «Захватчик клиентов»
Работает следующим образом:
- На площадку устанавливается соответствующий код. Как и в предыдущих случаях, это можно сделать самостоятельно, следуя инструкции.
- Далее виджет нужно настроить. Для этого загружается аватарка, имя и три сообщения. В последнее вставляется ссылка на посадочную страницу.
- На сайте появятся всплывающие окна с сообщениями об уникальной акции и призывом к совершению целевого действия.
- Далее нужно просто отслеживать рост заказов, так как клиенты, скорее всего, не устоят перед индивидуальным торговым предложением.
Сервис имеет собственные уникальные особенности:
6. Инструмент «Мультикнопка»
Сервис позволяет:
Сервис имеет достаточно широкий диапазон настроек. Так, можно выбрать цвет кнопок, иконку или загрузить свое изображение. А если привлечь к работе программиста, то он пропишет в java-скрипте все, что только можно.
Как сделать всплывающее окно на сайте WordPress
Вот мы и добрались до самого главного, каким способом можно сделать попап на сайте собранном на CMS WordPress. Сразу отметим, что задача это не сложная и существует очень много инструментов, позволяющих создавать красивые попапы, которые будут отвечать всем рекомендациям, написанным выше.
Также помимо стандартных попапов, некоторые плагины умеют легко создавать и остальные виды всплывающих окон.
Давайте посмотрим на 5 плагинов для создания всплывающих окон, а один полностью настроим для наглядного примера.
Master Popups
Название плагина говорит само за себя. Плагин имеет 25 шаблонов всплывающих окон, 12 форм подписки на рассылку и красивый drag-n-drop редактор.
Вы можете таргетировать попап по типам страниц или постов, по тегам и категориям. Можно показывать одну всплывашку на весь сайт.
Количество попапов в плагине не ограничено, вы можете делать столько окон, сколько вам нужно. Каждому окну можно задавать свою ширину и высоту, менять цвет заднего фона страницы,
Помимо прочего, вы можете настраивать даже свой собственный прелоадер для каждого попапа.
Для каждого всплывающего окна можно задать шорткод и вызывать его по клику на кнопку или ссылку. Все настройки плагина можно экспортировать для использования на другом сайте.
К сожалению, плагин обновляется не так часто как хотелось бы, тем не менее, он прекрасно работает с последними версиями WordPress.
Из недостатков плагина — он полностью на английском языке.
Popup by Supsystic
Создать лайтбокс за пару минут, выбрав один из 18 типов всплывающих окон и один из 69 адаптивных шаблонов? Легко.
Плагин позволяет вам создавать неограниченное количество всплывашек, каждую из которых можно настраивать по размеру, цвету и любому другому стандартному критерию.
Таргетировать всплывающие окна можно по категориям или типам страниц. Также можно делать различные задержки и целые серии попапов с помощью тонких настроек.
Вы можете выбирать место на странице для каждого попапа и сделать одну из двадцати возможных анимаций открытия. В общем очень много настроек, шаблонов и типов всплывающих окон.
Плагин часто обновляется, но также не поддерживает русский язык. Однако, пусть английский язык не пугает вас. Администрирование плагина и создание новых окон настолько просто и понятно, что с этим справится любой неопытный пользователь.
Popup Builder — Responsive WordPress Pop up — Subscription & Newsletter
Очень популярный и функциональный плагин. Поддерживает интеграцию практически со всеми более-менее крупными плагинами для создания форм на сайте, поддерживает интеграцию и с конструкторами страниц (Visual Composer, Elemental, DIVI, WPML и другие).
Плагин действительно довольно функциональный и имеет все необходимые для комфортной работы настройки. Вы можете выбирать анимации открытия, расположение всплывающего окна на странице, таргетироваться по страницам, рубрикам и тегам, а также вызвать модальное окно по шорткоду.
У плагина есть и платная версия. В ней доступен функционал интеграции в WooCommerce, делать всплывающие окна регистрации и авторизации на сайте, делать всплывающие окна с счетчиками и вызывать попап когда пользователь пытается покинуть страницу. Также для платной версии доступен функционал обхода Adblock и еще более двадцати настроек.
Плагин постоянно обновляется, имеет более 100 000 скачиваний и основная масса оценок это 5*.
Popup Maker — Popup Forms, Opt-ins & More
В платной версии доступен функционал показа попапа пользователю, покидающему страницу, подгрузки попапов с помощью AJAX, все верификационные окна, внутренняя аналитика плагина и большое количество таргетингов.
Плагин очень крупный и “тяжелый”. Хорошо подойдет тем, кто продумывает стратегию размещения модальных окон, создает цепочки и отслеживает аналитику. Если вам нужно одно окно на весь сайт и вы не заморачиваетесь настройками, лучше воспользоваться более “легким” плагином.
На момент написания статьи плагин имеет более 400 000 установок и более 3 000 наивысших оценок. Кстати, плагин поддерживает русский язык.
Popups by OptinMonster
Самый популярный плагин из этой подборки. Плагион обладает всем функционалом своих конкурентов описанных выше. Есть возможность проводить А/Б тесты всего в пару кликов и без сложных настроек. Все виды таргетинга и всплывающих окон.
Есть и внутренняя аналитика поведения на всплывашках. Вы можете воспользоваться одним из шаблонов в библиотеке плагина или создать своё модальное окно с помощью drag-n-drop редактора.
Плагин постоянно обновляется и имеет более 1 000 000 активных установок. Русского языка к сожалению в плагине не имеется.
Tim Ferriss
Это полноэкранное всплывающее окно, которое появляется, когда вы хотите покинуть сайт. Такие вещи раздражают при заходе, но поместить его на выходе – отличная идея. Дизайн простой и понятный. А теперь оценки:
Ясность: здесь оценка 0,75, так как у пользователей уходит некоторое время на понимание написанного. Но фото автора на заднем плане немного проясняет ситуацию.
Контроль: 0,8. Единственный минус здесь – невозможность закрыть окно с помощью клавиши Esc на клавиатуре.
Креативность: 1. Дизайн в порядке. И визуальная иерархия кнопок выглядит замечательно – яркое и заметное согласие и менее броская отмена.
Очарование: 0,5. Определенно, да.
Уважение: 1. «Нет, спасибо, мне не интересно» вместо кнопки отказа – удачная идея. Никакого унижения.
Всего: 83%.
Ведёт на другие рекламные страницы
Есть поп-апы,
которые не собирают данные, а показывают рекламу. И бывает, что на них есть
обманный «крестик» — нажимаешь на него в надежде закрыть, но оказываешься на
рекламной странице.
Welcome to Hell.
Глава
7. Как бороться с баннерной слепотой
Баннерная слепота —
феномен, при котором пользователь осознанно или неосознанно игнорирует
некоторую рекламу: баннеры или поп-апы.
Этот феномен
появился из-за того, что пользователи привыкли делить страницу на
нужное/важное/интересное и «слепые зоны», в которые попадает любой контент,
напоминающий рекламу, в том числе поп-апы. Ещё одна причина —
люди привыкли к определённому расположению блоков на странице
Они знают,
например, что нужная информация расположена слева и по центру экрана, поэтому
просматривают контент преимущественно в этих зонах, не обращая внимания на
другие
Ещё одна причина —
люди привыкли к определённому расположению блоков на странице. Они знают,
например, что нужная информация расположена слева и по центру экрана, поэтому
просматривают контент преимущественно в этих зонах, не обращая внимания на
другие.
Так, на сайте с прогнозом погоды пользователи обычно смотрят только на привычный блок в центре и редко интересуются тем, что есть вокруг него:
Модальное окно
Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
</style>
</head>
<body>
<div id="okno">
Всплывающее окошко!
</div>
<a href="#okno">Вызвать всплывающее окно</a>
</body>
</html>
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
<a href="#okno">Вызвать всплывающее окно</a>
</body>
</html>
Попробовать »
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :
<div id="zatemnenie"> <div id="okno"> Всплывающее окошко!<br> <a href="#" class="close">Закрыть окно</a> </div> </div>
Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем ссылку вызова окна на него.
У дочернего убираем (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="zatemnenie">
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
</div>
<a href="#zatemnenie">Вызвать всплывающее окно</a>
</body>
</html>
Попробовать »
Собирайте email-адреса
Как пример возьмем этот поп-ап.
Прайс — плохой предмет для телефонного разговора. Гораздо проще отправить его на почту, а потом уже обсудить устно.
Конверсия в емейл этого всплывающего окна — 3% (для полной версии — 4,5%). Конверсия десктопной версии, как правило, выше, чем мобильной (как минимум, потому что на клавиатуре проще набирать), но это не повод игнорировать мобильные поп-апы.
Вот еще пример, который доказывает, что сегментация и выбор правильного момента отправки сообщения — это сила. После того как клиент оставил заявку на звонок менеджера, ему показывалось это мобильное всплывающее окно. В заявке просили оставить только номер телефона, чтобы не прогнать пользователя. Иногда после разговора нужно отправить клиенту какие-то документы: коммерческое предложение или прайс. В таком случае необходимо знать почту, а диктовать ее по телефону неудобно. Поэтому имеет смысл спросить заранее с помощью поп-апа.
Конверсия этого поп-апа — 26,3%, а его десктопной версии — 40,5%.
Такой отличный результат получается благодаря тому, что мы действуем на горячую целевую аудиторию, которая готова к сотрудничеству. Однако стоит учитывать, что этот сегмент — небольшой
Для начала лучше брать более широкие сегменты, потому что в конечном итоге важно количество лидов и заказов, а не конверсия
Сертифицированный курс «Ведение бюджетного учета в программе «1С:Бухгалтерия бюджетного учреждения 8»
Подбирайте правильный размер мобильного поп-апа
Мобильный поп-ап может быть маленьким и не перекрывать основное содержание сайта, а может быть большим и привлекать внимание. Давайте сравним
Мы устроили А/Б тест, в котором половине посетителей, выбранных случайным образом, показывалась одна версия поп-апа, а второй половине — другая. Дальше мы смотрим, у какого поп-апа конверсия больше, и оставляем победителя.Вот какие результаты мы получили в этом случае:Вариант А — 1,2%;Вариант Б — 1,7%.Конечно, большое всплывающее окно успешнее, потому что его сложнее проигнорировать: нужно либо закрыть поп-ап, либо оставить номер телефона.Кроме того, свою роль играет и послание — “Оставьте телефон” — четкие указания к действию всегда работают лучше. Однако если оставить только его, потеряется смысл — непонятно, зачем совершать действие, поэтому в маленькой версии лучше оставить ценность.Однако не переборщите с большими поп-апами. Именно это часто бесит пользователей: ведь если ваше сообщение перекрывает основное содержание сайта, есть соблазн его закрыть или вовсе уйти. А это совсем не то, чего бы вам хотелось, не правда ли?
How To Create Popups
Step 1) Add HTML:
<div class=»popup» onclick=»myFunction()»>Click me! <span class=»popuptext»
id=»myPopup»>Popup text…</span></div>
Step 2) Add CSS:
/* Popup container */.popup { position: relative; display: inline-block; cursor: pointer;}/* The actual popup (appears on top)
*/.popup .popuptext
{ visibility: hidden; width:
160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%;
margin-left: -80px;}/* Popup arrow */.popup .popuptext::after { content: «»;
position: absolute;
top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid;
border-color: #555 transparent
transparent transparent;}/*
Toggle this class when clicking on the popup container (hide and show the
popup) */.popup .show {
visibility: visible; -webkit-animation:
fadeIn 1s; animation: fadeIn 1s}/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;}}@keyframes fadeIn { from {opacity: 0;}
to {opacity:1 ;}}
Step 3) Add JavaScript:
<script>// When the user clicks on <div>, open the popupfunction
myFunction() { var popup = document.getElementById(«myPopup»); popup.classList.toggle(«show»);}</script>
Как правильно оформить pop-up
При создании всплывающих окон главная цель — создать pop-up, который будет решать поставленные задачи и не будет раздражать.
Вот 5 правил хорошего попапа:
- Понятный интерфейс. У пользователя должна быть возможность сразу принять решение, а не разбираться с функционалом. Текст, поля и кнопки должны быть крупными и заметными.
- Адаптивность. Учитывайте, что немалая часть трафика приходится на мобильную аудиторию. Всплывающее окно должно полностью помещаться на экране смартфона и быть удобным для просмотра. С закрытием pop-up не должно возникать сложностей.
- Уместность демонстрации. Нужно учитывать логику показа окна и релевантность текущим действиям пользователя. Например, нецелесообразно показывать форму подписки тем, кто уже оставил свой email или предлагать подписку на новые статьи сразу после перехода в блог.
- Pop-up не должен быть навязчивым. Если пользователь закрыл окно, оно не должно открываться вновь. Также не стоит несколько раз подряд предлагать одно и то же. Можно предусмотреть на окне надпись «Я же подписан» или «Не показывать больше».
- Чёткий призыв к действию. Пользователю нужно понимать, какие действия от него ожидаются. Например — «Подписаться на рассылку», «Перейти в каталог товаров», «Читать блог».
Практически в любом сервисе по созданию всплывающих окон все перечисленные требования можно настроить вручную. Если же вы ставите ТЗ на создание попапов верстальщику, не забудьте прописать это в требованиях.
При создании всплывающих окон, нужно учитывать, что попапы — это форма рекламы. Поэтому, следует соблюдать требования Coalition for Better Ads — «Коалиции за лучшую рекламу», созданную ведущими международными торговыми ассоциациями и компаниями. Требованиями Coalition for Better Ads руководствуется Google Chrome, когда решает, нужно ли блокировать сайт и в каком виде его увидит пользователь.
Согласно Coalition for Better Ads нельзя:
- вставлять в попапы видео с автозапуском;
- настраивать фиксированное всплывающее окно, закрывающее 30+% площади экрана;
- применять агрессивные эффекты вроде динамического изменения цветов или мигающих элементов.
Полный текст требований Coalition for Better Ads можно изучить на сайте коалиции. Кроме того, отчет о качестве рекламы доступен в сервисе Google Search Console. Владелец сайта с подтверждёнными правами может изучить отчёт и выявить нарушения стандартов Coalition for Better Ads.
Значение термина «Диагональ экрана»
Полный синтаксис window.open
Полный синтаксис:
Функция возвращает ссылку на объект нового окна, либо , если окно было заблокировано браузером.
Параметры:
- URL для загрузки в новое окно.
- Имя нового окна. Может быть использовано в параметре в формах. Если позднее вызвать с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое.
- Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.
Значения параметров .
- Настройки расположения окна:
- (число)
-
Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.
- (число)
-
Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.
Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.
- Свойства окна:
- (yes/no)
- Скрыть или показать строку меню браузера.
- (yes/no)
- Показать или скрыть панель навигации браузера (кнопки назад, вперёд, обновить страницу и остальные) в новом окне.
- (yes/no)
- Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса.
- (yes/no)
- Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния.
- (yes/no)
- Позволяет отключить возможность изменять размеры нового окна. Значение обычно неудобно посетителям.
- (yes/no)
- Разрешает убрать полосы прокрутки для нового окна. Значение обычно неудобно посетителям.
- Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.
Важно:
Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются «пожеланиями», нежели «требованиями».
Важные моменты:
- Если при вызове указан только первый параметр, параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка, что зачастую более удобно.
- Если указана строка с параметрами, но некоторые параметры отсутствуют, то браузер выставляет их в . Поэтому убедитесь, что все нужные вам параметры выставлены в .
- Когда не указан , то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.
- Если не указаны , новое окно будет такого же размера, как последнее открытое.
Перезвоним вам
Эти поп-апы рассчитаны на людей, которые хотят
получить быструю информацию об услуге во время общения с живым консультантом.
Такие окна бывают двух видов.
Помощники
Пользователя спрашивают, нашёл ли он то, что
искал. И если нет — предлагают заказать обратный звонок, чтобы консультант
объяснил всё подробнее. Иногда такие окошки всплывают даже раньше, чем
пользователь успевает проскроллить страницу до конца, но об этом позже.
Шпионы
Эти поп-апы сообщают пользователю с точностью до
секунды, сколько времени он провел на сайте, а затем предлагают перезвонить для
консультации. Трудно объяснить, как информация о времени, проведенном на сайте,
мотивирует пользователя на заказ обратного звонка. Такие сообщения скорее
пугают, особенно тех пользователей, которые не знакомы с системами аналитики
сайтов.
Виды всплывающих окон
Классификаций вплывающих окон очень много. Так, в одном из вариантов деление на категории происходит на основе взаимодействия с аудиторией:
- Page-Stop останавливает работу сайта до тех пор, пока его посетитель не выполнит целевое действие или не закроет окно. При умелом использовании дают хорошую конверсию, так как баннер невозможно не заметить. При неумелом вызывают раздражение и негативное восприятие.
- Hello-Board не блокирует работу сайта, поэтому провоцирует меньше отрицательных эмоций, но и конверсию дает небольшую.
Существуют и другие типы всплывающих окон:
Entry Pop-Up, или окно-приветствие
Открываются сразу после загрузки сайта. Нужны для экстренного общения с аудиторией. Например, если на площадке возникли технические проблемы, то с помощью такого всплывающего окна можно уведомить пользователей об этом.
Этот тип баннера больше пригоден в качестве информирующего, чем для сбора контактных данных или перенаправления аудитории на целевую страницу. Чтобы откликнуться на просьбу, озвученную в окне, пользователь должен понимать свою выгоду. Для этого в pop-up можно включить следующие элементы:
- код на скидку;
- бесплатную консультацию или обучение;
- ценную статью;
- специальное предложение.
Timed Pop-Up и Scroll Pop-Up
Когда пользователь погружен в изучение страницы, самое время предложить ему оформить подписку или познакомиться с другим материалом, имеющим сходную тематику. Уровень заинтересованности контентом сайта определяется либо временем, прошедшим с момента загрузки, либо количеством пролистывания. Настройки на каждом сайте могут быть индивидуальными, однако эксперты AppSumo говорят, что лучше всего попросить у пользователя контакты через пять секунд после его захода на площадку.
Пролистывание чаще всего настраивается на 40—70 % прочтения страницы. При этом всплывающее окно в браузере покажется при прокручивании окна вверх.
Exit Pop-Up, или окно прощания
На отечественных сайтах встречаются редко, в основном на англоязычных. Всплывают перед тем, как пользователь собирается уйти со страницы. Программа отслеживает перемещение курсора и понимает, когда человек хочет нажать на крестик или перейти в другое окно
В этих условиях задача Exit Pop-Up – удержать внимание пользователя. Ему предлагается познакомиться с другим разделом сайта или оставить свои контакты для продолжения общения
Подробнее
Click Pop-Up, или окно, всплывающее после нажатия
Основное отличие этого окна от других – оно появляется не внезапно, а после того, как пользователь выполнит целевое действие. Например, если человек нажмет кнопку «Оформить подписку», то перед ним откроется окно, а не отдельная страница.
Топ 6 полезных статей для руководителя:
- Как провести мозговой штурм среди сотрудников
- Этапы воронки продаж
- Закон Парето в бизнесе и в жизни
- Что такое трафик и как его посчитать
- Конверсия продаж: 19 причин низкой конверсии
- Обратный звонок на сайте
Как оптимизировать всплывающие окна
Правила создания успешных всплывающих окон во многом сходны с правилами создания эффективных целевых страниц.
Так, эксперты conversionvoodoo.com провели специальное исследование на эту тему. В ходе него pop-up с посещаемостью до 500000 уникальных пользователей в месяц подвергся процедуре оптимизации конверсии, как если бы это была лид-страница.
В ходе эксперимента специалисты подобрали оптимальный заголовок и элементы призыва к действию. В итоге результаты значительно превзошли ожидания – конверсия выросла на 31 %.
Исследование выявило элементы, которые непосредственно влияют на успешность всплывающего окна:
Заголовок Начинать оптимизацию pop-up нужно именно с него. Заголовок должен четко и ясно рассказать пользователю о выгоде, которую он получит, заполнив форму. Акцент должен быть сделан на уникальности предложения и на ограниченном сроке его действия: «Поделимся 5 бесценными способами увеличения продаж», «Предложение действует только 2 дня!» и т. п.
Закрепление названий полей в лид-форме Предположим, человек приступает к заполнению строки «Введите адрес электронной почты». Как только он набирает первую букву, название поля пропадает. Подобного развития событий нужно избегать. Пользователю комфортнее постоянно видеть название строки. Оно может бледнеть, как только начинается ввод данных, но пропадать полностью не должно. Эксперимент доказал, что одна только такая настройка всплывающего окна способна увеличить конверсию на более чем 30 %.
Нельзя располагать текст под кнопкой подписки На эту тему проводилось множество экспериментов, которые подтвердили озвученное утверждение. Так, в одном из тестов участвовали два всплывающих окна. В одном ниже кнопки оформления подписки располагался короткий текст, в другом – нет. Второй вариант обеспечил рост конверсии на 36 %. Все проведенные эксперименты доказывают, что ничто не должно отвлекать пользователя от совершения целевого действия
Это важное правило нужно помнить всегда. Всплывающее окно должно быть всегда в поле зрения посетителей сайта Большая ошибка – закрепить pop-up на странице в конкретном месте
Тогда пользователь, прокручивая материал, рано или поздно потеряет его из вида. Настройки всплывающих окон позволяют делать их плавающими, то есть привязанными к положению относительно окна монитора. Благодаря этой функции у пользователя будет только два варианта: закрыть pop-up или выполнить целевое действие.
Кнопка закрытия всплывающего окна должна быть хорошо видна Даже такой элемент, как кнопка закрытия pop-up, может повлиять на конверсию. В ходе эксперимента тестировались два варианта: обычный крестик, расположенный в правом верхнем углу всплывающего окна, и кнопка с надписью «нет, спасибо», которая помещалась ниже кнопки оформления подписки. Безоговорочно победил первый вариант – традиционный крестик. Эксперимент показал, что кнопка «нет, спасибо» способна понизить конверсию на практически 20 %. Этому есть простое объяснение: пользователи давно привыкли, что в интернете окна закрываются нажатием на значок «Х».
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider
Открыть всплывающее окно при загрузке страницы
Добавьте блоку класс , тогда pop-up откроется при открытии страницы.
Чтобы окно не открывалось каждый раз, добавляйте данный класс при особых условиях, например, в зависимости от параметра в URL (или от сессии посетителя).
Пример SMARTY блока, окно будет открыто если в URL есть параметр :
<div class="hidden {if $smarty.request.open_love == "Y"}cm-dialog-auto-open cm-dialog-auto-size{/if}" id="open_id" title="Заголовок окна">
<p>
Помню. Книгу раскрыв, ты чуть-чуть шелестела страницами.<br/>
Я спросил: «Хорошо, что в душе преломляется лед?»<br/>
Ты блеснула ко мне, вмиг узревшими дали, зеницами.<br/>
И люблю — и любовь — о любви — для любимой — поет.
</p>
</div>
Выводы
Итак, у нас есть два формата, способные принести вам большие объёмы трафика, получить отличную базу для аналитики и при этом не слить весь имеющийся бюджет. У этих форматов есть некоторые недостатки, но преимущества их значительно перекрывают.
К достоинствам относится цена и большие объёмы трафика. Благодаря этому можно начинать тесты даже с небольшим бюджетом и при этом получить приличные объёмы данных ,а то и первые конверсии.
На попандер рекламе хорошо конвертят развлекательные офферы, софт, новинки или товары широкого потребления. Попап же является отличным решением для работы с целевой сегментированной аудиторией. Нужно лишь найти максимально подходящий оффер или же задействовать смежные области.
Оба формата отлично подходят для сбора базы данных под ретаргетинг. Ретаргетинг повышает эффективность рекламы в разы. Не забывайте об этом.
Теперь у вас есть два надёжных инструмента, и вы знаете, как их применять. Осталось лишь запустить рекламные кампании и получить профит.
