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

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

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

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

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

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

Если говорить о попапах, как об элементах страницы, то это призыв к действию (Call To Action, CTA), а в некоторых случаях – обратная связь (Callback).

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

  • Лайтбоксы (Lightbox) – отображаются по центру окна браузера, имеют средний размер, при их появлении задний фон часто затемняют для лучшей фокусировки на окне.
  • Полноэкранные окна (Fullscreen) – имеют большой размер и занимают весь экран.
  • Плавающие или липкие бары (Floating Bar) – тонкие или средние полосы, которые располагаются в верхней или нижней части экрана на всю ширину. Остальной контент страницы при этом не затемняется и почти всегда доступен.
  • Боковые панели (Sidebar) – появляется слева или справа, на всю высоту экрана браузера.
  • Выскальзывающие окна сбоку (Side-In) – наиболее компактные по размеру, очень похожи на лайтбоксы, но появляются с одного из углов экрана.
  • Встраиваемые баннеры (Inline) – фактически это уже не всплывающие, а появляющиеся блоки, которые встраиваются в контент страницы.
  • Мобильные поп-апы (Mobile only) – срабатывают только на экранах мобильных устройств, имеют дизайн и расположение элементов, рассчитанные только на небольшие экраны.
  • Информационные оповещения – очень похожи на служебные сообщения, имеют небольшой размер, но используются для маркетинговых целей.
  • Блокировщики контента (Content Locker) – используются для ограничения доступа к платному содержимому.

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

В качестве условий показа может выступать комбинация разных параметров (так называемое таргетирование): посещение нескольких страниц, заход с определённого типа устройств, переход по реферальным ссылкам (с UTM-метками), нахождение на определённых страницах или в заданном разделе сайта, географическое расположение пользователя, повторный заход, плановые события и т.п.

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

Варианты создания pop-up окон

Сделать своё собственное всплывающее окно можно:

  • силами движка или онлайн-конструктора (смотря на чём сделан сайт), если такие функции есть в вашей платформе;
  • с помощью расширений для вашей CMS (плагин нужно установить, настроить и подключить к своей базе данных или к внешнему сервису);
  • с помощью специальных сервисов-конструкторов (они обеспечивают не только готовый дизайн, но и всю инфраструктурную составляющую, необходимую для работы с данными клиентов);
  • с помощью HTML и JavaScript-кода (нужны профильные знания и навыки).

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

Создание всплывающих окон в OptinMonster

OptinMonster: главная страница

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

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

Преимущества OptinMonster

  • Универсальная платформа, позволяющая создавать любые типы всплывающих окон.
  • Очень гибкий онлайн-редактор (Drag’n’Drop-конструктор), в котором pop-up можно собрать из готовых блоков и элементов интерфейса – простым перетаскиванием.
  • Автоматическая адаптивная вёрстка и специальные Mobile-only попапы.
  • Набор готовых визуальных и звуковых эффектов для привлечения внимания.
  • Огромный выбор тематических шаблонов на все случаи жизни с удобной сортировкой и поиском.
  • Все необходимые элементы вовлечения и геймификации (промокоды, Spin-колесо, счётчики обратного отсчёта и т.п.).
  • Оригинальные технологии обнаружения ухода пользователя со страницы и отсутствия активности.
  • Возможность вставки своего HTML-кода и задействования кастомных вызовов JavaScript.
  • Выявление использования блокировщиков рекламы и их обход.
  • Мощные инструменты для маркетинга (ретаргетинг, куки, проверка геолокации, обнаружение рефереров и т.п.).
  • Большой набор готовых интеграций и web-хуки.
  • Встроенная аналитика и система сплит-тестирования.
  • Асинхронная загрузка кода (минимальное влияние на работу страниц сайта).
  • Готовые плагины для многих популярных платформ (WordPress, PrestaShop, Shopify) – они позволяют встраивать всплывающие окна без работы с кодом.

Шаблоны и работа с конструктором окон

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

OptinMonster: шаблоны

Если ни один из шаблонов вам не подходит, вы можете собрать своё всплывающее окно с нуля – в Drag’n’Drop-конструкторе (из готовых блоков и стандартных элементов).

OptinMonster: редактор

Алгоритм максимально простой:

  1. Создаёте новую кампанию.
  2. Выбираете нужный тип всплывающего окна (OptinMonster выделяет: классические popup’ы, плавающие бары, полноэкранные окна, Inline-блоки, Slide-in и полноэкранные попапы с геймификацией).
  3. Определяетесь с шаблоном (или просто выбираете работу с пустым холстом).
  4. При необходимости редактируете макет окна: добавляете нужные элементы, удаляете ненужные, настраиваете внешний вид, стиль, фон, шрифты и т.п.
  5. Для особо сложных случаев есть опция импорта своего лейаута и вставка свободного HTML-кода.
  6. Настраиваете поля (если есть) и действия кнопок.
  7. Определяетесь с условиями показа.
  8. Сохраняете своё всплывающее окно.
  9. Добавляете код на сайт.
  10. Проверяете работу и изучаете аналитику.

Опытные вебмастера смогут подключить внешние сервисы, задействовать web-хуки и систему A/B-тестирования, очень тонко настроить сегментацию клиентов и правила показа (например, с вызовом своих скриптов).

Настройка условий показа и сегментация аудитории

Работа с триггерами и условиями показа в OptinMonster объединена в одном разделе.

OptinMonster: тригеры

В качестве условий вызова всплывающего окна можно задать:

  • время, проведённое на странице, или общее время на сайте;
  • обнаружение попытки ухода;
  • нажата специальная ссылка, сгенерированная в инструменте MonsterLink;
  • временной интервал с привязкой к текущему времени/дате;
  • путь страницы (раздел или конкретный материал сайта) или UTM-метки в URL;
  • количество просмотренных страниц;
  • тип устройства пользователя;
  • поведение пользователя (зарыл, открыл, видел, включил и т.п.);
  • привязку к сессии и cookies (первое посещение, N-ное, вернулся на сайт);
  • текущее географическое местоположение пользователя;
  • наличие включённого блокировщика рекламы и всплывающих окон;
  • переменные JavaScript;
  • переход с реферальной ссылки;
  • наличие и/или видимость определённого HTML-элемента (CSS-класс или ID).

Условия можно комбинировать и объединять в наборы правил с помощью логических операторов И (AND) и ИЛИ (OR).

Интеграция с внешними сервисами

OptinMonster: интеграции

Чтобы работать с данными из форм, вам нужен сторонний сервис. По умолчанию OptinMonster предлагает своё собственное хранилище лидов – Monster Leads. Но он только хранит лиды, взаимодействовать с клиентами из вашего списка не умеет, например, из него нельзя отправлять электронные письма или SMS-уведомления. Зато можно легко экспортировать информацию в табличном формате.

Monster Leads стоит использовать как своего рода бэкап базы контактов, на случай проблем с другими внешними сервисами.

Нативные интеграции имеются для почтовых сервисов (MailChimp, GetResponse и т.п.), CRM-систем и аналитики.

Плюс, у OptinMonster есть поддержка web-хуков, которые позволяют настроить взаимодействие с любым внешним сервисом. А если у вас нет опыта настройки хухов, всегда можно задействовать сервис-посредник – Zapier.

Вместо встроенных форм допускается использование произвольного HTML-кода. То есть форма может предоставляться напрямую другим внешним сервисом.

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

OptinMonster: публикация

Готовую форму на свой сайт можно встроить несколькими способами:

Вручную. Достаточно просто скопировать HTML-код, который предоставляет OptinMonster и вставить его перед закрывающим тегом </body>. Даже если вы пользуетесь онлайн-конструктором, таким как Wix или uKit, код можно вставить в специальную форму в панели управления сайтом. В некоторых CMS-системах используются специфические шаблонизаторы, поэтому сторонние Java-скрипты нужно экранировать, например, тегами {literal}. Тут вам поможет только официальная документация конкретной CMS.

С помощью плагина/расширения. Готовые плагины есть только для самых популярных CMS-систем, например, для WordPress и PrestaShop. Нужно только установить плагин, активировать его и связать с учётной записью OptinMonster. Вставлять код не придётся.

Через Google Tag Manager. Менеджер тегов позволяет централизованно управлять всеми внешними кодами вашего сайта. Это удобно, но сам инструмент тоже нужно правильно подключить к сайту (хотя это достаточно сделать всего один раз).

Максимум подробностей с примерами по наиболее востребованным платформам можно найти в официальной документации OptinMonster.

Стоит помнить, что многие функции OptinMonster разнесены по разным тарифам сервиса. Например, если вам требуется A/B-тестирование, то нужен тариф не менее Plus, если нужна интеграция с Zapier и вызов формы по клику на ссылке – Pro и выше. И так далее. Всего у OptinMonster 4 тарифа:

  • Basic – от 9 USD/месяц. Любые типы кампаний и бесконечное количество попапов, но только для одного сайта и до 2500 показов в месяц. Предоставляются только базовые интеграции и простая отчётность.
  • Plus – от 19 USD/месяц. Уже до 10 тыс. показов в месяц, всплывающие окна можно разместить на 2 сайтах. Открывается доступ к сплит-тестированию, расширенным интеграциям, к возможности блокировки контента и продвинутым эффектам (звуковым и визуальным).
  • Pro – от 29 USD/месяц. До 3-х сайтов и до 25 тыс. просмотров в месяц. Обнаружение попытки ухода и работа с брошенными корзинами, счётчики обратного отсчёта и элементы геймификации, интеграция с Zapier, 2 субаккаунта (для работы командой).
  • Growth – от 49 USD/месяц. Попапы можно разместить на 5 сайтах, до 100 тыс. просмотров в месяц. Доступ к поведенческой автоматизации и геотаргетингу, интеграция с ManyChat, обнаружение AdBlock, колесо с купонами и любое количество субаккаунтов.

В качестве альтернативы триал-периода предоставляется 14 дней на полный возврат суммы покупки.

Все клиенты получают доступ к ресурсам для обучения (OptinMonster University) и профессиональную настройку одной кампании сотрудниками сервиса.

Выводы

Создавать и интегрировать всплывающие окна лучше всего в специальных сервисах. Только они могут обеспечить комплексный подход к сегментированию аудитории, качественную обработку заявок и взаимодействие с другими важными инструментами (CRM, email и SMS-рассылки, аналитика и т.п.). Реализовать такой функционал своими силами очень сложно, а готовые всплывающие формы в CMS-системах имеют только элементарный функционал.

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

Если вы хотите сэкономить своё время на поисках лучшего сервиса создания всплывающих окон – выбирайте OptinMonster. Он работает с 2013 года и имеет лучшее сочетание цены и функционала на рынке.

» Статьи » Как создать и добавить всплывающее окно на сайт