Как настроить свой popup

Как настроить всплывающую подписную форму: 5 распространенных ошибок

Руководитель агентства Tucan Ната Павлык написала для «Нетологии», как правильно настраивать всплывающие подписные формы для сбора email-подписчиков.

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

Итак, дизайн готов, мы «вкусно» описали наше предложение, и теперь необходимо лишь добавить его на сайт и ждать.

О чем нужно помнить? Вот пять распространенных ошибок настройки всплывающих окон.

Настройка времени

Как правильно рассчитать настройку всплывающего окна по параметру времени, которое пользователь провел на вашем сайте?

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

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

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

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

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

Параметр «глубина просмотров»

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

Правило три: показывать окно не раньше чем на 3-й странице. Опирайтесь на ваш показатель глубины просмотра и тестируйте.

Ключевые разделы сайта

Это более сложная настройка формы, но она и более выигрышная. Показывая разные офферы для разных страниц сайта, вы повышаете конверсию в нужное действие (подписку). Так, например, на странице статей в вашем магазине (если таковые имеются) более релевантным будет предложение подписаться на обновления статей, а на странице товаров — на обзоры/сравнения или новинки.

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

Несколько офферов для всплывающих форм

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

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

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

Источник

Способы создания окон PopUp

Введение

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

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

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.

Вконтакте

Facebook

Twitter

Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.

Постановка задачи(ТЗ)

Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

Решение

Способ 1

Результат:

Очень часто предлагают использовать:

Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Html (без изменений)

Результат аналогичный

Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Добавление магии на Jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:

Также необходимо обновить Html:

Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

Источник

Попап: что это такое и как он поможет увеличить конверсию

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

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

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

Зачем нужен попап

Pop Up окно для сайта помогает бизнесу наладить контакт с аудиторией, а в перспективе – сформировать теплую базу клиентов и увеличить прибыль.

Сбор контактных данных (лидов)

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

Информирование клиентов

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

Большинство клиентов предпочитает звонить. Определите, какая реклама приносит целевые заявки, а какая – тратит бюджет с помощью Коллтрекинга Calltouch.

Коллтрекинг

• Отслеживайте все звонки с сайта с точностью определения источника рекламы выше 96%
• Отслеживайте звонки с оффлайн рекламы и визиток с помощью статических номеров
• Получайте чистый пул номеров, который выделяется именно вашей компании
• Анализируйте подробные отчеты по звонкам: источник перехода, браузер, девайс, гео и другое
• Слушайте записи звонков в удобном плеере для повышения качества работы колл-центра и отдела продаж

Удержание посетителя на сайте

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

Опросы клиентов

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

Формирование базы подписчиков

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

Преимущества попапов

• выводить на определенной странице или в конкретном месте при скролле;
• показывать сразу или с временной отсрочкой;
• демонстрировать после действия пользователя.

Всплывающие окна можно настроить под конкретные задачи и включить туда любую информацию.

Типы всплывающих окон по внешнему виду

Используйте разные всплывающие окна, чтобы привлекать и удерживать внимание пользователей. Это поможет преодолеть усталость от рекламы.

Лайтбокс

Лайтбокс – всплывающее окно, которое затемняет фон браузера, привлекая внимание. Обычно используется для увеличения базы email-адресов.

«Да/Нет» или «Да/Да»

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

В окне «Да/Нет» выбор варианта «Нет» ведет к закрытию попапа. У окна формата «Да/Да» обе кнопки приводят пользователя в одно место — на конкретную страницу сайта.

Геймифицированные

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

Небольшое окно сбоку

Попап — не всегда новое окно, иногда это – небольшой боковой баннер. Это отличная альтернатива назойливой рекламе. Баннер не раздражает посетителей и не мешает просматривать контент.

Плавающая панель

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

Полноэкранный попап

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

Типы всплывающих окон по цели

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

Информационное оповещение

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

Перенаправление страницы

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

Обход AdBlock

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

Вход пользователя в систему

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

Опрос

Попап может выполнять функции опроса: собирать данные и больше узнать о своих клиентах. Это помогает персонализировать маркетинговые кампании и улучшить продукт.

Типы всплывающих окон по триггеру или таргету

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

Приветствие

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

Намерение уйти со страницы

Exit-popup – способ удержать аудиторию на сайте. Он предлагает пользователям пользу или выгоду, которая может заинтересовать их.

Прокрутка как триггер

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

Время, проведенное на странице

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

С привязкой к странице

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

С привязкой к местонахождению

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

С привязкой к cookie

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

Повторное вовлечение неактивных

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

Запланированное

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

Follow-up на сайте

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

Возникающее по клику

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

Как правильно оформить pop-up

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

Заголовок и текст

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

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

Изображение

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

Детали

В зависимости от задачи попапа, можно добавить:

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

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

Поле ввода почты

Поле ввода почты должно быть удобным. Не нужно перегружать его, расставляя большое количество акцентов. Удобно, если в оформлении есть варианты доменов – такое поле легко заполнить не допуская ошибок.

CTA кнопка

СТА кнопка – продолжение текста попапа, поэтому надпись на ней должна быть логичной. Допустим, заголовок попапа – «Подпишитесь на рассылку», значит, надпись на кнопке – «Подписаться», если «Скачайте бесплатный гайд» – то «Скачать».

Почему лучше не делать несколько попапов на странице

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

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

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

Сервисы

Это конструкторы, которые позволяют установить всплывающее окно себе на сайт, настроить дизайн и посмотреть статистику. Большинство сервисов с бесплатным пробным периодом – на английском языке:

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

Плагины

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

У каждой CMS – свои плагины. Владельцы сайта на CMS WordPress могут использовать в качестве конструкторов для всплывающих окон:

Посмотреть список плагинов от разных провайдеров можно на сайте WordPress.

Tilda тоже дает возможность настроить попапы с помощью сторонних сервисов и добавить плагины – подробная информация об этом есть на Tilda Education.

Чтобы собирать заявки даже в нерабочее время и увеличить конверсию сайта на 30% попробуйте окно Обратного звонка Calltouch. Это виджет, который можно установить в 2 клика и настроить под задачи сайта. Платить вы будете только за состоявшиеся телефонные переговоры с оператором или менеджером.

Виджет обратного звонка для сайта

• Повысьте конверсию сайта на 30%
• Экономьте на тарифах: от 5 рублей в минуту
• Адаптируйте форму под ваш сайт. Без разработчика
• Используйте гибкие настройки показа
• Стройте отчеты по звонкам: от показа виджета до ключевого слова

Заключение

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

Платформа для мониторинга отзывов и привлечение клиентов из онлайн-карт

15 дней бесплатного пользования функционалом платформы

CRM для отдела продаж

Скидка 10% на внедрение CRM

Инструмент автоматизации контекстной рекламы

Скидка 25% на 3 месяца тарифа «Старт» + индивидуальный практикум по работе с инструментом

Конструктор для создания маркетинговых квиз-опросов

Месяц бесплатного использования на создание квизов и получение заявок

Сервис управления интернет-рекламой

Получите 3600 бонусов на рекламу в Google Ads от Aori

Агенство по разработке сайтов

Бесплатная помощь в формировании концепции вашего сайта

Источник