Площадка ONCLICK POPUP для издателя

В этом видео мы рассмотрим особенности площадки POPADS JS для издателя.

Основные моменты #

Важно: ранее на платформе инвентарь Onclick Popup назывался Popads js. Никакой функциональной разницы между ними нет.

Onclick Popup — это всплывающие окна для размещения рекламных сообщений. Окна могут открываться как на переднем (pop-up), так и на заднем фоне (pop-under/tab-under). Pop-under — более тонкий прием распространения рекламы. Он не привлекает внимания пользователя, пока активное окно не будет закрыто, и затрудняет возможность определить источник появления всплывающего окна.

Onclick Popup используется для продвижения wow-товаров, сбора контактных данных взамен на шанс выигрыша чего-либо или для установки cookie файлов. Последний метод применяют при работе с интернет-магазинами, которые используют модель атрибуции «Last cookie win».

Создание площадки #

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

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

Блок «Администрирование» #

Блок «Информация» #

В строке «Имя» укажите название площадки, которое отображает главную суть.

Из списка «Тип инвентаря» выберите инвентарь, который будет использован на площадке.

В нашем случае это «Onclick Popup».

Блок «Настройки» #

Существуют методы открытия, один из которых должен выбрать издатель:

• «Popunder по клику» — реклама открывается во вкладке в невидимой зоне;
• «Popup по клику» — реклама сразу открывается в новой вкладке.

«Acc Bid Floor» — минимальная ставка. Функционал позволяет задать наименьшую ставку, при которой сработает скрипт.

Например, если издатель хочет получать от $0,1 за 1000 показов, нужно прописать значение «0,1». После этого рекламные объявления, которые дают меньше $0,1, не будут отображаться.

Ставка устанавливается в USD за 1000 показов.

Если активировать режим оценки эффективности, реклама не будет показана. Ротации будут выполняться для анализа эффективности площадки.

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

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

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

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

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

Если установить 2 показа за 1 час с интервалом 10 минут — клиент за 1 час увидит 2 промоматериала с задержкой в 10 минут.

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

Если указать 30 секунд, pop-up откроется только через заданное время.

Поле «Активировать после клика по HTML элементам» пригодится, когда для какого-нибудь элемента на сайте, например для кнопки, нужно прописать ID. Как только пользователь нажмет на кнопку с идентификатором, скрипт начнет работать. Процесс направлен на то, чтобы пользователи сначала выполняли необходимые целевые действия, а затем просматривали рекламу, совершив клик по кнопке.

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

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

Схожий функционал содержит поле «Отменить открытие после клика по элемента», которое работает в обратную сторону.

Если поставить галочку возле опции «Открыть 2 рекламных предложения: в попапе и вместо текущей страницы», один клик будет открывать сразу 2 pop-ups.

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

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

Например, если после клика открывается pop-up, на странице сайта кнопки не будут функционировать и ссылки не будут перенаправлять пользователя на другую страницу.

Функцию «Укажите селектор» мы пропустим: она применяется для «продвинутой» настройки.

Блок «Фильтры» #

Блок «Фильтрация источников трафика» #

Блок «Оптимизация и правила» #

Блок «Интеграция» #

Подключение готового скрипта #

Когда необходимые поля будут заполнены, нажмите кнопку «Создать».

Генерируются скрипты: «Directlink» и «Код скрипта». Они расположены в новой вкладке «Подключение». Код применяется для «сложной» настройки.

Мы скопируем и интегрируем ссылку на скрипт на страницу сайта издателя.

Важно:

Функционал pop-up скрипта можно расширить за счет настройки «Fallback». Если рекламу открыть невозможно, «Fallback» запустит другой скрипт. Например, pop-up скрипт сторонней рекламной сети.

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

Добавление в ссылку переменных для оптимизации трафика #

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

<script src="//mediaoaktree.com/v2/loader.js?_t=52468" data-ts="1574069688" data-token="9bb42c5f29e5f1a225e4cd606ef25f1602f1637e" data-promo-cdn="mediaoaktree.com" data-q="QUERY" data-s1="S1" data-s2="S2" data-s3="S3"></script>

Переменные подразделяются на типы:

• «data-q=”QUERY”» — в ссылке вместо «QUERY» передаются ключевые слова или фраза, которые используются для улучшения таргетинга. Настройка применяется по желанию издателя. Рекламные скрипты автоматически берут ключевое слово из заголовка страницы.
• «data-s1=”S1″» — вместо «S1» подставляется источник трафика. Если скрипт размещается на конкретном сайте, «S1» указывать не нужно. Когда один и тот же скрипт добавляют на разные сайты, в параметр «S1» следует внести домен сайта, на котором находится скрипт.
• «data-s2=”S2″» — взамен «S2» прописывается саб-источник трафика. Рассмотрим два примера вспомогательных источников.

В первом случае есть сайт с категориями, которые находятся на саб-доменах. Следовательно, в параметре «S1» пропишем основной домен, а в «S2» — саб-домен:

<script src="//mediaoaktree.com/v2/loader.js?_t=52468" data-ts="1574069688" data-token="9bb42c5f29e5f1a225e4cd606ef25f1602f1637e" data-promo-cdn="mediaoaktree.com" data-s1="website.com" data-s2="movie.website.com"></script>

<script src="//mediaoaktree.com/v2/loader.js?_t=52468" data-ts="1574069688" data-token="9bb42c5f29e5f1a225e4cd606ef25f1602f1637e" data-promo-cdn="mediaoaktree.com" data-s1="website.com" data-s2="music.website.com"></script>

Во втором случае есть рекламная сеть, продающая трафик с различных сайтов. Тогда в «S1» можно подставить название рекламной сети, а в «S2» — домен или ID сайта, на котором размещен рекламный скрипт. Это будет выглядеть так:

<script src="//mediaoaktree.com/v2/loader.js?_t=52468" data-ts="1574069688" data-token="9bb42c5f29e5f1a225e4cd606ef25f1602f1637e" data-promo-cdn="mediaoaktree.com" data-s1="adnetwork.com" data-s2="website_1.com"></script>

<script src="//mediaoaktree.com/v2/loader.js?_t=52468" data-ts="1574069688" data-token="9bb42c5f29e5f1a225e4cd606ef25f1602f1637e" data-promo-cdn="mediaoaktree.com" data-s1="adnetwork.com" data-s2="website_2.com"></script>

• «data-s3=”S3″» — вместо параметра «S3» можно прописать click_id, если издатель планирует использовать postback. Издатель задает значения для «S3» по своему усмотрению. Когда «S3» не указан, платформа генерирует click_id.

Параметры «S1» и «S2» применяются, если один и тот же рекламный тег используется на разных сайтах или проектах с большим количеством категорий контента. Для параметров «S3» и «query» строгих правил по использованию нет.

Издатель может размещать один рекламный тег на двух различных сайтах. Если он пропишет названия сайтов или их домены в параметре «S1» (data-s1=”website1″ и data-s1=”website2″), вы сможете узнать, с какого сайта пришел трафик и большинство конверсий. Также появится возможность понять, как оптимизировать сайты. Без этих сведений не удастся определить сайт с лучшим результатом и подобрать качественную рекламу.

Теперь перейдем к интеграции скрипта на страницу сайта издателя. Разберем процесс на трех случаях.

Добавление ссылки в HTML код #

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

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

Перейдите по ссылке. В новом окне найдите открывающий тег <body>.

После тега вставьте directlink, который сгенерировала платформа.

Нажмите кнопку «Run» и кликните на любую область экрана с демо-страницей.

Скрипт заработает, а в новой вкладке откроется pop-up.

Важно:

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

Если площадка была только что создана — скрипт может не функционировать. Подождите 10-15 минут и проверьте работоспособность повторно.

Добавление ссылки в CMS Blogger #

Чтобы интегрировать Onclick Popup в CMS Blogger необходимо внести изменения в установленную тему. Процесс схож с добавлением скрипта в HTML код.

Сперва авторизуйтесь на Blogger через свой аккаунт и перейдите во вкладку «Theme».

В новом окне нажмите на кнопку «Edit HTML».

На странице с кодом найдите закрывающий тег </head>.

Вставьте ссылку на скрипт в пустую строку перед тегом.

Нажмите «Save theme» — скрипт активируется. Pop-up откроется при клике на любую область сайта, к которому вы его подключили.

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

Добавление скрипта в CMS WordPress #

При использовании CMS WordPress ссылку на скрипт можно добавить двумя способами:

1. внести изменения в тему сайта на WordPress;
2. использовать специальный плагин.

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

Войдите в свою учетную запись сайта на базе WordPress и перейдите во вкладку «Plugins» — «Add New».

Через поисковую строку найдите плагин «Insert Headers and Footers». Нажмите «Install Now».

Когда расширение установится, кликните на «Activate».

Перейдите во вкладку «Settings» — «Insert Headers and Footers».

Вставьте directlinck в поле «Scripts in Header» и нажмите кнопку «Save» — Onclick Popup интегрируется на сайт с WordPress.

Важно: существуют и другие плагины для размещения рекламы на сайте с WordPress. Одно из таких решений — «Ad Inserter — Ad Manager & AdSense Ads». С его помощью можно создать перечень страниц, на которые нужно интегрировать скрипт и добавить иные настройки.

Проверка работы JS на тестовом ресурсе #

Для проверки работы рекламной площадки, воспользуемся тестовой страницей. Мы рассмотрим проверку кода скрипта на примере браузера Google Chrome. Для браузера Firefox процесс будет аналогичным.

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

Перейдите на тестовую страницу сайта W3Schools и нажмите CTRL + SHIFT + I. Появится консоль браузера, откройте вкладку «Console».

Скопируйте код скрипта из раздела «Подключение».

Во вкладке «Console» вставьте код в пустое окно и нажмите «Enter».

Если все сработает правильно, появится сообщение «True».

Кликните по пустой области тестовой страницы.

Onclick Popup сработает в зависимости от ваших настроек.

Важно: если площадка была только что создана — скрипт может не функционировать. Подождите 10-15 минут и проверьте работоспособность повторно.

Напомним, что для pop-up скрипта можно настроить «Fallback». Он пригодится в случаях:

1. Пользователю не подобралась реклама, поскольку ему могут быть присущи специфические местоположения или устройства, под которые нет подходящего оффера.
2. У площадки высокий «Acc Bid Floor». На странице будет отображаться реклама, доход от которой окупит стоимость показа.
3. У площадки установлен фильтр. Это может быть запрет на показ рекламы для определенных браузеров или устройств.

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

Настроить «Fallback» скрипт можно двумя способами.

Первый способ интеграции скрипта #

Стандартная ссылка на pop-up скрипт выглядит так:

<script src="//mediaoaktree.com/pu-placer.js?t=1568800722" data-ts="1568800722" data-domain='jyv-24.com' data-cdn-domain='mediasprucetree.com' data-promo-cdn='mediaoaktree.com' data-pl-token='8fb0f4742e6e6dbc37409c5f2e3c616d27429272' data-type='up' ></script>

В нее необходимо добавить значение data-fallback-src="SRC_TO_SCRIPT", где SRC_TO_SCRIPT заменяется ссылкой на скрипт, который будет срабатывать в качестве «Fallback».

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

https://example.ru/fallback_test.js

Добавим скрипт в ссылку на pop-up:

data-fallback-src="https://example.ru/fallback_test.js"

В результате получим код:

<script src="//mediaoaktree.com/pu-placer.js?t=1568731942&__emulate_no_ad=true" data-ts="1568731942" data-domain='jyv-24.com' data-cdn-domain='mediasprucetree.com' data-promo-cdn='mediaoaktree.com' data-pl-token='8fb0f4742e6e6dbc37409c5f2e3c616d27429272' data-type='up' data-fallback-src="https://example.ru/fallback_test.js"></script>

Для проверки работоспособности кода обратимся к текстовому редактору на базе образовательного сайта W3Schools. О размещении скрипта в CMS Blogger и WordPress, читайте в предыдущих разделах.

Перейдите по ссылке и добавьте готовый скрипт с «Fallback» после закрывающего тега </style>.

Нажмите кнопку «Run» и кликните по любой зоне тестового сайта.

Если реклама подберется, откроется вкладка с оффером.

Чтобы имитировать ситуацию, при которой реклама не будет найдена, добавьте к URL сайта элемент:

&__emulate_no_ad=true

Получится ссылка:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_food_blog&stacked=h&__emulate_no_ad=true

Когда вы перейдете по ссылке, размещенный скрипт исчезнет из кода. Скрипт нужно снова добавить после закрывающего тега </style> и нажать кнопку «Run».

Когда вы кликните по тестовой странице, появится сообщение, что сработал «Fallback», так как подходящая реклама не подобрана.

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

Второй способ интеграции скрипта #

Для тестирования второго способа мы используем тот же алгоритм, но скрипт изменится.

Первая часть кода — оригинальная ссылка на pop-up скрипт. Никаких изменений вносить не нужно:

<script src="//mediaoaktree.com/pu-placer.js?t=1568802131" data-ts="1568802132" data-domain='jyv-24.com' data-cdn-domain='mediasprucetree.com' data-promo-cdn='mediaoaktree.com' data-pl-token='8fb0f4742e6e6dbc37409c5f2e3c616d27429272' data-type='up' ></script>

После ссылки на скрипт необходимо установить «контейнер», в который добавим скрипт другой рекламной сети:

<script>
    window.onnoads_8fb0f4742e6e6dbc37409c5f2e3c616d27429272 = function () {
      // PLACE YOUR CODE HERE
    }
  </script>

Воспользуемся тестовым скриптом и вставим его вместо значения «// PLACE YOUR CODE HERE». Скрипт будет выводить сообщение о том, что реклама не подобралась.

Скрипт выглядит так:

document.onclick = myClickHandler;
        function myClickHandler() {
            alert("Это пример "Fallback" скрипта. Он появляется, когда реклама не подобралась. В реальном примере у издателя сработал бы pop-up скрипт другой сети.");
        }

Объединив все скрипты, получится код для размещения на сайте:

<script src="//mediaoaktree.com/pu-placer.js?t=1568802131" data-ts="1568802132" data-domain='jyv-24.com' data-cdn-domain='mediasprucetree.com' data-promo-cdn='mediaoaktree.com' data-pl-token='8fb0f4742e6e6dbc37409c5f2e3c616d27429272' data-type='up' ></script>

<script>
    window.onnoads_8fb0f4742e6e6dbc37409c5f2e3c616d27429272 = function () {
      document.onclick = myClickHandler;
        function myClickHandler() {
            alert("Это пример "Fallback" скрипта. Он появляется, когда реклама не подобралась. В реальном примере у издателя сработал бы pop-up скрипт другой сети.");
        }
    }
  </script>

Вернемся на тестовый сайт и вставим готовый код.

Нажмем «Run» и сделаем клик по любой точке сайта.

Если реклама подберется, она откроется в новой вкладке.

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

Откроется сообщение, что «Fallback» скрипт сработал.

Подытожим материал:

1. Onclick Popup — всплывающие окна для размещения рекламных сообщений.
2. В блоке «Настройки» можно установить регулярность и условия для показа рекламных объявлений посетителям сайта.
3. При настройке особое внимание следует уделить установке trafficback.
4. Полученный directlink необходимо скопировать и разместить на странице издателя.
5. Работоспособность кода скрипта можно проверить на тестовом ресурсе.
6. Благодаря «Fallback» pop-up скрипт может срабатывать, когда для пользователя не нашлась подходящая реклама.