许多客户都希望使用登录页Propush.me并要求为他们提供现成的解决方案。然而，我们绝对确信最好的策略是自己一路旅行。没有人能比你更了解你的登录页面，我们已经准备好在这个过程中帮助你。请随意使用下面的分步手册。
Landing是一个调用操作的页面(例如，订阅推送通知等)。一个正确的登陆页面，增加内容率，并有助于获得更多的利润。
创建任何类型的登陆页面都是从创建HTML页面开始的。
让我们从一个简单的代码开始，逐步修改它。
<！DOCTYPE html >
< html >
< >头
<脚本>
/*这里将添加一个来自Propush.me*/的标签
> < /脚本按sallow确认推送通知
<风格type = " text / css " >
身体身体,html{高度:100%}{无衬线字体类型:Arial,保证金:0;填充:0;background - color: # 000;颜色:# fff; text-align:中心;显示:flex; flex-direction:列;flex-wrap: nowrap;} justify-content:中心;align-content:拉伸,对齐项目:中心}身体{背景:# 000;保证金:0;填充:0}{字体大小:16 px} @media身体(max-width: 1200 px){身体{字体大小:14 px}} @media (max-width: 1000 px){身体{字体大小:13 px}} @media (max-width: 750 px){身体{字体大小:11 px}} @media (max-width: 550 px){身体{字体大小:15 px}} @media (max-width身体:400 px){{字体大小:12 px}}
> < /风格
< / >头
身体< >按sallow确认推送通知
通过订阅push-notifications免费获取新闻，更新和广告
<脚本>
/*在这里我们将添加一个示例脚本，根据用户浏览器的语言来更改页面的语言
> < /脚本
< /身体>
< / html >
在这里你可以找到HTML页面和标签的描述。
让我们来看看智能标签Propush.me的例子:
<脚本>
/*这是一个来自Propush.me的示例标签
parameter clickid -来自浏览器地址栏的参数名称，包含唯一的用户ID
parameter zoneid -浏览器地址栏中包含流量源ID的参数名称
XXXXX-将这些符号替换为您在Propush中接收到的区域id。我* /
const url =新的url (window.location.href);/*浏览器地址栏参数*/
const pci = url.searchParams.get('clickid');/*从浏览器地址栏获取clickid参数的值*/
const ppi = url.searchParams.get('zoneid');/*从浏览器地址栏获取zoneid参数的值*/
const s = document.createElement('script');
s.c src='//www.lilylick.com/help//rouvoute.net/pfe/current/tag.min.js?z=XXXXX'+'&ymid='+pci+'&var='+ppi;/*replace XXXXX与您在Propush中收到的区域ID。我* /
S.onload = (sdk) => {
sdk.onPermissionDefault (() = > {
/*如果用户关闭推送通知请求窗口*/，这个回调函数将被执行
})；
sdk.onPermissionAllowed (() = > {
/*这个回调函数将被执行，如果用户点击允许按钮并允许订阅*/
})；
sdk.onPermissionDenied (() = > {
/*这个回调函数将被执行，如果用户点击阻止/拒绝按钮并禁用订阅*/
})；
sdk.onAlreadySubscribed (() = > {
如果用户已经订阅了*/，则该回调函数将被执行
})；
sdk.onNotificationUnsupported (() = > {
/*如果用户的浏览器不支持订阅，将执行此回调函数*/
})；
};
document.head.appendChild(年代);
> < /脚本
回调函数描述:
sdk.onPermissionDefault (()=> {});-当用户关闭推送通知请求窗口时，将执行回调函数。
sdk.onPermissionAllowed (()=> {});-如果用户点击允许按钮并允许订阅，将执行回调函数。
sdk.onPermissionDenied (()=> {});-如果用户点击阻止/拒绝按钮并禁用订阅，将执行回调函数。
sdk.onAlreadySubscribed (()=> {});-如果用户已经订阅，将执行回调函数。
sdk.onNotificationUnsupported (()=> {});-如果用户的浏览器不支持订阅，将执行回调函数。
您可以向回调函数添加任何javascript代码。
你可以重定向用户或向他展示广告。
Ymid和var标签参数说明:
的标记中应该添加这些参数回发正确的工作。
的ymid参数需要包含唯一用户标识符(单击ID)的值，该值由您购买流量的附属程序传递。在上面的示例中，Click ID值将从着陆链接的GET参数接收，该参数称为clickid。
例子:
在var参数，您需要传递一个唯一的流量源标识符(SourceID，区域ID)，该标识符由您购买流量的附属程序传递。它必须不超过40个字符，包含以下可接受的符号列表:
-
无所不包的
-
无所不包的
-
0 - 9
-
+！:/ ,?()$=.%[]_-
在上面的标记示例中，值(Source ID, Zone ID)将取自到着陆页面的链接的GET参数，该参数称为zoneid。
例子:
这里给出12345作为一个例子。在真正的链接中，您应该使用会员程序提供的宏。所以，考虑到参数和宏，登陆页面的链接可能是这样的:
关于宏的信息应该在你购买流量的附属计划中指定。
用推进器工作me标签，你需要有Javascript语法的基本知识。描述可以在这里找到在这里
为了提高转化率和获得更多推送订阅，我们建议个性化您的登陆。这可以通过向页面添加文本翻译来实现。我们准备了一个示例脚本，可以根据用户的浏览器语言自动更改登录页面的语言。
脚本包含字典和语言选择逻辑。字典包含ISO 639语言代码和行翻译。
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
下面的示例只包含5个翻译，但是您可以使用语言代码数据轻松地添加/删除它们。
实现该脚本的最佳方法是将其放在页面代码的末尾(在结束主体标记之前)。
<脚本>
这是一个脚本的例子，根据用户浏览器的语言来改变页面的语言
Vari18n = function () {
/ *词典描述
字典包含ISO 639语言代码和行*/的翻译
这一点。字典= {
“en”:{
'title':'按允许确认推送通知'，
'text': '通过订阅推送通知免费获取新闻，更新和广告'
}，
“德”:{
'title':'DrückenSie auf Zulassen，嗯Push-Benachrichtigungen zu bestätigen'，
'text': 'ErhaltenSie kostenlos Nachrichten, Updates und Werbung, indem SiePush-Benachrichtigungen abonnieren'
}，
“fr”:{
'title':'Appuyezsur Autoriser pour confirmer les notifications推送'，
'text': '接收信息，des mises à jour et de la publicité gratuitementen vous abonnant aux notifications push '
}，
“它”:{
“标题”:“前提一致per permettere le notifiche push”，
'text': 'Ricevigratuitamente notizie, aggiorchenti e pubblicità abbonandoti allenotifiche push'
}，
“俄罗斯”:{
“标题”:“НажмитеРазрешитьдляподтверждения推——уведомлений”,
“文本”:“Получайтеновости,обновленияирекламубесплатно,подписавшисьна-推уведомления”
}};
/*接收关于用户浏览器语言的数据*/
这一点。getUserLanguage= function () {
varuserLanguage = window.navigator.language ||window.navigator.languages[0];
varhasRegion = userLanguage.indexOf('-');
if(hasRegion != -1) {
userLanguage = userLanguage。片(0,hasRegion);
｝
returnuserLanguage;
};
};
Var translations = new i18n();
/*语言选择逻辑和文本行比较*/
document.addEventListener(“DOMContentLoaded”内,函数(){
document.querySelectorAll(“[data-i18n]”).forEach(函数(项){
item.innerText = translations.dictionary [translations.getUserLanguage ()] [item.dataset.i18n];
})；
})；
> < /脚本
应该复制更改页面语言的脚本代码，并将其添加到HTML页面代码中。下面你会发现完整的登陆代码和一个标签和脚本的例子。
从你的个人推动。me帐户您需要获得当前版本的智能标记，并将其添加到HTML页面源代码。要做到这一点，您需要添加和验证网站在您的个人管理面板．
要验证站点，您需要从您的个人帐户下载一个特殊的文件，并将其上传到服务器(托管)上站点的根文件夹(目录)或在登录页面的HTML代码中添加一个特殊的元标记。
成功验证网站后，您将能够在您的个人管理面板中创建一个智能标记来收集订阅。标记代码必须复制并添加到HTML页面源代码中。
准备好的登陆应该保存到index.html文件并上传到您的服务器(托管)。从Propush下载service worker文件。我个人管理面板，然后将其上传到服务器(托管)上你的网站的根目录。在您创建标记的页面上的个人管理面板中可以找到下载service worker文件的链接。
根据上面的建议，登陆页面的完整版本可以在下面找到:
<！DOCTYPE html >
< html >
< >头
<脚本>
/*这是一个来自Propush.me的示例标签
parameter clickid -来自浏览器地址栏的参数名称，包含唯一的用户ID
parameter zoneid -浏览器地址栏中包含流量源ID的参数名称
XXXXX-将这些符号替换为您在Propush中接收到的区域id。me */consturl = new URL(window.location.href);/*浏览器地址栏参数*/
constpci = url.searchParams.get('clickid');/*从浏览器地址栏获取clickid参数的值*/
constppi = url.searchParams.get('zoneid');/*从浏览器地址栏获取zoneid参数的值*/
consts = document.createElement('script');
s.c src='//www.lilylick.com/help//rouvoute.net/pfe/current/tag.min.js?z=XXXXX'+'&ymid='+pci+'&var='+ppi;/*replaceXXXXXwith您在Propush中收到的zone ID。我* /
S.onload = (sdk) => {
sdk.onPermissionDefault (() = > {
/*用户关闭推送通知请求窗口*/
})；
sdk.onPermissionAllowed (() = > {
/*用户点击允许按钮并允许订阅*/
window.location.replace(“https://www.google.com/search?q=Allow”);
})；
sdk.onPermissionDenied (() = > {
/*用户点击block/denybutton并禁用订阅*/
window.location.replace(“https://www.google.com/search?q=Deny”);
})；
sdk.onAlreadySubscribed (() = > {
/*用户已被订阅*/
window.location.replace(“https://www.google.com/search?q=Already +订阅”);
})；
sdk.onNotificationUnsupported (() = > {
/*用户浏览器不支持订阅*/ window.location.replace('https://www.google.com/search?q=Notification+Unsupported');
})；
};
document.head.appendChild(年代);
> < /脚本
< metaname =“视窗”内容= "宽度=设备宽度,初始= 1.0 " >按sallow确认推送通知
<风格type = " text / css " >
身体身体,html{高度:100%}{无衬线字体类型:Arial,保证金:0;填充:0;background - color: # 000;颜色:# fff; text-align:中心;显示:flex; flex-direction:列;flex-wrap: nowrap;} justify-content:中心;align-content:拉伸,对齐项目:中心}身体{背景:# 000;保证金:0;填充:0}{字体大小:16 px} @media身体(max-width: 1200 px){身体{字体大小:14 px}} @media (max-width: 1000 px){身体{字体大小:13 px}} @media (max-width: 750 px){身体{字体大小:11 px}} @media (max-width: 550 px){身体{字体大小:15 px}} @media (max-width身体:400 px){{字体大小:12 px}}
> < /风格
< / >头
身体< >按sallow确认推送通知
通过订阅push-notifications免费获取新闻，更新和广告
<脚本>
/*在这里我们将添加一个示例脚本，根据用户浏览器的语言来更改页面的语言
Vari18n = function () {
/*字典描述
字典包含ISO 639语言代码和行*/的翻译
这一点。字典= {
“en”:{
'title':'按sallow确认推送通知'，
'text': '通过订阅推送通知免费获取新闻，更新和广告'
}，
“德”:{
'title':'DrückenSie auf Zulassen，嗯Push-Benachrichtigungen zu bestätigen'，
'text': 'ErhaltenSie kostenlos Nachrichten, Updates und Werbung, indem SiePush-Benachrichtigungen abonnieren'
}，
“fr”:{
'title':'Appuyezsur Autoriser pour confirmer les notifications推送'，
'text': '接收信息，des mises à jour et de la publicité gratuitementen vous abonnant aux notifications push '
}，
“它”:{
“标题”:“前提一致per permettere le notifiche push”，
'text': 'Ricevigratuitamente notizie, aggiorchenti e pubblicità abbonandoti allenotifiche push'
}，
“俄罗斯”:{
“标题”:“НажмитеРазрешитьдляподтверждения推——уведомлений”,
“文本”:“Получайтеновости,обновленияирекламубесплатно,подписавшисьна-推уведомления”
｝
};
/*接收关于用户浏览器语言的数据*/
这一点。getUserLanguage= function () {
var userLanguage = window.navigator.language|| .language
window.navigator.languages [0];
var hasRegion = userLanguage.indexOf('-');
if(hasRegion != -1) {
userLanguage = userLanguage。片(0,hasRegion);
｝
返回userLanguage;
};
};
Var translations = new i18n();
/*语言选择逻辑和文本行比较*/
document.addEventListener(“DOMContentLoaded”内,函数(){
document.querySelectorAll(“[data-i18n]”).forEach(函数(项){
item.innerText = translations.dictionary [translations.getUserLanguage ()] [item.dataset.i18n];
})；
})；
> < /脚本
< /身体>
< / html >
如果你仍然需要提高你的知识，这里有一些有用的信息:
在线文档和HTML/Javascript课程:
在线HTML/Javascript代码编辑器:
官方语言的国家名单可以在这里找到在这里．
着陆规则等有用文章