Как создать простое модальное окно на css

Содержание:

Почему pop up окна так важны для конверсии?

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

Максимальное количество просмотров

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

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

Упрощенный запуск промоакций

Никто не скажет “нет” предложению товара, который они хотят купить.

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

Обратная связь

Что посетители думают о вашем сайте? Почему потенциальные клиенты уходят? Какие продукты они не нашли на сайте? Что покупатели думают о недавно приобретенном товаре? 

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

Это пример pop up окна с запросом фидбека от Нейла Патела:

Не показываете одну и ту же рекламу

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

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

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

Этот вариант подойдет, если вы хотите, чтобы всплывающие окна появлялись на стороннем сайте (не созданном в GetResponse). Для начала откройте раздел Формы и опросы в главном меню

Нажмите Создать форму, затем выберите Формы-приложения.

Выберите тип формы и отредактируйте ее, чтобы она соответствовала брендингу сайта, после чего нажмите Сохранить.

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

Если вы хотите добавить pop up окно на сайт WordPress, ниже мы приводим три варианта действий:

  • Вставьте код JavaScript вручную в хедер (лучший вариант);
  • Добавьте его через Менеджер тегов Google (для продвинутых пользователей);
  • Установите его через сторонний плагин (наименее рекомендуемый вариант).

Вот и все! Pop up окно готово!

Назначение и основные функции всплывающих окон

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

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

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

Как правило, любой современный плагин всплывающего окна WordPress отличается возможностями тонкой настройки по времени (появляется через заданное количество проведенного на сайте времени) и по поведению (появляется после просмотра определенного объема текста, перехода на другие страницы, выхода с сайта).

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

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

Говорите о пользователе, а не о себе

Такой поп-ап вы встретите на развлекательном сайте the Chive:

Фраза в призыве к действию – «Подписаться на лучшую новостную рассылку в мире». С чего они взяли, что она лучшая? И о пользователе – ни слова.

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

«Почему вы уходите? Не понимаю. Дайте нам шанс!» 

Призыв к действию: «Попробовать бесплатно».

При этом текст от первого лица. Какой продукт предлагает компания и почему он заслуживает внимания? Зачем оставаться на сайте, если непонятно, что он предлагает?

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

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента <div> (или любого другого элемента) и его оформление:

<!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;
	  }
    </style>
  </head>

  <body>
  
    <div class="okno">
	  Всплывающее окошко!
	</div>

  </body>
</html>

Попробовать »

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

<!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;
	  }
	  #okno:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!
	</div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

Используя псевдо-класс мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства элемента сменится с на .

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

#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;
}

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент внутри элемента <a>:

<a href="#" id="main">
  <div id="okno">
	Всплывающее окошко!
  </div>
</a>

Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем нашу ссылку на него:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  #main {
	    display: none;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	  }
      #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;
	  }
	  #main:target {display: block;}
    </style>
  </head>

  <body>
  
    <a href="#" id="main">
      <div id="okno">
	    Всплывающее окошко!
      </div>
    </a>
	
	<a href="#main">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

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

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

Доступ к popup-окну

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

В примере, приведенном ниже, показано, как меняется содержимое нового окна после загрузки.

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

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

Описание плагина

Popup Maker доступен бесплатно, в репозитории WordPress. Количество функций, доступных в бесплатной стандартной версии, впечатляет. В зависимости от ваших потребностей, вы сможете расширить Popup Maker за пределы своей основной функциональности. Для этого, на данный момент – доступно 17 дополнительных платных расширений.

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

Изначально, в плагине нет собственной формы подписки по электронной почте. Но это можно будет с легкостью исправить. Например, объединить его с формой подписок Contact Form 7 или Ninja Forms!

Открываем блок в сплывающем окне по клику

Ссылка, которая откроет pop-up блок должна иметь классы:

  • — размер окна будет соответствовать содержимому.

ID блока который необходимо открыть задаётся параметром .

ID блока должен быть уникальным.

Пример:

<a class="cm-dialog-opener cm-dialog-auto-size" data-ca-target-id="open_id">Ссылка-открывашка</a>

<div class="hidden" id="open_id" title="Заголовок окна">
    <p>
        Я люблю тебя больше, чем Море, и Небо, и Пение,<br/>
        Я люблю тебя дольше, чем дней мне дано на земле.<br/>
        Ты одна мне горишь, как звезда в тишине отдаления,<br/>
        Ты корабль, что не тонет ни в снах, ни в волнах, ни во мгле.
    </p>
</div>

Три правила отличного поп-апа

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

  • быть своевременным,

  • релевантным по содержанию,

  • его можно закрыть.

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

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

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

Статья в тему : Карп чем кормить рыбу?

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

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

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

Статья в тему : Зрение карпа. На что реагирует и на что клюет карп?

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

Плюсы и минусы

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

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

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

Недостатки

  • Могут восприниматься как спам: некоторые пользователи устали от обилия всплывающих окон на сайтах и от необходимости их закрывать
  • Могут быть заблокированы в браузере у некоторых пользователей

Если же говорить в целом, то многое зависит от дизайна и уместности всплывающего окна — оно может как увеличить конверсию, так и вызвать раздражение (и снизить посещаемость).

Преимущества Pop-Up магазинов

  • Уменьшение расходов на аренду (вплоть до нуля);
  • Использование дешёвых материалов и предметов — ящики, деревянные европоддоны, старая мебель, велосипеды, винтажные предметы интерьера;
  • Бесплатная реклама за счёт яркого инфоповода и вирусного эффекта;
  • Менять локацию можно хоть ежедневно, охватывая всё новые и новые сегменты целевой аудитории;

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

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

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

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

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

FiNN FLARE

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

Qlean.ru

Сайт Qlean.ru творчески подошёл к оформлению всплывающего окна. Скидка предоставляется на первую уборку в квартире. За это нужно поделиться номером телефона потенциального клиента.

Экспериментируйте

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

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

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

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

Всплывающее окно – первое знакомство

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

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

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

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

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

Плавающие бойлы своими руками

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

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

Бойлы могут иметь следующие характеристики:

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

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

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

Варианты показа всплывающих окон

1. Показ рекламы клиенту на входе

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

2. При скроллинге страницы

Если человек пролистал страницу приблизительно на процентов 50 — 70%, это оптимальный триггер для показа рекламы юзеру. Скроллинг говорит о том, что посетитель изучает ваш сайт, и это хороший момент для показа рекламы. Самый удачный вариант рекламы в этом случае, это оффер максимально релевантный контенту страницы. Например, если на странице продаются часы, то логичным будет сделать рекламу, которая касается часов и подобных аксессуаров.

3. При переходе между страницами

Переходы тоже говорят о заинтересованности клиента в контенте вашего ресурса

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

4. Ловить клиента на пороге выхода

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

5. Клиент, который вернулся

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

Способы блокировки уведомлений

Mozilla Firefox

Если вы пользуетесь браузером Mozilla Firefox, то запомните такую схему. Нажмите на «Меню», затем перейдите в «Инструменты» и «Настройки». После необходимо выбрать «Содержимое». Перед вами должна появиться надпись «Блокирование всплывающих окон», нажмите на «ОК» и проверьте, получилось ли выполнить действие. Для того чтобы составить список сайтов, на которых могут появляться всплывающие окна, выберите «Исключения».

Google Chrome

Необходимо убрать рекламу в браузере Google Chrome? Как и в Mozilla Firefox, найдите «Меню» и «Настройки» (в правом верхнем углу). После поищите опцию «Показать дополнительные настройки». Сделали? Теперь выберите «Личные данные», «Настройки контента» и, наконец, «Всплывающие окна». Нажмите «Блокировать всплывающие окна на всех сайтах».

Opera

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

Обратите внимание на то, что в этом браузере есть функция быстрой блокировки при помощи клавиши F12

unsplash.com

Яндекс.Браузер

Нажмите на «Настройки Яндекс.Браузера» (справа вверху). Затем в меню выберите «Показать дополнительные настройки». Нашли? Теперь нажмите на «Личные данные», а рядом с кнопкой будут «Настройки содержимого». Пролистайте раздел и выберите «Всплывающие окна». Последний этап — «Блокировать всплывающие окна на всех сайтах». Теперь проверьте, удалось ли изменить настройки, если нет — повторите алгоритм действий.

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

Просто учитывайте основные рекомендации. Запомните, что включить блокировку получится через раздел «Настройки». Как правило, все кнопки находятся быстро, у разных браузеров меняются только названия.

Цели, преимущества и недостатки

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

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

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

Недостатки:

  • Снижение посещаемости. Навязчивое появление pop-up раздражает пользователей. В особенности при отсутствии кнопок быстрого закрытия или в случае отображения неинтересного содержимого.
  • Спам. Многоразовое использование подобных блоков для пользователей ухудшает репутацию ресурса.
  • Блокираторы. Современные браузеры имеют в своем арсенале необходимые расширения для блокирования всплывающих объектов с рекламой. Эффективность в таком случае сводится к нулю.
  • Использование popup окна для сайта не должно противоречить интересам аудитории, вызывать отвержения.

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

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

  1. Page-Stop останавливает работу сайта до тех пор, пока его посетитель не выполнит целевое действие или не закроет окно. При умелом использовании дают хорошую конверсию, так как баннер невозможно не заметить. При неумелом вызывают раздражение и негативное восприятие.
  2. 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 полезных статей для руководителя:

  1. Как провести мозговой штурм среди сотрудников
  2. Этапы воронки продаж
  3. Закон Парето в бизнесе и в жизни
  4. Что такое трафик и как его посчитать
  5. Конверсия продаж: 19 причин низкой конверсии
  6. Обратный звонок на сайте
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector