PopUP-окно - это всплывающее объявление, предназначенное для привлечения веб-трафика или сбора адресов электронной почты. Такие элементы часто являются формами интернет-рекламы в WorldWideWeb. Как правило, это новые окна, открывающиеся в веб-браузере для показа рекламы. Обычно они генерируются JavaScript с помощью межсайтового скриптинга (XSS), иногда со вторичной полезной нагрузкой и использованием AdobeFlash.
Разновидностью PopUP являются всплывающие объявления, которые открываются в новом окне браузера, скрытом в активном.
История возникновения
Первые всплывающие объявления возникли на хостинге Tripod.com в конце 1990 годов. Этан Цукерман утверждает, что он написал код для запуска рекламы в отдельных окнах в ответ на жалобы на баннерные объявления. Впоследствии разработчик неоднократно приносил свои извинения за неудобства, которые стало причинять его изобретение.
Opera была первым крупным браузером, в который были включены инструменты для блокирования всплывающих окон. Обозреватель Mozilla позже улучшил эти разработки, начав блокировать PopUP-окно, генерируемое при загрузке страницы. В начале 2000-х годов все основные веб-браузеры, кроме Internet Explorer, позволяли пользователю почти полностью убирать нежелательные всплывающие объявления. В 2004 году Microsoft выпустила Windows XP SP2, которая добавила блокировку и в этот обозреватель.
Большинство современных браузеров поставляются с инструментами защиты от всплывающих окон. Сторонние инструменты обычно включают и другие функции, например, фильтрацию объявлений.
Всплывающие окна
Некоторые типы загружаемого контента - изображения, бесплатная музыка и другие - могут вызывать всплывающие окна. Кроме того, они иногда выглядят как обычные веб-страницы, и название сайта будет отображаться в строке поиска. Многие ресурсы используют всплывающие окна для отображения информации, не прерывая открытую в данный момент страницу. Например, если бы вы заполнили форму на веб-странице и нуждались в дополнительном руководстве, PopUP-окно дало бы вам дополнительную информацию, не вызывая потери каких-либо данных, уже введенных в форму. Большинство блокировщиков всплывающих объявлений разрешают такую загрузку.
Но нужно помнить, что некоторые веб-инсталляторы, например, используемые McAfee, применяют всплывающее окно для установки программного обеспечения. На многих интернет-браузерах нажатие клавиши Ctrl при щелчке по ссылке позволит обойти фильтр.
При этом щелчок (даже случайный) по одному всплывающему окну может привести к открытию других.
Обход блокировщика всплывающих окон
Комбинация рекламного баннера и всплывающего окна - это «объявление при наведении», которое использует DHTML для отображения на экране поверх контента страницы. С помощью JavaScript объявление может быть наложено поверх веб-страницы в прозрачном слое. Это рекламное объявление может появиться почти во всех случаях, когда этого хочет автор рекламы. Такой скрипт PopUP-окна невозможно заметить заранее. Например, реклама может содержать анимацию AdobeFlash, связанную с сайтом рекламодателя. Она также может выглядеть как обычное окно. Поскольку реклама является частью веб-страницы, ее нельзя заблокировать с помощью блокировщика, но ее открытия можно избежать с помощью сторонних приложений (наподобие AdBlock и AdblockPlus) или с помощью настраиваемых таблиц стилей.
PopUNDER
Такое объявление похоже на обычное PopUP-окно, но оно отображается скрытым за основным окном браузера, а не появляется перед ним. Когда всплывающие объявления стали широко распространенными и стали занимать целый экран компьютера, многие пользователи научились немедленно закрывать их не глядя. Поэтому появились PopUNDER, которые не мешают пользователю просматривать содержимое сайта. Они, как правило, остаются незамеченными до тех пор, пока основное окно браузера не будет закрыто или свернуто. Исследования показали, что пользователи лучше реагируют на такую рекламу, чем на всплывающие объявления, поскольку они не выглядят столь назойливо.
Популярная рекламная технология
В рекламном объявлении задействованы две очень простые функции JavaScript, введенные в 1997 году с помощью браузера Netscape 2.0B3. Эта методология широко используется в Интернете. Современные веб-издатели и рекламодатели используют ее для создания окна перед контентом страницы, загрузки рекламы, а затем отправки его за экран.
Большинство современных браузеров позволяют открывать всплывающее окно PopUP только в том случае, если имеет место какое-либо взаимодействие с пользователем (например, щелчок мыши). Любые неинтерактивные вызовы (обратный вызов по таймеру, события загрузки и т. д.) приведут к блокированию нового окна. Чтобы обойти это ограничение, большинство всплывающих объявлений запускаются при помощи прослушивателя событий мыши, прикрепленного непосредственно к документу или телу документа. Это позволяет зафиксировать все случаи щелчка мыши на странице, которые не были использованы другими обработчиками событий. Например, когда пользователь выделяет текст, щелчок мыши оказывается замечен прослушивателем, прикрепленным к документу. В результате открывается всплывающее окно с использованием вышеуказанного кода.
«Хитрый» генератор PopUP-окон
Пользователи различных сайтов и веб-приложений постоянно сталкиваются с нежелательными всплывающими окнами при пользовании браузером. Обычно такое PopUP-окно убирается с помощью функции «закрыть» или «отменить». Поскольку это типичный ответ пользователя, разработчики стали применять некоторые хитрости. Так, при разработке рекламных сообщений создаются экранные кнопки или элементы управления, похожие на опцию «закрыть» или «отменить». Однако когда пользователь выбирает один из этих вариантов, кнопка выполняет неожиданное или несанкционированное действие (например, открытие нового всплывающего окна или загрузка нежелательного файла в систему пользователя).
Поскольку технологии для веб-дизайна позволяют авторам использовать любой вариант «имитации», некоторые пользователи отказываются кликать или взаимодействовать с любым элементом внутри всплывающего окна вообще.
URL-перенаправление
Иногда URL-адреса перенаправляется на рекламные страницы с помощью функции Background URL redirection. Они иногда открываются в новой вкладке, а затем содержимое старой фоновой вкладки заменяется на рекламные страницы с помощью редиректа. AdblockPlus, uBlock или NoScript не могут блокировать эти всплывающие переадресации. Эту особенность все чаще используют распространители рекламы в поисках способа, как сделать PopUP-окно наиболее активным.
Как избавиться от всплывающих окон
Как убрать рекламу в браузере? В первую очередь проверьте наличие обновлений. Сохранение вашего браузера в актуальном состоянии будет иметь большое значение в борьбе с всплывающими окнами. Большинство обозревателей настроены на автоматическое обновление, но оно может быть отключено. Этот процесс обычно занимает всего несколько минут.
- Firefox: нажмите кнопку с названием приложения в верхнем левом углу. Наведите указатель мыши на «Справка» и выберите «О Firefox». Это откроет окно с информацией о версии обозревателя. Если ваш браузер не будут автоматически загружены и установлены.
- Chrome: нажмите кнопку меню в правом верхнем углу. Выберите «О Chrome» в нижней части, откроется новая вкладка, и браузер проверит наличие обновлений. Если они есть, они будут установлены автоматически.
- Internet Explorer: способ обновления зависит от используемой версии обозревателя. Для более старых вариантов вам нужно будет войти Центр обновления Windows. Для Internet Explorer 10 и 11 вы можете включить автоматические обновления, щелкнув значок Gear и выбрав About Internet Explorer.
Если обновления не помогают
Иногда PopUP-окно для сайта и подобное программное обеспечение внедрено слишком глубоко, чтобы его можно было удалить путем обновления. В подобных случаях переустановка или изменение веб-браузера может помочь решить проблему.
Сначала загрузите последнюю версию обозревателя, который вы хотите использовать. Вы можете найти ссылки для скачивания на главной странице каждого приложения.
Сегодня мы поговорим о том как создать свое popup окно для своего сайта. Сейчас данный метод очень популярен, однако большинство решений для его реализации являются платными. Пример не очень красивого окна (но это же всего лишь пример) внутри записи…
В данной записи мы научимся делать вот такое вот popup окно. Просто, быстро, эффективно, а главное бесплатно!
Любое попап окно по своей сути состоит из двух частей. Первое — затемнение общего фона. Второе — само окно. Окно же в свою очередь как правило разделяется на заголовок, текст и форму подписки. Давайте подготовим базу для нашего окна, учитывая указанную структуру.
Имеем:
fs_popup_bg
— Затемнение сайта;
fs_popup
— Само окно;
fs_popup_head
— Заголовок окна;
fs_content
— Содержимое окна, разделенное на две части;
Теперь пропишем необходимые стили…
Бегло осмотрим стили нашего popup окна.
#fs_popup_bg
— говорит о том, что наш фон, будет черным, и почти не прозрачным (0.9), располагаться будет в левом верхнем углу и занимать всю область экрана. При этом глубина элемента, а точнее его возвышение над другими элементами будет очень большая (заведомо больше других).
#fs_popup
— говорит о том, что окно будет на уровень выше фона (иначе мы бы его не видели). Размеры его будут 600px на 300px с закругленными углами и красной рамкой.
.fs_content_left, .fs_content_right
— говорит нам что блоки прижимаются влево (нужно для их расположения на одном уровне), они имеют отступы и шрифт Arial.
Заполним наше окно содержимым:
* - Данное поле не активно. Нажимая кнопку "Подписаться" Вы даете свое согласие на использование Вашего адреса для целей массовой рассылки рекламных материалов. А еще Вы завещаете свою машину, квартиру и 10% своего дохода автору сайта.
И дополним наши стили, для более красивого отображения:
Вот принципе и все. Как видно из примера JavaScript для popup окна по сути нужен в двух случаях:
1) Событие закрытие нашего окна;
2) Событие на нажатие на кнопку «Подписаться»;
Так же не помешает проверка, показывалось ли данное окно на данном компьютере. Для этих целей вполне подойдет работа с куками.
Известный факт: большинство посетителей не совершают покупки при первом визите на товарную страницу интернет-магазина и даже не оставляют лиды — но как велико это большинство?
Согласно исследованиям компании SeeWhy, таковы 99% посетителей, впервые зашедших на ресурс. Конечно, речь идет в первую очередь о сайтах eCommerce, но все же возникает вопрос: если 99% посетителей ничего не покупают при первом визите, то как побудить их вернуться?
Хорошей новостью станет следующая статистика: 75% посетителей все же готовы возвратиться позже для завершения покупки.
Как бы вы не относились к popup окнам, эта маркетинговая технология все еще эффективна для привлечения внимания и сбора контактных данных (лидогенерации).
Проще говоря, используя popup окна, можно быстрее всего вернуть посетителя на лендинг.
Почему?
Это связано с методикой убеждения, известной как «прерывание паттерна» — когда ваше внимание, «усыпленное» определенным ритмом или последовательностью повествования, вдруг агрессивно привлекает что-то неожиданное. Вы часто испытываете этот эффект при просмотре фильмов, юмористических шоу и даже на важных переговорах.
Если говорить о контент- и email-маркетинге, то «прерывание паттерна» наиболее эффективно, когда читатель уже настроен на решение проблемы и продолжение взаимодействия (подписку на рассылку, покупку и т. д.).
Пример от сервиса Made.com. Маркетологи предложили своим посетителям бесплатный ваучер номиналом в 10 евро за сущий пустяк — адрес электронной почты. Это было сделано потому, что:
- Все любят денежные подарки;
- 10 евро за постоянный контакт по email — небольшая цена.
Согласно данным ExactTarget, электронная почта — наиболее предпочтительный для клиентов маркетинговый канал, ведь 77% потребителей предпочитают email другим каналам взаимодействия с брендом.
Возможно, всплывающие окна не так уж плохи?
Скорее всего, вы ненавидите pop-ups и имеете на это право. Еще бы, кому понравится сразу после перехода на лендинг видеть нечто подобное:
Или вот такое:
Вы можете даже не знать о сфере деятельности компании, а уже по шею засыпаны окнами pop up. Примеры выше — неудачные: прежде всего посетитель хочет узнать побольше о бренде, а потом уже скачивать «Бесплатное руководство по генерации трафика», «Бесплатную электронную книгу» и т. д. Разумеется, большинство пользователей ненавидят такие вещи и отвечают отказом от последующего взаимодействия с брендом.
Возможно, стоит немного остыть и посмотреть на результаты тестов. Что говорят цифры? Вот данные сплит-теста поп апа и кнопки «Нет, спасибо» на popup оффере.
| Текст | Количество просмотров | Количество собранных email | Коэффициент конверсии |
| Нет, спасибо. Я предпочитаю платить полную стоимость | 165 416 | 9928 | 6,0% |
| Мне это неинтересно | 165 625 | 7961 | 4,81% |
| Нет, спасибо | 165 021 | 7616 | 4,62% |
| Нет | 166 072 | 7433 | 4,48% |
Впечатляет? Тогда посмотрим на результаты компаний, эффективно использующих такой подход.
1. Опыт использования всплывающих окон
За обычный день сервис WP Beginner получает около 70-80 новых подписчиков благодаря различным методам лидогенерации. Но чем больше подписная база, тем успешнее бизнес, поэтому маркетологи сервиса решились на ряд экспериментов с pop-ups.
Что было сделано?
Было разработано popup окно, появляющееся, когда пользователь намеревался покинуть сайт. Эффект был достигнут благодаря технологиям отслеживания курсора и прочим методам. Вот как выглядело окно:
Каковы результаты?
Использование всплывающего окна на важнейших страницах (не на всем сайте) повысило количество регистраций на 660%. То есть от 70-80 лидов сервис перешел к показателю в 445-470 лидов за сутки — скачок на качественно новый уровень.
Следующий кейс — от Backlinko. После добавления на лендинг СТА с предложением подписаться на рассылку, конверсия упала до 1.73% — необходимо было срочно что-то сделать. Маркетологи компании разработали popup окно, которое появлялось перед пользователями, решившими покинуть целевую страницу. Вот как оно выглядело:
Помните, что конверсия было около 1.7% до использования popup окна? Через 2 дня после запуска pop-up статистика изменилась. Всего за два дня коэффициент конверсии вырос с 1.73% до 4.83% — более чем в 2 раза!
Конечно, в мире, где один грамотный тест может повысить конверсию на 100, 300%, даже 1300%, результаты этого эксперимента выглядят скромно. Однако это не совсем так.
Прежде всего, имея крупную подписную базу, маркетологи могут создавать релевантный для своей аудитории контент и настраивать систему кросс-селлинга. Таким образом, учитывая допродажи и прочие факторы, один контакт приносит сервису в среднем 15$.
Если popup окна будут приводить по 15 дополнительных подписчиков в сутки, то ежедневный доход вырастет в среднем на $225, а годовой доход — на $82 125 соответственно. Неплохой заработок за 2 минуты проверки настроек, верно?
Очевидно, что ненавистники pop-ups были неправы. Но существуют и другие факторы: показатель отказов и влияние всплывающих окон на пользовательский опыт. Что насчет этого?
2. Как pop-ups влияют на пользовательский опыт и показатель отказов?
Одна из первых мыслей при упоминании pop-up — рост числа отказов, ведь все больше людей будут уходить с лендинга по вине всплывающего окна, что абсолютно логично. Однако, вспомним приведенные выше примеры: маркетологи WP Beginner не увидели колебания данного показателя, равно как и Backlinko — число отказов не изменилось в обоих случаях.
Дэн Зарелла (Dan Zarrella) пришел к такому же выводу после проведения серии тестов на своей личной целевой странице, выяснив, что присутствие всплывающего окна никак не влияет на показатель отказов. Единственное, что изменилось — убрав pop-ups, Дэн лишился 50% входящих лидов.
3. Что насчет пользовательского опыта?
Судя по всему, посетителям все равно. Маркетологи WP Beginner не получили ни одной жалобы на popup окна от своих клиентов.
Если задуматься, в этом есть смысл. Да, неприятно видеть подобное после перехода на ресурс по ссылке с Facebook:
Но это не повод в гневе покидать сайт. Что вы обычно делаете в подобных случаях? Верно — закрываете popup окно и продолжаете поиск нужного контента.
Более того, грамотное использование pop-ups способно повысить пользовательский опыт, по примеру сервиса Vero. Если вы зайдете главную страницу и в течение 30 секунд не предпримете никаких действий, то увидите в углу окно с текстом: «Что мешает вам подписаться на Vero прямо сейчас?».
4. Как уничтожить юзабилити с помощью всплывающих окон?
Однако вы не можете встроить в лендинг любое pop-up-объявление и надеяться на высокую конверсию. Если popup окно не выделяется на странице, то оно как минимум бесполезно.
Вы уже собираетесь уйти с лендинга, и тут… Бам! Произошло что-то непонятное, откуда в середине страницы появилась кнопка СТА? В действительности это popup окно наложилось на незатемненную страницу, слившись с фоном. Когда вы не отделяете pop-ups от остальной страницы, это сильно портит пользовательский опыт.
Как выяснилось, многие маркетологи заблуждаются насчет всплывающих окон — оказывается, они все еще работают. Сейчас вы узнаете, как использовать pop-ups на своем лендинге для достижения максимального эффекта.
5. Создание эффективных всплывающих окон
Прежде чем приступать к созданию pop-ups, рассмотрим их основные виды. Существует две крупных разновидности popup окон:
- Большие окна (оверлеи).
- Окна, всплывающие в результате прокрутки страницы.
Оверлеи
Они выглядят как на примере выше. Подобные окна заслоняют весь экран, затемняя фон. Всплывающее окно остается единственным элементом на странице, который четко виден пользователю — в последнее время наметилась тенденция использования всплывающих окон именно такого формата.
Известный маркетолог Дэн Зарелла тоже использует оверлеи с затемнением фона, но само окно у него гораздо меньше обычного:
Окна, всплывающие в результате прокрутки страницы
Этот вид pop-ups появляется, когда пользователь прокручивает страницу до некоторого этапа — чаще всего данный формат используется в блогах, и он крайне эффективен. Пролистав половину страницы, вы увидите нечто подобное:
В зависимости от ПО или плагина, используемого вами, можно экспериментировать с глубиной прокрутки — как далеко надо зайти пользователю, чтобы увидеть всплывающее окно. Кроме того, вы можете задавать появление pop-ups по времени, проведенному пользователем на сайте.
К заголовкам, текстам полей и кнопок на всплывающих окнах применимы те же требования, что и к контенту на СТА. Ведь pop-ups и являются элементами призыва к действию, цель которых — увеличение просмотров/подписчиков/лидов.
6. Лучшее время для показа всплывающих окон
Если говорить о тестировании оверлеев, то сервис SumoMe собрал следующие данные: на сегодняшний день оптимальное время составляет 5 секунд после перехода посетителя на лендинг.
Сервис WhichTestWon дает другую статистику. В ходе тестов было проверено появление оверлеев на 15, 30 и 45 секунде после посадки пользователя, и оптимальный результат показал первый вариант: появление окна через 15 секунд на 11% эффективнее варианта с 30 секундами, и на 50% — варианта с 45 секундами после посадки.
Но помните — не существует идеального времени появления окна, ведь тесты необходимы в каждом конкретном случае. Это справедливо и для вопроса о частоте появления pop-ups. Проще говоря, статистика чужих ресурсов может мотивировать на собственное тестирование, но не должна быть объектом подражания — тестируйте.
Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна.
О создании всплывающих (модальных) окон в WordPress, мы говорили .
В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово.
Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut — увеличить или уменьшить скорость закрытия .
Для работы необходимо обязательно подключить библиотеку jQuery .
Посмотреть и скачать демо пример вы можете ниже.
Если у вас есть вопросы, задавайте в комментариях.
HTML
Ты действительно любишь васаби?
Небо синее?
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; }JS
$(document).ready(function(){ $(".mymagicoverbox").click(function() { $("#myfond_gris").fadeIn(300); var iddiv = $(this).attr("iddiv"); $("#"+iddiv).fadeIn(300); $("#myfond_gris").attr("opendiv",iddiv); return false; }); $("#myfond_gris, .mymagicoverbox_fermer").click(function() { var iddiv = $("#myfond_gris").attr("opendiv"); $("#myfond_gris").fadeOut(300); $("#"+iddiv).fadeOut(300); }); });Давайте рассмотрим создание модальных всплывающих окон, которые в народе еще называются popup-окна. О создании всплывающих (модальных) окон в WordPress, мы говорили в отдельном уроке. В данном примере модальные окна появляются при клике на кнопку (текст) и исчезают при нажатии в любую область мимо модального окна, или при клике на ключевое слово. Изменяя значения в скрипте fadeIn вы можете увеличить или уменьшить скорость открытия всплывающего модального окна, а fadeOut - увеличить или уменьшить скорость закрытия. Для работы необходимо обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете ниже. Если у вас есть вопросы, задавайте в комментариях. HTML
(Пока оценок нет)
Загрузка...
