Хочу поделиться своим лендингом для сбора базы пуш подписок. Главными достоинствами ленда является то, что он универсален и работает так же хорошо на десктопах, как и на мобайле, без необходимости редиректа на мобильную версию и умеет перехватывать событие подписки и запрета подписки, после чего можно сделать редирект на другую страницу, чтобы попытаться снова. Так же при клике, страница открывается в полноэкранном режиме, чтобы затрудняет уход из лендинга, и как бы настаивает подписаться, если вы понимаете о чем я ;) Не менее важная деталь, анимированная стрелка, указывающая на кнопку подписаться.
Сам я пользуюсь сервисом Sendpulse, для сбора Push подписчиков, но вы можете изменить лендинг и пользоваться любым другим способом.
Для нормального отображения, вам понадобиться картинка стрелки, вот она.
Это белая стрелка, поэтому вы ее не видите, просто сохраните к себе, правой кнопки мыши, и разместите в той же папке что и лендинг :)
<!DOCTYPE html>
<html lang="ru_RU" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ТУТ_ТАЙТЛ_ЛЕНДИНГА</title>
<!-- Приложил опен граф теги, если хотите опубликовать ссылку на лендинг в соцсетях -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:title" content="ТУТ_ТАЙТЛ_ЛЕНДИНГА">
<meta property="og:description" content="ТУТ_ОПИСАНИЕ_ЛЕНДИНГА">
<meta property="og:image" content="ТУТ_КАРТИНКА_ЛЕНДИНГА">
<meta property="og:site_name" content="ТУТ_НАЗВАНИЕ_САЙТА_ЛЕНДИНГА">
<style type="text/css">
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#content {
width: 100%;
max-width: 800px;
position: absolute;
top: 45%;
left: 55%;
transform: translate(-50%, -50%);
z-index: 9;
}
#subnote {
position: absolute;
top: 0;
font-weight: normal;
text-align: center;
color: white;
font-size: 400%;
}
.button {
background-color: white;
text-align: center;
font-size: 50%;
padding: 13px 28px 13px 28px;
line-height: 60px;
color: black;
text-transform: capitalize;
border-radius: 3%;
}
#blockI {
position: absolute;
top: 210px;
left: 180px;
margin-bottom: 0px;
margin-top: 0px;
z-index: 2;
}
.arrow {
width: 100px;
height: auto;
-webkit-animation: mover 0.5s infinite alternate;
animation: mover 0.5s infinite alternate;
}
@media screen and (max-width: 600px) {
#content {
top: 0;
transform: translate(-50%);
}
#blockI {
top: auto;
left: auto;
right: 10%;
bottom: 0;
}
.arrow {
width: 50px;
}
#subnote {
font-size: 250%;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="UTF-8" src="//cdn.sendpulse.com/9dae6d62c816560a842268bde2cd317d/js/push/19f8f1f5cc48ef9182c1d6c2a921fdfb_1.js" async></script>
</head>
<body>
<div id="blockI"><img src="/arrow.png" class="arrow"></div>
<div id="content">
<div id="subnote">
<div>Разрешите просмотр</div>
<span class="button">Разрешить</span>
</div>
</div>
<script>
function requestFullScreen() {
var el = document.body;
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen
|| el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) {
// Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
// Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var i = 0;
var arrow = true;
function arrowan() {
if (arrow == true) {
if (i == 0) {
i = 1;
$("#blockI").animate({
"margin-bottom": "+=50px",
}, function () {
arrowan();
});
$("#blockI").animate({
"margin-top": "-=50px",
}, function () {
arrowan();
});
} else if (i == 1) {
i = 0;
$("#blockI").animate({
"margin-bottom": "-=50px",
}, function () {
arrowan();
});
$("#blockI").animate({
"margin-top": "+=50px",
}, function () {
arrowan();
});
}
}
}
$(document).ready(function () {
arrowan();
$(document).click(function () {
requestFullScreen();
});
if (Notification.permission == 'default') {
var grantedch = setInterval(function () {
if (Notification.permission == 'granted' || Notification.permission == 'denied') {
clearInterval(grantedch);
// ТУТ СРАБАТЫВАЕТ ЕСЛИ ПОДПИСАЛСЯ ЛИБО ОТКАЗАЛСЯ ОТ ПОДПИСКИ
}
}, 1000);
}
});
</script>
</body>
</html>
Всю голову сломал, не понял как сделать редирект при отказе и согласие на подписку 🙂
ReplyDeleteThis comment has been removed by the author.
Deleteкак редирект сделать при согласие или отказе от подписки?
ReplyDeleteтак как редиректы то сделать после подписки или отказа?
ReplyDeleteПрисоединяюсь к вопросу!
ReplyDeleteЭрик, подскажи пожалуйста с этим моментом.
Ну так в коде закомментирована строка // ТУТ СРАБАТЫВАЕТ ЕСЛИ ПОДПИСАЛСЯ ЛИБО ОТКАЗАЛСЯ ОТ ПОДПИСКИ
ReplyDeleteВместо нее ставим window.location.href = 'ВАША_ССЫЛКА';
Если надо только тогда редиректить, когда подписались, убираем || Notification.permission == 'denied'
This comment has been removed by the author.
Deleteможно подробнее (часть примера кода) как после нажатия на подписку или отклонение, что б редиректило на сайт
ReplyDeleteи можно ли даный скрипт ставить на https?
ReplyDeleteupd) сделал все, такой вопрос, можно ли что б после соглашения на подписку что б редиректило на сайт а если отказ что б просто было на месте и предложение на подписку не исчезало?
ReplyDeleteСпасибо огромное. Ты ТОП
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteПривет)) Спасибо за лендинг ,все работает. только назрел один вопрос-Использую несколько похожих доменов. с расчетом на то что если на первом человек отказывается от подписки и его перекидывает на второй где снова будет запрос подписки, только вот проблема- если человек отказался на первом домене- на следующих запрос уже не выходит(((
ReplyDeleteЕсли домен другой, то должно работать. Пример: отказался от подписки в ютубе, перешел на фейсбук и подписался на пуш там. Представь, если бы отказ от подписки в одном сайте привел бы к отказу на всех последующих, это ведь не может так работать.
DeleteНет , к сожалению когда происхдит автоматический редирект после того как чел отказался на первом домене , то на следующих не показывает( пробовал различные варианты и ни фига.работает только если между доменами сделать прокладку в виде кнопки- типа нажмите далее, тогда да , выходит.
Deleteвидимо защита в самих браузерах вшита от такого
Deleteне работает редирект !
ReplyDelete03401588992
ReplyDelete03401588992
ReplyDelete