Лендинг для сбора пуш подписок

on

Хочу поделиться своим лендингом для сбора базы пуш подписок. Главными достоинствами ленда является то, что он универсален и работает так же хорошо на десктопах, как и на мобайле, без необходимости редиректа на мобильную версию и умеет перехватывать событие подписки и запрета подписки, после чего можно сделать редирект на другую страницу, чтобы попытаться снова. Так же при клике, страница открывается в полноэкранном режиме, чтобы затрудняет уход из лендинга, и как бы настаивает подписаться, если вы понимаете о чем я ;) Не менее важная деталь, анимированная стрелка, указывающая на кнопку подписаться.

Сам я пользуюсь сервисом 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>

Comments

  1. DenisOctober 25, 2018 at 2:30 AM

    Всю голову сломал, не понял как сделать редирект при отказе и согласие на подписку 🙂

    ReplyDelete
  2. НикитаDecember 24, 2018 at 11:06 AM

    как редирект сделать при согласие или отказе от подписки?

    ReplyDelete
  3. Никита НикитичDecember 26, 2018 at 4:25 PM

    так как редиректы то сделать после подписки или отказа?

    ReplyDelete
  4. hihellsiteJanuary 4, 2019 at 8:43 AM

    Присоединяюсь к вопросу!
    Эрик, подскажи пожалуйста с этим моментом.

    ReplyDelete
  5. Эрик АкопянJanuary 4, 2019 at 1:58 PM

    Ну так в коде закомментирована строка // ТУТ СРАБАТЫВАЕТ ЕСЛИ ПОДПИСАЛСЯ ЛИБО ОТКАЗАЛСЯ ОТ ПОДПИСКИ

    Вместо нее ставим window.location.href = 'ВАША_ССЫЛКА';

    Если надо только тогда редиректить, когда подписались, убираем || Notification.permission == 'denied'

    ReplyDelete
    Replies
    1. chocoJuly 24, 2019 at 7:20 AM

      This comment has been removed by the author.

      Delete
  6. ВикторFebruary 25, 2019 at 6:37 AM

    можно подробнее (часть примера кода) как после нажатия на подписку или отклонение, что б редиректило на сайт

    ReplyDelete
  7. ВикторFebruary 25, 2019 at 7:33 AM

    и можно ли даный скрипт ставить на https?

    ReplyDelete
  8. ВикторFebruary 25, 2019 at 10:46 AM

    upd) сделал все, такой вопрос, можно ли что б после соглашения на подписку что б редиректило на сайт а если отказ что б просто было на месте и предложение на подписку не исчезало?

    ReplyDelete
  9. likesgood.ruFebruary 27, 2019 at 2:25 AM

    Спасибо огромное. Ты ТОП

    ReplyDelete
  10. chocoJuly 24, 2019 at 7:19 AM

    This comment has been removed by the author.

    ReplyDelete
  11. CpaSeptember 15, 2019 at 4:05 AM

    Привет)) Спасибо за лендинг ,все работает. только назрел один вопрос-Использую несколько похожих доменов. с расчетом на то что если на первом человек отказывается от подписки и его перекидывает на второй где снова будет запрос подписки, только вот проблема- если человек отказался на первом домене- на следующих запрос уже не выходит(((

    ReplyDelete
    Replies
    1. Эрик АкопянSeptember 15, 2019 at 6:31 PM

      Если домен другой, то должно работать. Пример: отказался от подписки в ютубе, перешел на фейсбук и подписался на пуш там. Представь, если бы отказ от подписки в одном сайте привел бы к отказу на всех последующих, это ведь не может так работать.

      Delete
    2. CpaSeptember 15, 2019 at 9:30 PM

      Нет , к сожалению когда происхдит автоматический редирект после того как чел отказался на первом домене , то на следующих не показывает( пробовал различные варианты и ни фига.работает только если между доменами сделать прокладку в виде кнопки- типа нажмите далее, тогда да , выходит.

      Delete
    3. CpaSeptember 15, 2019 at 9:32 PM

      видимо защита в самих браузерах вшита от такого

      Delete
  12. AnonymousDecember 31, 2019 at 3:10 AM

    не работает редирект !

    ReplyDelete
  13. UnknownMarch 17, 2020 at 7:16 AM

    03401588992

    ReplyDelete
  14. UnknownMarch 17, 2020 at 7:20 AM

    03401588992

    ReplyDelete

Post a Comment