Высокая оплата
(примерно 50 рублей за 1000 отправок)

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

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

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

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

 

Об авторе Эрик Акопян

Онлайн с 2002 года. Вебмастер, программист, дизайнер и блогер.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.