Pop-трафик: как заработать на попап-рекламе в 2021?

Closing Popup Windows When They Go to the Opener

In the previous example the link in the popup targets the main page, but the popup stays open in the background after the user clicks on the link. In this section, we’ll set the link so that it closes the popup after the click.

The function takes three parameters. The first is always this, meaning the link itself. The second and third parameters are optional and default to false. (Notice we don’t use them in the example above, we’ll get to them shortly.) The second parameter indicates if the popup should close. The third is if the link should actually send the opener to the linked resource, or if the opener should just get the focus regardless of what its current page is. The third parameter provides a safe way to close the popup after closing, but still having a link to an existing page if the window isn’t actually a popup (such as if the user found the page through a search engine).

When the user clicks on the link, checks if the browser has the focus command (a few older browsers don’t) and if the current window was opened by another window. If these conditions are true, then the opener window gets the focus, the opener is directed to the referenced URL, and the script returns false. Because the function returns false, the link does not go on to the URL (the script has already done that). Note that the link which targets the opener is a little different than the link that opened the popup window to begin with. In this link, says “return goOpener(this)”… the links on the previous pages did not use return.

By default, the popup window stays open but is in the background. If you want the popup to close after going back to the opener, add a second parameter of true to the function call:

Click the link below to launch a popup that contains this link.

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

Options

popupS.window({    mode'alert'|'confirm'|'prompt'|'modal'|'modal-ajax',    title'Title',    content 'Text'|'<div>html</div>'|{tag 'span#id.class'},    className 'additionalClass',    placeholder 'Input Text',    ajax {        url 'http://url.com',        post true,        str 'post=true'},onOpenfunction(){},onSubmitfunction(val){},onClosefunction(){}});

popupS.window({    additionalBaseClass'',    additionalButtonHolderClass'',    additionalButtonOkClass'',    additionalButtonCancelClass'',    additionalCloseBtnClass'',    additionalFormClass'',    additionalOverlayClass'',    additionalPopupClass'',    appendLocationdocument.body,    closeBtn'×',    flagBodyScrollfalse,    flagButtonReversefalse,    flagCloseByEsctrue,    flagCloseByOverlaytrue,    flagShowCloseBtntrue,    labelOk'OK',    labelCancel'Cancel',    loader'spinner',    zIndex10000});

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

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

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

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

Как отключить рекламу в Google Chrome

С гуглом все тоже самое только немного под другим углом.

1. Заходим в настройки гугл хрома
2. в открывшемся окне в меню Дополнительно (1 на рисунке) нажимаем на стрелку и раскрываем подпункты
3. выбираем раздел «Конфиденциальность и безопасность» (2 на рисунке)
4. в открывшейся странице находим раздел Настройки сайта (3 на рисунке) сайта и заходим в него
5. далее ищем в списке пункт Всплывающие окна и предложения и заходим в него
6. Зайдя в него у вас будут список сайтов и уже тут вам решать что удалить, а что оставить, но по умолчанию тут должно быть пусто как например у меня:
7. Вот и все!

В данной статье мы рассмотрели настройки отключение всплывающих окон в браузере которые актуальны на 2019-2020 год (они постоянно меняются из-за обновления браузеров) и теперь вы знаете как:

• как убрать рекламу в браузере
• как убрать рекламу в браузере навсегда
• как удалить рекламу в браузере
• блокировка рекламы в браузере
• браузер без рекламы
• выскакивает реклама в браузере
• реклама браузера гугл хром
• убрать рекламу в яндекс браузере

Работа с WP Popups.

Для создания нового всплывающего окна, вам нужное перейти к WP Popups → Add New.

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

1. Выберите шаблон

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

Бесплатная версия поставляется с двумя готовыми шаблонами — в то время как в премиум-версии шаблонов больше:

Для этого обзора я выбрал элегантный шаблон (Elegant Popup)

2.Добавьте контент.

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

Вы можете использовать вкладку «Content» чтобы добавить содержимое всплывающего окна с помощью классического редактора WordPress.

Кроме этого, здесь есть две примечательные особенности:

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

Когда вы вносите изменения в редакторе, вы сразу же видите эти изменения, показанные в предварительном просмотре вашего всплывающего окна:

3. Настройка внешнего вида

Теперь, на вкладке Appearance (Внешний вид) можно настроить место появление и дизайн всплывающего окна.

В бесплатной версии вы получаете семь различных вариантов позиции:

• Внизу страницы
• Внизу слева
• Внизу справа
• По центру
• Вверху
• Сверху слева
• Сверху справа.

Выбрав новую позицию, вы сразу увидите свою форму в предварительном просмотре:

Теперь вы можете указать оставшиеся настройки:

• Входная анимация
• Размер — вы можете изменить ширину, высоту и отступы
• Цвета
• Указать размытие сайта
• Границы
• Тени
• Размер и положение кнопки закрыть

4. Настройка правил отображения

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

Правила отображения — это то, где плагин WP Popups действительно превосходен.

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

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

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

Например, если вас поведенческие от поисковиков, то вы можете создать правило, которое гласит:

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

В общей сложности, в бесплатной версии WP Popups вам предоставляется 26 различных правил отображения. Вы можете настроить таргетинг на:

• Определенный контент — типы сообщений, типы страниц, категории, теги, пользовательские таксономии, определенные сообщения и так далее.
• Устройства — мобильные, планшеты или ПК
• Пришедшие с — например из определенного веб-сайта или из поисковой системы.
• Браузеры — например Chrome или Firefox
• Новые посетители или постоянные посетители
• И ряд других правил.

Вы можете смешивать и сочетать все эти условия, используя правила И и ИЛИ:

И — все условия в группе правил должны быть выполнены, чтобы всплывающее окно отображалось.

ИЛИ — если выполнено хотя бы одно из условий из группы правил, то всплывающее окно появится.

5. Настройка параметров.

Теперь вам нужно настроить еще две важные детали:

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

Для этого вам нужно перейти в раздел Settings (настройки)

Focus/blur on a window

Theoretically, there are and methods to focus/unfocus on a window. And there are also events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.

Although, in practice they are severely limited, because in the past evil pages abused them.

For instance, look at this code:

When a user attempts to switch out of the window (), it brings the window back into focus. The intention is to “lock” the user within the .

So browsers had to introduce many limitations to forbid the code like that and protect the user from ads and evils pages. They depend on the browser.

For instance, a mobile browser usually ignores completely. Also focusing doesn’t work when a popup opens in a separate tab rather than a new window.

Still, there are some use cases when such calls do work and can be useful.

For instance:

• When we open a popup, it’s might be a good idea to run a on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
• If we want to track when a visitor actually uses our web-app, we can track . That allows us to suspend/resume in-page activities, animations etc. But please note that the event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.

Moving and resizing

There are methods to move/resize a window:

Move the window relative to current position pixels to the right and pixels down. Negative values are allowed (to move left/up).

Move the window to coordinates on the screen.

Resize the window by given relative to the current size. Negative values are allowed.

Resize the window to the given size.

There’s also event.

Only popups

To prevent abuse, the browser usually blocks these methods. They only work reliably on popups that we opened, that have no additional tabs.

No minification/maximization

JavaScript has no way to minify or maximize a window. These OS-level functions are hidden from Frontend-developers.

Move/resize methods do not work for maximized/minimized windows.

Создание CSS-наложения

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

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

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

Сначала рассмотрим установку позиции и добавление цвета

div.overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

Разберем этот код:

• background-color: rgba(0,0,0,.25) — использование RGBA позволяет указать цвет и альфа-значение, альфа — это непрозрачность цвета;
• bottom: 0 — позиционирует элемент внизу страницы;
• left: 0 — позиционирует элемент по левому краю страницы;
• position: fixed — при прокрутке страницы позиция элемента не изменяется;
• top: 0 — позиционирует элемент вверху страницы;
• width: 100% — элемент заполняет всю ширину страницы.

Вторая часть включает flexbox CSS3, что значительно упрощает позиционирование элементов внутри контейнера. Давайте посмотрим:

div.overlay {
    display: flex;
    justify-content: center;
}

Перед тем, как перейти к popup окну для сайта, пояснение Flexbox:

• display: flex — определяет гибкий контейнер, либо inline-flex, либо block (flex);
• justify-content: center — выравнивает содержимое по центру.

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

div.overlay {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

Окончательный код:

div.overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

Лучшие сервисы для создания pop-up окон

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

Ссылка на сервис: OptinMonster

Plerdy

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

Для всех форм доступна карта кликов. 

Ссылка на сервис: Plerdy

Getsitecontrol

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

Ссылка на сервис: Getsitecontrol

MailMunch

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

Ссылка на сервис: MailMunch

PopMechanic

PopMechanic – удобный и легкий в использовании русскоязычный сервис с широким функционалом. Подписка стоит от $12, но есть бесплатная пробная версия (до 1000 пользователей, 5 шаблонов и 1 интеграция).

Ссылка на сервис: PopMechanic

AddThis

AddThis – полностью бесплатный сервис с возможностью создания кастомизированных поп-ап окон. Есть совместимость со всеми популярными CMS.

Ссылка на сервис: AddThis

Ссылка на сервис: Sumo

OptiMonk

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

Ссылка на сервис: OptiMonk

Leadgenic

Leadgenic – профессиональный сервис для повышения конверсии сайта. Есть бесплатный тариф, включающий в себя 3 таргетированных виджета, бесплатную CRM, интеграцию Google Analytics и Яндекс.Метрики.

Ссылка на сервис: Leadgenic

JumpOut

Сервис предлагает множество умных форм для сбора подписчиков, 5 типов виджетов, А/Б тесты, функции для увеличения конверсии и многое другое. Есть как бесплатная версия, так и платная, начинающаяся от 199 рублей в месяц.

Ссылка на сервис: JumpOut

Полный синтаксис window.open

Синтаксис открытия нового окна: :

url
URL для загрузки в новом окне.
name
Имя нового окна. У каждого окна есть свойство , в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно.
params
Строка параметров для нового окна. Содержит настройки, разделённые запятыми

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

Параметры в строке :

• Позиция окна:
  • (числа) – координаты верхнего левого угла нового окна на экране. Существует ограничение: новое окно не может быть позиционировано вне видимой области экрана.
  • (числа) – ширина и высота нового окна. Существуют ограничения на минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
• Панели окна:
  • (yes/no) – позволяет отобразить или скрыть меню браузера в новом окне.
  • (yes/no) – позволяет отобразить или скрыть панель навигации браузера (кнопки вперёд, назад, перезагрузки страницы) нового окна.
  • (yes/no) – позволяет отобразить или скрыть адресную строку нового окна. Firefox и IE не позволяют скрывать эту панель по умолчанию.
  • (yes/no) – позволяет отобразить или скрыть строку состояния. Как и с адресной строкой, большинство браузеров будут принудительно показывать её.
  • (yes/no) – позволяет отключить возможность изменения размера нового окна. Не рекомендуется.
  • (yes/no) – позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

Popup maker: лучший плагин всплывающего окна wordpress

Popup maker представляет плагин всплывающего окна wordpress распространяется бесплатно и он частично на русском. Чтобы он работал применяются четыре элемента:

1. Ссылка.
2. Кнопка.
3. Картинка
4. Появление через некотоое время.

Настройка плагина

Перейдем к настройкам, плагин можете скачать стандартно через поиск из админки, либо отсюда. Активируем и находим слева раздел “popup maker”. На новых версиях в самом начале будет предложение на установку еще одного плагина, нажмите кнопку “skip”, чтобы пропустить. Чтобы добавить новый попап нажимаем на “add popup”.

Разберем сначала шапку и боковую панель. Видим два поля.

1. Название формы, его не будет на блоге.
2. Заголовок окна, это поле выведет крупными буквами заголовок всплывающего окна на блоге.

Теперь боковая панель:

1. Conditions, здесь выбираем разделы и элементы в которых будет действовать попап.
2. Analytics, ставим галочку если хотим чтобы собиралась статистика при клике.
3. Выбираем щаблон оформления.

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

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

1. Всплывающее окно по клику.
2. Автоматическое, то есть через определенное время.

Разберем автоматическое, нажимаем и смотрим на форму настройки.

1. Выставляем время, после которого появится попап.
2. Добавляем.

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

Я для примера выставил 1 месяц, и нажал add.

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

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

Для того чтобы попап появлялся при нажатии, надо выставить в самом начале не Auto Open, а Click Open. Далее переходим в all popups и смотрим на класс.

В моем случае popmake-40, и надо этот класс привязать к элементу. Я сделал запись и написал ссылку, перешел в режим текст и там добавил этот класс. Можете прописать даже код формы обратной связи.

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

Что такое поп-трафик, попапы и попандеры?

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

• попапы (popup) — новая вкладка появляется над страницей, на которой вы находились,
• попандеры или кликандеры (popunder или clickunder) — новая вкладка появляется под исходной страницей.

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

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

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

Пример лендинга, который продвигает оффер на popunder-рекламе 

Заключение.

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

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

Совсем другое дело, когда вы сами полностью контролируете этот вид рекламы. Когда вы сами устанавливаете, что именно показывать, кому показывать, когда показывать и как показывать.

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

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

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

FTPSEO оптимизацияSEO плагиныWooCommerceWordPressАнализ сайтаВебмастерскаяДоменЗаработать на рекламеЗаработать на сайтеЗаработок на партнёрских программахЗащита сайтаМедиа-плагиныНаполнение сайта контентомНастройка сайтаОформление сайтаПлагины для дизайнаПлагины для записейПлагины для защиты

Оставьте комментарий:

Итого

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

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

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

Чтобы закрыть попап: метод . Также попап может закрыть и пользователь (как и любое другое окно). После закрытия окна свойство имеет значение .

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