Как создать форму "Подписка на web-push уведомления"
  • 16 Aug 2022
  • 2 минуты
  • Темная тема
    Светлая тема
  • формат pdf

Как создать форму "Подписка на web-push уведомления"

  • Темная тема
    Светлая тема
  • формат pdf

Данную форму можно настроить только при настроенной интеграцией с веб-пушами по пунктам 1-3 этой инструкции.

Суть форм подписки на push-уведомления

Для предложения подписаться на push-уведомления с помощью попапа чаще всего используется такая схема:

  1. Посетителю сайта при определенных условиях показывается форма с предложением “Подписаться”;
  2. Если посетитель заинтересован, то при нажатии на кнопку форма вызывает стандартное браузерное окно подписки на web-push уведомления, где посетителю для подписки нужно нажать "Разрешить":

Снимок экрана 2021-03-18 в 14.55.54.png

Снимок экрана 2021-03-18 в 14.51.57.png

Нужно сделать форму, которая будет:

  • предлагать промокод на скидку для подписчиков web-push уведомлений;
  • показываться только для тех, кто посетил 2 страницы сайта, а не сразу всем.
Для попапа требуется интеграция.

Нужно выполнить настройки по инструкции

Настройка самого попапа выполняется на проекте (название проекта.mindbox.ru).

По ссылке https://help.mindbox.ru/docs/как-создать-поп-ап есть инструкция по созданию попапа. В ней описано как добавлять трекер на сайт, тестировать форму и как настраивать условия показа.

Определяемся с наполнением формы

Для удобного поиска по формам можно поставить галочку напротив пункта “Для push-подписки”. Находим из предложенных вариантов нужную форму, нажимаем “Выбрать”.

Снимок экрана 2021-02-01 в 19.32.31.png

Далее переходим в “Редактирование шаблона”. Для этого нажимаем “Изменить” напротив пункта “Внешний вид формы”.

Снимок экрана 2021-02-01 в 19.37.11.png

Определите расположение формы на экране

По умолчанию форма показывается посредине экрана. Изменить расположение формы на экране можно с помощью кнопки в нижнем левом углу экрана:

Снимок экрана 2021-02-01 в 19.38.20.png

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

Адаптируем шаблон под сайт

  1. Все тексты - если в тексте нужен перенос строки используйте тег в поле ввода на месте переноса <br>;
  2. Картинки и иконки;
  3. Кнопка формы - здесь можно настроить какое действие будет у кнопки (переход по ссылке или закрытие попапа);
  4. Отступы и размеры для мобильных устройств и десктопа;
  5. Размеры шрифтов и общие настройки для шрифтов;

Здесь можно указать настройки для шрифта или использовать свой шрифт с сайта. Подробнее об этом можно прочитать в статье.

  1. Рамки и границы формы;
  2. Цвета формы:
    Выберите подходящие цвета. Рекомендуем для подбора цвета с формы использовать расширение для браузера Eye Dropper или же использовать номер цвета с брендбука компании.

Нажимаем “Сохранить”.

В настройке 'Ссылка на кнопке' поставьте значение #
image.png

В шаблоне "Форма-лента с 2 кнопками" можно выбрать действие

Чтобы страница не скроллилась наверх при нажатии на кнопку, в коде HTML у ссылки удалите параметр href="...".

Настраиваем таргетинг

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

Снимок экрана 2021-03-29 в 21.07.48.png

  • страницы показа;
  • устройства;
  • география;
  • трафик на сайт: источники трафика, utm-метки, переход с сайта;
  • сегмент Mindbox;
  • ветка эксперимента Google Optimize.

Далее добавляем сайт

Выберите эндпоинт (точку интеграции) того сайта, на котором планируется показывать попап.

Снимок экрана 2022-08-01 в 14.46.08.png

Настройте частоту всплывания в разделе "Общие настройки", чтобы форма не показывалась постоянно.

Условия показа формы

Условия показа – настройка, чтобы не раздражать посетителей сайта показом сразу же.
По условиям задачи у нас было указано, что форму нужно показывать после посещения 2 страниц сайта.

Снимок экрана 2021-02-01 в 20.49.14.png

Действия после заполнения формы клиентом

В разделе "Действия после заполнения формы клиентом" нужно выбрать "Вызвать подписку на веб-пуши".

Снимок экрана 2021-03-11 в 20.09.52.png

Тестируем форму

Далее нажимаем "Проверить на сайте", подставляем ссылку на свой сайт и можно увидеть как будет отображаться форма.

Снимок экрана 2021-03-11 в 20.02.52.png

Снимок экрана 2021-03-24 в 14.27.56.png

После нажатия на кнопку "ХОЧУ!" у клиента появится запрос на разрешение на пуши:

Снимок экрана 2021-03-24 в 15.25.59.png

Для работы попапа используется 2 операции: GetWebPushSubscription и SubscribeToWebpush. Эти операции заводятся на проекте при стандартной интеграции для модуля веб-пушей. Если этих операций на проекте нет, напишите в нашу поддержку. Чат с поддержкой есть справа внизу.


Была ли эта статья полезной?