WordPress плагины для создания всплывающих окон на сайте

Всплывающая реклама… Сколько разных эмоций возникает от этого словосочетания. Она не нравится пользователям, но приносит хороший доход вебмастерам.

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

Виды всплывающих окон

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

• Стандартный попап — всплывающее окно посередине страницы
• RichMedia — формат всплывающего окна, закрывающий собой почти всю страницу
• Видео с автоплеем — всплывает видео и автоматически начинает проигрываться со звуком (самый мерзкий вид рекламы)
• Всплывающее окно внизу страницы — обычно занимает больше 30% от места на экране
• Объявления блокирующие доступ к сайту на протяжении какого-то времени
• Всплывающее окно в нижнем или верхнем углу страницы, занимающее не больше 20% от места на экране

Это основные форматы, которые используют для всплывающего окна.

Минималистичные виды всплывающих окон

Поп-аут

Современный формат небольшого всплывающего окна в нижнем углу страницы. Обычно показывается только на десктопных устройствах. Занимают не больше 10% от места на сайте и в основном выглядят в виде каких-либо уведомлений.

Хелло-бар

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

Какие задачи решают всплывающие окна

Как ни странно, но попапы нужны не только для размещения в них рекламы. Одной из самых распространенных задач является сбор базы подписчиков в социальные сети или по Email.

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

Делайте попапы по правилам

У браузеров есть четкие рекомендации по допустимым всплывающим окнам.Эти правила разработали в Coalition for Better ADS и их придерживаются все современные браузеры. Если ваш попап не соблюдает эти рекомендации, то браузер может заблокировать вашу рекламу.

Чего делать нельзя:

• Запускать видео со звуком во всплывающем окне
• Делать попап с отчетом без возможности закрытия
• Нельзя, чтобы нижний попап занимал больше 30% от экрана
• Делать мигаюшие, скользящие, пульсирующие и прочие агрессивные попапы

Что делать можно:

• Показывать попап, если пользователь решил покинуть страницу
• Если пользователь бездействовал на странице больше 30 секунд, при условии, что на странице нет видео
• Показывать попап если пользователь ушел на другую вкладку, а потом вернулся на ваш сайт

Еще несколько рекомендаций по всплывающим окнам

Первый совет. Не делайте много текста на попапе. Помните, первое желание пользователя при появлении всплывающего окна — закрыть его и вернуться к контенту сайта. Однако, как не крути, но пользователь пробежится взглядом по содержимому “всплывашки”, и если взгляду будет незачто зацепиться в сплошной стене текста — он так и закроет окно.

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

Если в призыв звучит “подпишись на нас”, то и на кнопке должно быть написано “подписаться”. Если “купи у нас”, то и кнопка “Купить” соответственно.

Второй совет: не обманывайте пользователя и не бесите его. Есть много способов сыграть на пользовательском опыте, гордости пользователя или просто невнимательности. Один из самых распространенных примеров: На попапе есть призыв “подпишись!” и две кнопки, “да” и “нет”. Обычно кнопка Да всегда слева, а Нет справа, мы так привыкли, согласитесь? Но рекламодатель меняет кнопки местами и пользователь не глядя кликает на правую кнопку.. А если её еще и выделить красным цветом, т.к. обычно именно он значит “нет”. Как итог — пользователь подписался обманным путем. Вряд ли он после этого вернется на сайт, где его обманули.

Второй распространенный пример “Вы хотите зарабатывать много? Купите наш курс!” и кнопки “Да я хочу стать богатым” и “Нет, я лучше буду бедным”. По задумке маркетолога это должно сыграть на гордости пользователя, однако это играет только на его злости. Не повторяйте этот пример.

Третий совет. Не используйте несколько попапов одновременно. Что может быть хуже для пользователя, если на один попап наложится другой? С вероятностью 146% он сбежит с вашего сайта и будет полностью прав.

В своей погоне за лидами или подписчиками никогда не забывайте про чувства пользователя и его эмоции. Оставьте только один лаконичный попап, не более того.

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

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

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

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

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

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

Девятый совет. Подтверждайте действия с попапом. Если вы собираете базу подписчиков и пользователь отдал вам свою почту, то подтвердите его подписку появившейся фразой “Вы успешно подписались на нашу рассылку”. Если он отправил заявку, то выведите надпись “Ваша заявка получена, скоро с вами свяжутся”. Обязательно дайте знать пользователю, что будет дальше. Некоторые начинают волноваться, если нет уведомления, что им перезвонят. Что им делать дальше? Непонятно. Облегчите пользователю жизнь и оповестите его об успешном действии.

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

Десятый совет. Тестируйте всплывающие окна на себе и на всех устройствах. Есть такое заблуждение: “Это же моя реклама и мой попап, конечно он мне не интересен, я же не целевая аудитория”. Так вот, это ложь. Истина в том, что вы сами должны быть в восторге от своего оффера и внешнего вида всплывающего окна. Только такой попап можно запускать в работу. В ином случае смысл ждать от него великой конверсии?

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

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

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

Разрешается использовать несколько попапов только в таком случае и никак иначе.

Двенадцатый совет. Анализируйте результаты. Вы можете анализировать ваши попапы с помощью целей в Яндекс.Метрике или Google Analytics, с помощью внутренней статистики вашего сайта или любым другим удобным способом. Не забывайте проводить А/Б-тестирование, менять офферы и виды всплывашек. Анализ — уже половина успешного попапа.

Чек-лист всплывающего окна на сайте

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

1. На попапе нет большого количества текста. Заголовок, призыв и кнопка.
2. На попапе нет информации вводящей пользователя в заблуждение
3. У вас только один попап на сайте
4. На одного юзера попап всплывает только один раз
5. На попапе содержится релевантная странице информация
6. Внешний вид всплывающего окна соответствует дизайну сайта
7. Вы получаете согласие пользователя на обработку его данных
8. Крестик или кнопка “закрыть” легко доступна
9. После выполнения целевого действия есть подтверждение для пользователя
10. Вы протестировали окно на всех устройствах и на себе
11. На попапе настроена аналитика и цели в системах метрики

Как сделать всплывающее окно на сайте 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

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

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

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

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

Popups by OptinMonster

Самый популярный плагин из этой подборки. Плагион обладает всем функционалом своих конкурентов описанных выше. Есть возможность проводить А/Б тесты всего в пару кликов и без сложных настроек. Все виды таргетинга и всплывающих окон.

Есть и внутренняя аналитика поведения на всплывашках. Вы можете воспользоваться одним из шаблонов в библиотеке плагина или создать своё модальное окно с помощью drag-n-drop редактора.

Плагин постоянно обновляется и имеет более 1 000 000 активных установок. Русского языка к сожалению в плагине не имеется.

Добавление всплывающего окна на сайт WordPress — пошаговая инструкция

Добавлять попап мы будем на примере плагина Popup by Supsystic. Почему именно он? Да просто потому, что он довольно легкий, не имеет много лишнего функционала и вполне подходит для решения 90% типовых задач попапа. Зачем нужен лишний функционал, если он не будет использоваться?

Устанавливаем плагин, активируем его и находим в левой колонки админки ссылку “Добавить новый PopUp”.

Перед нам страница со всеми попапами, которые у нас есть. Поскольку попапов нет, страница пуская. Нужно будет нажать на кнопку “добавить попап” уже на самой странице. Таким образом вы попадете на страницу с шаблонами.

Не ходите использовать шаблон? Выберите шаблон под названием “Clear Popup” и твориту с нуля.

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

Вы попадете на страницу с огромным количеством чек-боксов. Не пугайтесь. Тут у нас всё по русски, и достаточно прочитать, что от нас хотят. Многие настройки доступны только в версии PRO, так что сильно тут не разойдешься.

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

Также вы можете добавить кнопки социальных сетей на свой попап.

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

В этом же разделе можно задать и текст письма, который придет пользователю после подписки на рассылку.

Вкладка А/В тестирование доступна только для PRO версии плагина, статистику вы можете настроить бесплатно. По умолчанию статистика самого плагина уже включена, статистика от Google Analytics доступна только в платной версии плагина.

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

Заключение

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