Король здесь: 3 правила эффективного поп-апа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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. Обратный звонок на сайте

Приветственные поп-апы

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

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

Зарегистрируйтесь и попробуйте


L’Occitane показывает маленький (и новогодний!) поп-ап с самым актуальным предложением

Поп-апы могут помочь в лидогенерации и предлагать подписаться на рассылку.


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

Плюсом к емейлам приветственный поп-ап может собирать и другую информацию о пользователе:


Clinique предлагает подружиться и хочет знать о вас ВСЕ (прямо как тот парень из тиндера на первом свидании)

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

Обратите внимание!
Плюс больших поп-апов в том, что их невозможно не заметить. Правда, некоторых посетителей сайта это может раздражать

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


Первый большой поп-ап появляется сразу, предлагает подписаться на рассылку и указать страну

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

Поп-апы могут собирать еще и номера телефонов:


Поп-ап с сайта клубного дома Magnum house

Как вариант, можно остаться на связи с пользователем без получения емейла — с помощью Web Push уведомлений.


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

Смотри.Учись показывает небольшой и красивый поп-ап

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

Еще это может быть купон или промокод на скидку в процентах на все предложения:


Ешь, купи, лови

Смотри.Учись предлагает сделать скидку на любой курс за регистрацию

Жилой комплекс Wine House ограничил предложение во времени: скидка действительна до конца декабря

Nasty Gal очень щедры на скидки и не боятся показать дерзкий (как пуля резкий) характер в приветственном поп-апе

Или ограничьтесь определенной категорией товаров:

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


Поп-ап магазина спортивных товаров КАНТ стремительно врывается на горных лыжах со скидкой 500 рублей

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

Возможно, вы заинтересуете пользователя полезным вебинаром:


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

Полезным инструментом:


Поп-ап Oy-li

Или чем-то поинтереснее:

Попробовать

поп-ап окна

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

Добавьте блоку класс , тогда 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>

Чем можно заменить всплывающие окна

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

Баннеры-«небоскребы» Статистика говорит о том, что на данный момент это наиболее эффективный формат рекламного сообщения, дающий высокую конверсию и CTR. Тонкие и высокие баннеры могут доносить до пользователей информацию, собирать контакты и многое другое. Однако перед их использованием нужно убедиться, что они красиво и гармонично смотрятся на странице. Почему баннеры-«небоскребы» так успешны? Во многом потому, что пользователи в первую очередь смотрят на верхнюю часть страницы. Там они замечают верх баннера и уже не могут пропустить рекламное сообщение. К тому же, вытянутый формат позволяет разместить достаточно большой объём информации. Баннер ведет на страницу, на которой пользователь сможет осуществить целевое действие. Это хорошая альтернатива всплывающим окнам.
Рop-under Принцип работы этого формата рекламного сообщения таков: человек заходит на сайт, изучает его, читает контент, а после закрытия обнаруживает, что в браузере открыта вкладка с рекламой. Она то и называется pop-under, то есть баннер, который открывается под основной страницей сайта (в браузерах Internet Explorer, Safari под Windows, Firefox до восьмой версии включительно) и над страницей сайта (в Chrome, Opera, Firefox с девятой версии). Рop-under – это отдельное окно, которое появляется после первого взаимодействия (например, клик) посетителя сайта с контентом. Такой формат может быть эффективнее стандартного всплывающего окна за счет своей ненавязчивости. Рop-under не мешает пользователю знакомиться с контентом сайта: он не перекрывает текст, не выскакивает неожиданно, не преследует по всей странице. Благодаря этим особенностям люди более спокойно его воспринимают. Помимо этого, подобный формат позволяет продолжить общение с пользователем даже после того, как он ушел с сайта.
Рекламные слайды Рекламные слайды также менее навязчивы, чем стандартный pop-up. Как правило, они компактны и занимают небольшую часть страницы, благодаря чему пользователи могут спокойно читать контент. Слайд может размещаться в любой части страницы и запускаться в разное время, в зависимости от действий пользователя. Например, как только человек начинает прокручивать публикацию, слайд приходит в движение.
Предложение, размещенное в футере и хедере Следующая альтернатива всплывающим окнам – размещение торгового предложения в футере (footer) или хедере (header). Footer предполагает публикацию рекламного сообщения в самом низу страницы. Здесь возможны два варианта. В первом предложение помещается внизу, и человек видит его, прочтя всю публикацию. Во втором рекламное сообщение закреплено и при прокручивании страницы остается на одном месте, в нижней ее части. Второй вариант наиболее выигрышный

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

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

7 советов, как сделать так, чтобы всплывающее окно не подталкивало уйти с сайта

1. Следовать требованиям Coalition for Better Ads

Этими требованиями руководствуется Google Chrome, когда определяет, какой ресурс блокировать, а какой нет. Так как это самый популярный в России браузер, владельцам сайтов нужно иметь представление о критериях Coalition for Better Ads.

Так, согласно требованиям Coalition for Better Ads, запрещается:

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

Разрешается:

  • Показывать pop-up пользователям, которые собираются покинуть страницу.
  • Демонстрировать всплывающее окно посетителю сайта, который не проявлял активности более 30 секунд.
  • Показывать рекламу посетителю, дочитавшему публикацию до конца.
  • Транслировать рекламу пользователю, который перемещается между страницами: переходит на другую, потом возвращается на предыдущую и т. п.

2. Отдавать предпочтение лаконичным всплывающим окнам

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

3. Помнить про вежливость, хорошие манеры и тактичность

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

4. Уважать выбор пользователей

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

5. Не злоупотреблять всплывающими окнами

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

Подробнее

6. Не прятать кнопку закрытия окна

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

7. Быть честными

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

Описание скрипта модального окна

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

Её JavaScript код представлен посредством функции :

$modal = function (options) {
  var
    _elemModal,
    _eventShowModal,
    _eventHideModal,
    _hiding = false,
    _destroyed = false,
    _animationSpeed = 200;

  function _createModal(options) { ... }
  function _showModal() { ... }
  function _hideModal() { ... }
  function _handlerCloseModal(e) { ... }

  _elemModal = _createModal(options || {});
  _elemModal.addEventListener('click', _handlerCloseModal);
  _eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
  _eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });

  return {
    show: _showModal,
    hide: _hideModal,
    destroy: function () { ... },
    setContent: function (html) { ... },
    setTitle: function (text) { ... }
  }
};

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

В имеются следующие переменные , , , , , и функции , , , .

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

_elemModal = _createModal(options || {});

Переменные и применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

document.addEventListener('show.modal', function (e) {
  // в e.detail содержится ссылка на открываемое модальное окно
  ...
});
document.addEventListener('hide.modal', function (e) {
  // в e.detail находится ссылка на корневой DOM-элемент закрываемого модального окна
  ...
});

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

Переменная используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

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

Функция используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

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

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

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

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

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

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

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

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

Где найти нужную тему для лидмагнита?

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

  • Google Analytics. Посмотрите, куда на вашем сайте кликают чаще всего. Статьи вашего блога, которые набрали больше всего просмотров, можно преобразовать в раздатку или создать большой материал на эту тему.
  • Поисковые запросы. Введите фразы, связанные с вашей сферой, в «Планировщик ключевых слов» Google Ads или Вордстате Яндекса. Это поможет узнать, чем интересуются клиенты.
  • Соцсети. Анализируйте страницы конкурентов и авторитетных источников. Наверняка самые животрепещущие темы набирают много лайков и комментариев — как раз там и можно подсмотреть идеи.

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

На навязывайте себя в раздатках открыто, делайте
это как можно нативнее.

Глава
6. Поп-апы, которые раздражают пользователей

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

Всплывающий баннер для сайта

Чаще всплывающее окно на сайте необходимо для размещения рекламного баннера. Это тоже реализуется через плагин Popup Maker.

Действуем по аналогии – через раздел Добавление всплывающего окна.

Только вместо настройки формы подписки мы будем загружать баннер. Предварительно он должен быть создан в виде картинки.

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

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

Далее рекламное изображение появится в записи

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

Для этого кликните по загруженной картинке и по иконке в виде карандашика. Поставьте в дополнительных настройках галочку около опции Открывать в новой вкладке.

Переходим к основным настройкам поп ап окна для сайта.

Настройки имеют 5 разделов:

  • Триггеры
  • Нацеливание
  • Отображение
  • Закрыть
  • Продвинутый.

Триггер

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

Выбирать особо не приходится, потому что триггера только 2: кнопка «Открыть» или Автооткрытие.

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

При втором варианте важно установить время появления поп ап баннера. По умолчанию – это 5 секунд

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

На это есть 2 причины. Причина №1. Если пользователь пришел из поиска по запросу, и его заинтересовала статья, его цель – узнать подробности. Поэтому, если реклама появится сразу после загрузки статьи, он может отреагировать негативно и уйти с вашего сайта.

Причина №2 вытекает из первой причины. Если читатель закрыл сайт, пробыв на нем менее 15 секунд, для поисковых роботов это будет сигналом, что на ресурсе некачественная информация и не отвечает на запрос пользователя! Поэтому с этой настройкой будьте внимательны.

Нацеливание

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

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

Отображение

Эта настройка позволяет поработать над внешним видом рекламного баннера через выбор темы. Можно поэкспериментировать, но самые популярные темы – это Light Box и Hello Box.

Функция Настроить тему позволяет изменить ее параметры, например, цвет рамки, прозрачность фона, ширину контейнера, изменить цвет заголовка, стиль и т.д.

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

Закрыть

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

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

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

Альтернативный метод предлагает закрыть окно щелчком по пустому полю. Также это можно сделать, нажав клавишу Esc на клавиатуре. Но перед этим следует поставить галочку около этой опции.

Как сделать pop up, который не бесит, а продает

“Поп апы – зло!” – кричат только те маркетологи, которые не умеют грамотно настраивать pop-up рекламу. Скрольте дальше и мы расскажем как настроить всплывающие окна, которые превратят трафик в лиды.

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

  • Digital Marketer – cообщество для маркетологов, которое рассказывает о новых кейсах и вдохновляющих стратегия развития. Благодаря pop-up, они получили:

    • 2689 клиентов за 2 недели;

    • увеличение продаж на 30.22%;

    • увеличение пребывания на сайте на 35%.

  • Smart Marketer и Boom:

    • получили 8997 дополнительных лидов за месяц;

    • увеличили прибыль на 18,2%;

    • продлили пребывание на сайте на 25,6%;

    • количество просмотренных страниц выросло на 14,1%.

  • iSpionage улучшили трафик рефералов блога на 58% за 1 месяц.

Эти данные наталкивают на мысль, что это не поп-ап плохой, а просто кто-то не умеет с ним работать.

Оформляя pop-up, следуйте этим советам:

CSS

.fond {
 position:absolute;
 padding-top:45px;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:#f8b334;
}
.mymagicoverbox {
 display:inline-block;
 color:#ffffff;
 padding:10px;
 margin:10px;
 cursor:pointer;
 font-weight:300;
 font-family:'Roboto';
}
.mymagicoverbox_fenetre {
 z-index:9999;
 position:fixed;
 margin-left:50%;
 top:100px;
 text-align:center;
 display:none;
 padding:5px;
 background-color:#ffffff;
 color:#97BF0D;
 font-style:normal;
 font-size:20px;
 font-weight:300;
 font-family:'Roboto';
}
.mymagicoverbox_fenetreinterieur {
 text-align:center;
 overflow:auto;
 padding:10px;
 background-color:#ffffff;
 color:#666666;
 font-weight:400;
 font-family:'Roboto';
 font-size:17px;
 border-top:1px solid #e7e7e7;
 margin-top:10px
}
.mymagicoverbox_fermer {
 color:#CB2025;
 cursor:pointer;
 font-weight:400;
 font-size:14px;
 font-style:normal
 font-family:'Roboto';
}
#myfond_gris {
 display: none;
 background-color:#000000;
 opacity:0.7;
 width:100%;
 height:100%;
 z-index:9998;
 position:fixed;
 top:0;
 bottom:0;
 right:0;
 left:0;
}

Настройка

Установить и использовать Popup Maker очень просто. Установите его, как и любой другой плагин WordPress. Перейдите в «Плагины ⁄ Добавить новый». После его активации, появится опция Popup Maker на вашей боковой панели WordPress.

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

Создаем всплывающее окно

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

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

Вот что у меня получилось в редакторе:

После того, как вы добавили содержимое в редактор, необходимо перейти к другим необходимым настройкам.

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

Триггеры: Установите как открывать окно, автоматически или с задержкой по времени. Установите cookie, и т.д.

Задержка времени / Автооткрытие: Задайте задержку перед открытием окна и выберите, какие куки отключат этот триггер.

Файлы cookie: Установите файлы cookie, чтобы предотвратить избыточное открытие всплывающих окон. Это необходимо для пользователей, которые предпочитают их скрывать. Напишите название и время действия файла cookie. Мои параметры выглядят так:

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

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

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

Тип и скорость анимации: Выберите тип и скорость анимации для всплывающего окна.

Позиция: Исправьте положение и перестановку на основе изменения размера экрана, выберите местоположение, в котором открывается окно.

Z-индекс: Параметры этого пункта оставляем по умолчанию.

Настройки для кнопки закрыть: выберите, как пользователь может закрыть оверлей и контролировать закрытие окна.

Настройка темы

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

Некоторые элементы, для которых вы сможете настроить внешний вид:

  • Фон;
  • Контейнер;
  • Заголовок;
  • Кнопка закрытия.

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

Вот примеры моих настроек:

Фон под всплывающим окном

Пример настроек контейнера

Стиль заголовка

Внешний вид содержания

Внешний вид кнопки закрыть

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

Вот что у меня получилось:

Ведёт на другие рекламные страницы

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

Welcome to Hell.

Глава
7. Как бороться с баннерной слепотой

Баннерная слепота —
феномен, при котором пользователь осознанно или неосознанно игнорирует
некоторую рекламу: баннеры или поп-апы.

Этот феномен
появился из-за того, что пользователи привыкли делить страницу на
нужное/важное/интересное и «слепые зоны», в которые попадает любой контент,
напоминающий рекламу, в том числе поп-апы. Ещё одна причина —
люди привыкли к определённому расположению блоков на странице

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

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

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

Добавить комментарий

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

Adblock
detector