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

Лендинг для сбора пуш подписок
5 (100%) 1 vote

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

Сам я пользуюсь сервисом Sendpulse, для сбора Push подписчиков, но вы можете изменить лендинг и пользоваться любым другим способом.

Для нормального отображения, вам понадобиться картинка стрелки, вот она.

Стрелка для лендинга

Это белая стрелка, поэтому вы ее не видите, просто сохраните к себе, правой кнопки мыши, и разместите в той же папке что и лендинг 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!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 Comments

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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