Many clients would like to use landing pages to work with Propush.me and ask to provide them with a ready-to-use solutions. However, we are definitely sure that the best strategy is to travel all the way on your own. Noone can know your landing page better than you and we are ready to help you in this process. Feel free to use a step-by-step manual below.
Landing is a page that calls to action (for instance, to subscribe for push notifications, etc.). A landing page that was made correctly, increases the content rate and helps to get more profit.
Creation of any kind of a landing page begins with the creation of HTML page.
Let's start with a simple code and gradually modify it.
<!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>
Here you can find the description of HTML page and tags.
Let's look at the example of the smart tag 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>
Description of callback functions:
sdk.onPermissionDefault(()=> {});- callback function will be executed if the user closes the push notification request window.
sdk.onPermissionAllowed(()=> {});- callback function will be executed if the user clicks the Allow button and allows subscription.
sdk.onPermissionDenied(()=> {});- callback function will be executed if the user clicks on the block/deny button and disables subscription.
sdk.onAlreadySubscribed(()=> {});- callback function will be executed if the user has already been subscribed.
sdk.onNotificationUnsupported(()=> {});- callback function will be executed if the user's browser does not support subscriptions.
You can add any javascript code to the callback function.
You can redirect the user or show him ads.
ymid and var tag parameters’ description:
These parameters should be added to the tag for the postback correct work.
The ymid parameter needs to contain the value of the unique user identifier (Click ID), which is passed by the affiliate program where you buy traffic. In the example above, the Click ID value will be received from the GET parameter of the landing link, which is called clickid.
Example:
In the var parameter you need to pass a unique traffic source identifier (SourceID, Zone ID), which is passed by the affiliate program where you buy traffic. It must be no longer than 40 characters long with the following list of acceptable symbols:
a-z
A-Z
0-9
+!:/ ,?()$=.%[]_-
In the tag example above, the value (Source ID, Zone ID) will be taken from the GET parameter of the link to the landling page, which is called zoneid.
Example:
Here are the numbers 12345 are given as an example. In the real links you should use macroses provided by the affiliate program. So, the link to the landling page considering parameters and macroses may look like this:
Information about macroses should be specified in the affiliate program where you buy traffic.
To work with a Propush.me tag you'll need to have minimal knowledge of the basics of Javascript syntax. The description can be found here
In order to increase the conversion rate and get more push subscriptions, we recommend to personalize your landing. This can be done by adding text translation to the page. We have prepared a sample script that automatically changes the language of your landing page according to the user's browser language.
The script contains a dictionary and language selection logic. The dictionary contains ISO 639 language codes and lines translation.
https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%B4%D1%8B_%D1%8F%D0%B7%D1%8B%D0%BA%D0%BE%D0%B2
The example below contains only 5 translations, but you can easily add/remove them using the language code data.
The best way to implement the script is to place it in the end of the page code (before the closing body tag).
<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>
The script code that changes the language of the page should be copied and added to the HTML page code. Below you will find the full landing code with an example of a tag and script.
From your personal Propush.me account you need to get the current version of the smart tag and add it to the HTML page source code. To do this you need to add and verify the site in your personal admin panel.
To verify the site you will need to download a special file from your personal account and upload it to the root folder (directory) of your site on the server (hosting) or add a special meta tagto the HTML code of your landing page.
After successful verification of the site you will be able to create a smart tag in your personal admin panel to collect subscriptions. The tag code must be copied and added to the HTML page source code.
The ready-made landing should be saved to the index.html file and uploaded to your server (hosting). Download the service worker file from your Propush.me personal admin panel and then upload it to the root directory of your web site on the server (hosting). A link to download the service worker file can be found in your personal admin panel on the page where you create a tag.
The full version of the landing page according to the recommendations above can be found below:
<!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>
If you still need to improve your knowledge, here is some useful info:
Online documentation and lessons on HTML/Javascript:
Online HTML/Javascript code editors:
The list of countries with the names in their official languages can be found here.
Landing rules and other useful articles