Нас часто спрашивают, когда Propush.me начнёт предлагать готовые лендинги для сбора подписок; мы же по опыту видим, что готовые решения всегда проигрывают креативному подходу. Поэтому в перспективе наиболее выгодным решением будет настроить собственные лендинги, и мы подскажем, как это сделать.
Лендинг — это страница, призывающая к действию (например, к подписке на пуш-уведомления). Чем лучше продуман лендинг, тем больше прибыли он принесет.
Создание любого типа лендинга начинается с HTML.
Начнём с простого кода, а затем постепенно его усовершенствуем.
<!DOCTYPE html>
<html>
<head>
<script>
/*Here will be added a tag from Propush.me*/
</script>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title data-i18n="title">PressAllow to confirm push-notifications</title>
<style type="text/css">
body,html{height:100%}body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#000;color:#fff;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-content:stretch;align-items:center}body{background:#000;margin:0;padding:0}body{font-size:16px}@media(max-width:1200px){body{font-size:14px}}@media(max-width:1000px){body{font-size:13px}}@media(max-width:750px){body{font-size:11px}}@media(max-width:550px){body{font-size:15px}}@media(max-width:400px){body{font-size:12px}}
</style>
</head>
<body>
<h1 data-i18n="title">PressAllow to confirm push-notifications</h1>
<h2 data-i18n="text">Getnews, updates and advertisement for free by subscribing forpush-notifications</h2>
<script>
/*Here we will add an example script that changes the language of the page according to the language of the user's browser.*/
</script>
</body>
</html>
Узнать больше о HTML и отдельных тегах вы можете здесь.
Вот пример использования Smart-тега Propush.me:
<script>
/* This is an example tag from Propush.me
parameter clickid - the name of the parameter from the address bar of thebrowser that contains a unique user ID
parameter zoneid - the name of the parameter from the address bar of thebrowser that contains the traffic source ID
XXXXX- replace these symbolswith the zone IDyou received in Propush.me */
const url = new URL(window.location.href); /*variable for browser address bar parameters */
const pci = url.searchParams.get('clickid'); /*get the value of the clickid parameter from the address bar of thebrowser */
const ppi = url.searchParams.get('zoneid'); /*get the value of the zoneid parameter from the address bar of thebrowser */
const s = document.createElement('script');
s.src='//rouvoute.net/pfe/current/tag.min.js?z=XXXXX'+'&ymid='+pci+'&var='+ppi;/*replace XXXXX with the zone ID you received in Propush.me */
s.onload= (sdk) => {
sdk.onPermissionDefault(()=> {
/*this callback function will be executed if the user closes the pushnotificationrequest window */
});
sdk.onPermissionAllowed(()=> {
/*this callback function will be executed if the user clicks the Allow button and allows subscription */
});
sdk.onPermissionDenied(()=> {
/*this callback function will be executed if the user clicks on the block/deny button and disables subscription */
});
sdk.onAlreadySubscribed(()=> {
/*this callback function will be executed if the user has already beensubscribed */
});
sdk.onNotificationUnsupported(()=> {
/*this callback function will be executed if the user's browser does not support subscriptions */
});
};
document.head.appendChild(s);
</script>
Значения callback-функций:
sdk.onPermissionDefault(()=> {});- эта функция сработает, если пользователь закроет окно подписки.
sdk.onPermissionAllowed(()=> {});- эта — если юзер кликнет на “Allow” (подпишется на уведомления).
sdk.onPermissionDenied(()=> {});- если юзер кликнет на “Deny” (откажется от подписки).
sdk.onAlreadySubscribed(()=> {});- если юзер уже подписан.
sdk.onNotificationUnsupported(()=> {});- если браузер юзера не поддерживает возможность подписаться на уведомления.
Вы можете добавить любой JS-код к этим callback-функциям.
Можно показать пользователям рекламу, или перенаправить их по любой другой (не запрещенной правилами Propush.me) ссылке.
Параметры ymid и var
должны быть добавлены в тег для корректной работы постбэка.
Параметр ymid отвечает за уникальный номер пользователя (Click ID), который передается сеткой, где вы закупаете трафик. В примере значение Click ID будет получено через GET параметр clickid в ссылке лендинга.
Пример:
А параметр var отвечает за передачу ID источника трафика (SourceID, Zone ID), который так же, как и Click ID, передает та сетка, где вы покупаете трафик.
Он должен быть не более 40 символов в длину со следующим списком допустимых символов:
• a-z
• A-Z
• 0-9
• +!:/ ,?()$=.%[]_-
В примере значение Zone ID будет получено через GET параметр zoneid в ссылке лендинга.
Пример:
Цифры 12345 здесь выступают в качестве примера. В реальной ссылке вам нужно использовать макросы, которые предоставляет ваша сетка. Ссылки на лендинги с нужными макросами могут выглядеть так:
https://example-landing.com/?clickid={clickid}&zoneid={sourceid}
Какие именно макросы нужно использовать в ваших ссылках, нужно уточнить в той сетке, где вы покупаете трафик.
Для работы с тегами Propush.me вам нужны минимальные базовые знания основ Javascript.
Чтобы повысить CR и получить больше подписок, мы рекомендуем персонализировать ваш лендинг, например, добавить на страницу возможность перевода текста. Мы подготовили образец скрипта, который автоматически меняет язык вашего лендинга на тот язык, который юзер использует в своём браузере.
Скрипт содержит и словарь (с языковыми кодами ISO 639), и логику выбора языка.
В примере ниже только пять переводов, но вы можете легко изменить его или дополнить, используя языковые коды.
Лучший способ вставить этот скрипт — поместить его в конец кода страницы, перед тегом </body>.
<script>
/*This is an example of a script that changes the language of the pageaccording to the language of the user's browser.*/
vari18n = function () {
/*Dictionary description
The dictionary contains ISO 639 language codes and translationsof lines */
this.dictionary= {
'en':{
'title':'Press Allow to confirm push-notifications',
'text': 'Getnews, updates and advertisement for free by subscribing forpush-notifications'
},
'de':{
'title':'DrückenSie auf Zulassen, um Push-Benachrichtigungen zu bestätigen',
'text': 'ErhaltenSie kostenlos Nachrichten, Updates und Werbung, indem SiePush-Benachrichtigungen abonnieren'
},
'fr':{
'title':'Appuyezsur Autoriser pour confirmer les notifications Push',
'text': 'Recevezdes informations, des mises à jour et de la publicité gratuitementen vous abonnant aux notifications push.'
},
'it':{
'title':'Premisu Consenti per permettere le notifiche push',
'text': 'Ricevigratuitamente notizie, aggiornamenti e pubblicità abbonandoti allenotifiche push'
},
'ru':{
'title':'Нажмите Разрешить для подтверждения push-уведомлений',
'text': 'Получайте новости, обновления и рекламу бесплатно,подписавшись на push-уведомления'
}};
/*Receiving data about the language of the user's browser */
this.getUserLanguage= function () {
varuserLanguage = window.navigator.language ||window.navigator.languages[0];
varhasRegion = userLanguage.indexOf('-');
if(hasRegion != -1) {
userLanguage= userLanguage.slice(0, hasRegion);
}
returnuserLanguage;
};
};
var translations = new i18n();
/*Logic of language selection and text linecomparison*/
document.addEventListener("DOMContentLoaded",function() {
document.querySelectorAll('[data-i18n]').forEach(function(item){
item.innerText=translations.dictionary[translations.getUserLanguage()][item.dataset.i18n];
});
});
</script>
Код скрипта, который меняет язык, нужно скопировать и вставить в HTML-код вашего лендинга. Ниже вы увидите пример полного кода лендинга с тегом и скриптом.
Вам нужно взять из аккаунта Propush.me текущую версию вашего Smart-тега и добавить его в HTML-код вашей страницы. Для того, чтобы сделать это, нужно сначала верифицировать сайт/лендинг в вашем аккаунте Propush.me.
Чтобы верифицировать сайт/лендинг, нужно скачать специальный файл из вашего аккаунта Propush.me и загрузить его в root folder (directory) вашего сайта на сервере (хостинге) или добавить специальный мета-тег в HTML-код вашего сайта/лендинга.
После успешной верификации сайта вы сможете создать в вашем аккаунте Smart-тег для сбора подписок. Его код нужно скопировать и вставить в HTML-код вашего лендинга.
Готовый лендинг нужно сохранить в index.html файл и загрузить его на ваш сервер (хостинг). Скачайте service worker-файл из аккаунта Propush.me и загрузите его в root folder (directory) вашего сайта на сервере (хостинге). Ссылку для загрузки service worker-файла можно найти в вашем аккаунте, там же, где вы создавали Smart тег.
Полную версию лендинга, созданного в соответствии с этими рекомендациями, можно увидеть ниже:
<!DOCTYPE html>
<html>
<head>
<script>
/*This is an example tag from Propush.me
parameter clickid - the name of the parameter from the address bar of thebrowser that contains a unique user ID
parameter zoneid - the name of the parameter from the address bar of thebrowser that contains the traffic source ID
XXXXX- replace these symbolswith the zone IDyou received in Propush.me */consturl = new URL(window.location.href); /*variable for browser address bar parameters */
constpci = url.searchParams.get('clickid'); /*get the value of the clickid parameter from the address bar of thebrowser */
constppi = url.searchParams.get('zoneid'); /*get the value of the zoneid parameter from the address bar of thebrowser */
consts = document.createElement('script');
s.src='//rouvoute.net/pfe/current/tag.min.js?z=XXXXX'+'&ymid='+pci+'&var='+ppi;/*replaceXXXXXwith the zone ID you received in Propush.me */
s.onload= (sdk) => {
sdk.onPermissionDefault(()=> {
/*user closedthe pushnotificationrequest window */
});
sdk.onPermissionAllowed(()=> {
/*user clickedthe Allow button and allowedsubscription */
window.location.replace('https://www.google.com/search?q=Allow');
});
sdk.onPermissionDenied(()=> {
/*user clickedon the block/denybutton and disabledsubscription */
window.location.replace('https://www.google.com/search?q=Deny');
});
sdk.onAlreadySubscribed(()=> {
/*user has already been subscribed */
window.location.replace('https://www.google.com/search?q=Already+Subscribed');
});
sdk.onNotificationUnsupported(()=> {
/*user's browser does not support subscriptions*/ window.location.replace('https://www.google.com/search?q=Notification+Unsupported');
});
};
document.head.appendChild(s);
</script>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title data-i18n="title">PressAllow to confirm push-notifications</title>
<style type="text/css">
body,html{height:100%}body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#000;color:#fff;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-content:stretch;align-items:center}body{background:#000;margin:0;padding:0}body{font-size:16px}@media(max-width:1200px){body{font-size:14px}}@media(max-width:1000px){body{font-size:13px}}@media(max-width:750px){body{font-size:11px}}@media(max-width:550px){body{font-size:15px}}@media(max-width:400px){body{font-size:12px}}
</style>
</head>
<body>
<h1 data-i18n="title">PressAllow to confirm push-notifications</h1>
<h2 data-i18n="text">Get news, updates and advertisement for free by subscribing forpush-notifications</h2>
<script>
/* Here we will add an example script that changes the language of the pageaccording to the language of the user's browser.*/
vari18n = function () {
/* Dictionary description
The dictionary contains ISO 639 language codes and translationsof lines*/
this.dictionary= {
'en':{
'title':'PressAllow to confirm push-notifications',
'text': 'Getnews, updates and advertisement for free by subscribing forpush-notifications'
},
'de':{
'title':'DrückenSie auf Zulassen, um Push-Benachrichtigungen zu bestätigen',
'text': 'ErhaltenSie kostenlos Nachrichten, Updates und Werbung, indem SiePush-Benachrichtigungen abonnieren'
},
'fr':{
'title':'Appuyezsur Autoriser pour confirmer les notifications Push',
'text': 'Recevezdes informations, des mises à jour et de la publicité gratuitementen vous abonnant aux notifications push.'
},
'it':{
'title':'Premisu Consenti per permettere le notifiche push',
'text': 'Ricevigratuitamente notizie, aggiornamenti e pubblicità abbonandoti allenotifiche push'
},
'ru':{
'title':'Нажмите Разрешить для подтвержденияpush-уведомлений',
'text': 'Получайте новости, обновления и рекламу бесплатно,подписавшись на push-уведомления'
}
};
/*Receivingdata about the language of the user's browser */
this.getUserLanguage= function () {
var userLanguage = window.navigator.language||
window.navigator.languages[0];
var hasRegion = userLanguage.indexOf('-');
if(hasRegion != -1) {
userLanguage= userLanguage.slice(0, hasRegion);
}
return userLanguage;
};
};
var translations = new i18n();
/*Logic of language selection and text line comparison*/
document.addEventListener("DOMContentLoaded",function() {
document.querySelectorAll('[data-i18n]').forEach(function(item){
item.innerText=translations.dictionary[translations.getUserLanguage()][item.dataset.i18n];
});
});
</script>
</body>
</html>
Если вы хотите укрепить свои знания по теме, вот ещё немного полезной информации:
Документация и уроки по HTML/Javascript:
Онлайн-редакторы кода HTML/Javascript:
Landing rules and other useful articles
Правила для лендингов и другие полезные статьи