В последнее время появилась новая схема работы, в которой паблишер направляет пользователя не на офер рекламодателя, а на свой собственный лендинг. Далее, через API, паблишер передает рекламодателю номер телефона пользователя, а также пинкод или другие данные в зависимости от сценария монетизации офера.
Преимущество этой схемы в том, что у паблишера появляется больше возможностей для создания релевантных воронок, где креатив полностью соответствует внешнему виду лендинга, на который переходит юзер. Недостаток заключается в том, что паблишеру необходимо самостоятельно организовать взаимодействие с рекламодателем по API, что требует знания PHP. Не все аффилиейты имеют в своем распоряжении разработчика, способного реализовать обмен данными по API.
Чтобы решить эту проблему, мы разработали JavaScript плагин. Он подключается к любому лендингу, легко настраивается и автоматически решает все вопросы обмена данными по API.
Плюсы использования JavaScript плагина:
- Нет лишнего редиректа: Пользователь сразу попадает на «офер», что сокращает количество редиректов в пути юзера и повышает конверсию.
- Размещение на популярных платформах: Отсутствие лишних редиректов позволяет размещать рекламу на таких площадках, как Google и Facebook, которые строго относятся к редиректам.
- Интеграция пикселей отслеживания: Можно встроить любые пиксели отслеживания, необходимые для рекламных сетей, чтобы точнее отслеживать поведение пользователей и оптимизировать рекламные кампании.
- Максимальная релевантность офера: Вы можете сделать «офер» максимально релевантным креативу или площадке, на которой закупаете рекламу, что улучшает взаимодействие с юзером и увеличивает вероятность конверсии.
Пример 1:
Рекламная кампания для мобильной игры. Пользователь видит креатив с захватывающими кадрами из игры и нажимает на него. Вместо перенаправления на общий сайт, пользователь сразу попадает на лендинг, стилизованный под тему игры, с подробным описанием и видео-обзором. На лендинге есть форма для ввода номера телефона. Плагин автоматически передает данные пользователя рекламодателю и перенаправляет пользователя на игровой портал.
Пример 2:
Кампания по продвижению VPN-утилиты. Пользователь видит рекламу с предложением скачать утилиту. Он попадает на лендинг с информацией о преимуществах приложения и формой для ввода номера телефона. Как результат: больше доверия, проще воронка, лучше CR.
Далее приводим инструкцию по подключению плагина:
1. Работа с файлом html.
1.1. Если у вас файл index.html его нужно переименовать в index.php
1.2. В начале файла вставить:
<?php
function generate_form_token() {
$_SESSION['csrf_token'] = substr(str_shuffle('qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'), 0, 10);
return $_SESSION['csrf_token'];
}
?>
1.3. В форме ввода номера телефона вставить строку:
<input name="csrf_token" id="csrf_token" type="hidden" value="<?= generate_form_token(); ?>">
1.4. В конце файла подключить jquery.js, plugin.js, и затем свои локальные js файлы. Последовательность имеет значение.
<script src="/f/ar_blueauth/src/jquery.js"></script>
<script src="https://ad.unidragonsmedia.com/pinapi/plugin.js"></script>
<script src="/f/ar_blueauth/src/local.js"></script>
2. Работа с файлом js.
2.1. В свой файл js необходимо добавить код для конфигурации плагина и метод инициализации плагина:
const config = {
msisdnInputSelector: "#msisdn", // селектор инпута ввода номера телефона
msisdnButtonSelector: "#subscribe", // селектор кнопки отправки номера телефона
otpFormSelector: "#pin_code", // селектор формы отправки пин кода
otpInputSelector: "#mw_pin_code", // селектор инпута ввода пин кода
otpButtonSelector: "#verify", // селектор кнопки отправки пин кода
errorMsgSelector: ".mw_error_msg", // селектор элемента вывода ошибки
successLinkSelector: "#success_link", // селектор элемента успешной подписки
footerRulesSelector: "#footer_text", // селектор элемента вывода правил в футере
footerTermsSelector: "#terms", // селектор элемента вывода terms в футере
csrfToken: $('#csrf_token').val(),
reqid: "",
hooks: {
onEnableButton: function(button) {
},
onDisableButton: function(button) {
},
onSuccessPhoneNumber: function(response) {
},
onErrorPhoneNumber: function(error) {
},
onSuccessOtpCode: function(response) {
},
onErrorOtpCode: function(error) {
},
onMsisdnInput: function(phoneNumber, maxLength) {
},
onOtpInput: function(otpCode) {
},
onEnableOtpButton: function(button) {
},
onDisableOtpButton: function(button) {
},
onOtpFormSubmit: function(event, form) {
},
onErrorMessage: function(message, config) {
},
onUpdateFooter: function(footerText, termsText) {
}
}
};
Важно чтобы этот код был внутри блока:
document.addEventListener("DOMContentLoaded", function () { ... });
Это гарантирует, что код выполнится только после полной загрузки DOM. Это важно, потому что если скрипт попытается получить доступ к элементам, которые еще не загружены, это вызовет ошибки. DOMContentLoaded событие происходит, когда весь HTML был полностью загружен и обработан.
2.2. Далее необходимо настроить селекторы для элементов формы, используемых плагином.
Селекторы используются для указания плагину, с какими элементами на странице он должен взаимодействовать. Например, селектор для инпута ввода номера телефона позволяет плагину найти и использовать этот инпут для ввода данных пользователя.
Чтобы найти селекторы, вам нужно посмотреть HTML код вашей страницы и определить, какие элементы будут использоваться плагином. Например:
<input type="tel" id="msisdn" name="msisdn">
<button id="subscribe">Subscribe</button>
<form id="pin_code">
<input type="text" id="mw_pin_code">
<button id="verify">Verify</button>
</form>
<div class="mw_error_msg"></div>
<div id="success_link" style="display: none;">Your subscription has been successfully completed!</div>
<div id="footer_text"></div>
<div id="terms"></div>
На основе этого HTML кода вы можете настроить селекторы следующим образом:
msisdnInputSelector: "#msisdn" указывает на инпут для ввода номера телефона. msisdnButtonSelector: "#subscribe" указывает на кнопку для отправки номера телефона. otpFormSelector: "#pin_code" указывает на форму для отправки пин-кода. otpInputSelector: "#mw_pin_code" указывает на инпут для ввода пин-кода. otpButtonSelector: "#verify" указывает на кнопку для отправки пин-кода. errorMsgSelector: ".mw_error_msg" указывает на элемент для вывода сообщений об ошибках. successLinkSelector: "#success_link" указывает на элемент для отображения успешной подписки. footerRulesSelector: "#footer_text" указывает на элемент для вывода правил в футере. footerTermsSelector: "#terms" указывает на элемент для вывода terms в футере.
2.3. Далее необходимо настроить методы хуки.
Методы хуки в конфигурации плагина предоставляют способ для разработчиков расширять функциональность плагина и добавлять свои собственные действия в ответ на определенные события. Например, плагин отслеживает длину вводимого номера телефона и когда юзер ввел все цифры номера срабатывает хук
onEnableButton: function(button) { … }
Внутри метода нужно указать код чтобы кнопка подписки изменила цвет и стала активной.
И наоборот, когда юзер удаляет цифру в номере и номер становится опять не валидным, срабатывает хук
onDisableButton: function(button) {…}. Внутри метода нужно указать код чтобы кнопка подписки изменила цвет и стала не активной.
Ниже приводится описание всех хуков:
onEnableButton: Этот хук вызывается, когда кнопка отправки номера телефона должна быть включена (активирована). onDisableButton: Этот хук вызывается, когда кнопка отправки номера телефона должна быть отключена (деактивирована).
onSuccessPhoneNumber: Этот хук вызывается при успешной отправке и проверке номера телефона. onErrorPhoneNumber: Этот хук вызывается при ошибке проверки номера телефона.
onSuccessOtpCode: Этот хук вызывается при успешной отправке и проверке пин-кода.
onErrorOtpCode: Этот хук вызывается при ошибке проверки пин-кода.
onMsisdnInput: Этот хук вызывается при вводе номера телефона пользователем.
onOtpInput: Этот хук вызывается при вводе пин-кода пользователем.
onEnableOtpButton: Этот хук вызывается, когда кнопка отправки пин-кода должна быть включена (активирована).
onDisableOtpButton: Этот хук вызывается, когда кнопка отправки пин-кода должна быть отключена (деактивирована).
onOtpFormSubmit: Этот хук вызывается при отправке формы пин-кода.
onErrorMessage: Этот хук вызывается для отображения сообщений об ошибках. onUpdateFooter: Этот хук вызывается для обновления текста в футере.
Некоторые хуки обязательны:
onSuccessPhoneNumber – здесь нужно скрыть форму ввода телефона и показать форму ввода пин кода.
onErrorMessage - Этот хук вызывается для отображения сообщений об ошибках.
onUpdateFooter - для вывода обязательных условий по офферу.
onSuccessOtpCode - при успешной отправке и проверке пин-кода.
Если сложно понять для чего хук и нужен ли он вообще на конкретном вашем лендинге, вставьте в внутрь хуков alert() с названием хука и отследите их вывод.
Например:
onEnableButton: function(button) {
alert('onEnableButton');
},
onDisableButton: function(button) {
alert('onDisableButton');
},
Такой подход позволит лучше разобраться с алгоритмом работы плагина и проверить правильно ли были указаны селекторы.
Чтобы протестировать работу вашего лендинга и с эмулировать успешные вводы номера телефона и пин кода, на лендинге вводите номер начиная с цифры 2 после префикса страны, например,
UAE (Арабские Эмираты) – префикс страны 971, значит вводите номер 234567890, на цифре 0 должен сработать хук onEnableButton.
Om (Оман) – префикс страны 968, вводите номер 23456789, на цифре 9 должен сработать хук onEnableButton, так как в этой стране количество цифр в номерах телефонов меньше чем в UAE.
3. После подготовки Лендинга необходимо отдать его на согласование. Ссылка для рекламной сети будет выглядеть примерно так:
https://ваш-домен.com/?pid=ваш-пид&offer_id=офер-id&geo=гео
Параметры в ссылку получаете у нашего менеджера. Ознакомиться с работающим примером лендинга вы можете, перейдя по ссылке.