Блог про SMM, SEO, Арбитраж.

Monday, July 23, 2018

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



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

Сам я пользуюсь сервисом 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>
Лендинг для сбора пуш подписок Эрик Акопян 5 of 5
Хочу поделиться своим лендингом для сбора базы пуш подписок. Главными достоинствами ленда является то, что он универсален и работает так ...
Reactions:

9 comments:

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete