СОЗДАНИЕ МЕХАНИК ДЛЯ САЙТА:
подписка на web-push уведомления

Суть форм подписки на push-уведомления
Для предложения подписаться на push-уведомления с помощью Popmechanic чаще всего используется такая схема:
Шаг 1: Посетителю сайта при определенных условиях показывается форма с предложением Подписаться, чтобы получить бонус, скидку, промокод. Такая форма может быть любого формата (посредине экрана, сбоку) и с любым внешним видом.
Шаг 2: Если посетитель заинтересован, то при нажатии на кнопку форма вызывает стандартное браузерное окно подписки на web-push уведомления. Где посетителю для подписки нужно нажать "Разрешить":


Нужно сделать форму, которая будет:
- предлагать Промокод на скидку -5% для подписчиков web-push уведомлений
- показываться только для тех, кто посетил 2 страницы сайта, а не сразу всем

При нажатии на Основную кнопку открывается стандартное окно подписки на пуши. При нажатии на кнопку "Нет, спасибо" форма закрывается. При этом на 2 шаге дополнительно может показываться форма-подсказка с тем, где написано, что нужно нажать и где в стандартном браузерном окне подписки
Шаг 1. Проверьте наличие скрипта сервиса
Для этого войдите в аккаунт клиента
Перейдите на страницу установки скрипта
Там внизу должны быть указаны домены, где установлен скрипт.
В случае их отсутствия обратитесь к клиенту для установки скрипта.


Шаг 2. Адаптируйте шаблон под сайт
Возьмите один из представленных ниже шаблонов вызова подписки на пуши:
Возьмем для примера небольшой шаблон.

В нем в меню слева пройдитесь по всем вкладкам:
1. Подставьте нужные тексты
Тексты утвердите с клиентом или сделайте форму со своим предложением
Если в тексте нужен перенос строки используйте тег в поле ввода на месте переноса <br>:


2. Загрузите картинку на вкладке КАРТИНКИ И ИКОНКИ.
В этом случае можно загрузить только Изображение

Обратите внимание, если планируется показ форм на территории Украины, то лучше грузить картинки на свой домен, потому как мы используем Яндекс облако по умолчанию для хранения загруженных картинок. То есть, возможны проблемы с отображение на некоторых провайдерах.


3. Откорректируйте размеры и отступы элементов
Во вкладках РАЗМЕРЫ (DESKTOP), РАЗМЕРЫ (MOBILE), ОТСТУПЫ (DESKTOP), ОТСТУПЫ (MOBILE) откорректируйте размеры формы и отступы между элементами.
При выборе размеров рекомендуем ставить масштаб 100%.
При корректировке размеров обращайте особое внимание на мобильную версию формы:

4. Подберите шрифты для формы
Во вкладе ШРИФТЫ: НАСТРОЙКИ ОБЩИЕ вы можете выбрать шрифт из предложенных или использовать свой с сайта.
(1) Шрифт формы из списка предложенных, будет сразу отображаться в превью и на сайте.
(2) Если на вашем сайте используется уникальный шрифт и вы бы хотели его же использовать, поставьте галочку "Использовать свой шрифт?"
(3) В поле "Свой шрифт" вы можете ввести шрифт, точно так же, как он прописан на вашем сайте, где будет показываться форма.
Зайдите на свой сайт, нажмите правой кнопкой мыши на текстовом поле – Посмотреть код
Копируйте его полностью в это поле.

Обратите внимание!
Шрифт в форме будет подгружаться с сайта, но в превью может отображаться некорректно, из-за того, что на сайте самого личного кабинета этого уникального шрифта может не быть. Поэтому тестируйте отображение шрифта по тестовой ссылке
5. Подберите цвета для формы
Во вкладе ЦВЕТА ФОРМЫ выберите подходящие цвета.
Рекомендуем для подбора цвета с формы использовать расширение для браузера Eye Dropper
Или же использовать номер цвета с брендбука компании.

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

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

Шаг 4. Создайте тестовую ссылку и проверьте форму

Сохраните форму.
Нажмите "Проверить форму на сайте".
Введите или выберите домен, где будет показываться форма.
Сервис автоматически сгенерирует тестовую ссылку, по которой будет показываться форма на вашем сайте только для вас.
Ссылка формата: http://faq.popmechanic.io?pm-test-form=47ea86ccbf3dd61076ae652dc06e5b30df59dffc45ddb176c02075bbfc4d7a17
Скопируйте эту ссылку и проверьте отображение формы на сайте.
Рекомендуем отправить её себе и проверить так же на мобильных устройствах.
Отправьте эту тестовую ссылку клиенту, коллегам для проверки внешнего вида формы.
Шаг 5. Кнопка вызова формы

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

Шаг 6. Настройки таргетинга: кому показывать форму

Сразу рекомендуем переключится на Расширенный режим настроек:
Исключить показ тем, кто уже подписан и кто технически не может быть подписан:

1) Для того, чтобы исключить показ в тех браузерах, которые технически не поддерживают подписки на пуши добавьте условие - JS-сужение
Добавьте такой код в окно для ввода JS и сохраните:

return (!!window.PushManager);
2) Если вы пользуетесь сервисом Mindbox, то настройте исключение показа тем посетителям сайта, кто на данный момент имеет активный пуш-токен для рассылок.
Для этого нужно:
- создать такой сегмент в Mindbox:
- создать нужную операцию проверки сегмента, если раннее она не была создана в этом аккаунте по этой инструкции
- копировать название операции, id сегментации (не сегмента!!) и добавить в настройках таргетинга формы в Popmechanic условие Mindbox:
Обратите внимание!
У одного подписчика теоретически может быть несколько пуш-токенов.
Мы же проверяем наличие хоть одно активного на данный момент.
То есть, если пользователь зайдет с нового браузера и авторизуется, если он ранее был подписан, то ему предлагаться подписка не будет.
2) Настройте любые другие исключения показа, которые необходимы на вашем сайте:

- страницы показа
- устройства
- география
- дата и время: день недели, время показа, период показа
- трафик на сайт: источники трафика, utm-метки, переход с сайта
- действия: форма показана/закрыта/заполнена- js-сужение
- сегмент Mindbox
- ветка эксперимента Google Optimize

Обратите внимание на вложенность условий в расширенном Pro-таргетинге

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

Шаг 7. Условия показа формы

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

Детальнее об условиях показа
Шаг 8. Настройка интеграции

Теперь нам нужно непосредственно вызывать стандартное окно пуш-подписки при нажатии на кнопку в форме.
Для этого нам нужно настроить JS-интеграцию.
Интеграции – Разное – JS-код:
Куда вставлять код для вызова подписки на пуши
Скопируйте в 2 поля в настройки интеграции код ниже.
var form = arguments[0];
var $form = PopMechanic.$("#popmechanic-form-" + form.id);
$form.on("click", "[data-popmechanic-submit]", function() {
   setTimeout(function() {
       mindbox(
         "webpush.subscribe", {
           getSubscriptionOperation: "GetWebPushSubscription",
           subscribeOperation: "SubscribeToWebpush",
           onGranted: function() {
               $form.find("[data-popmechanic-close]").click();
           },
           onDenied: function() {
               $form.find("[data-popmechanic-close]").click();
           }
         }
       );
   }, 500);
});
Шаг 10. Тест и запуск
Включите форму с помощью переключателя активности формы:
Если у вас возникли сложности на любом шаге настройки – напишите в нашу поддержку.
Чат с поддержкой есть справа внизу в личном кабинете.

Вам была полезна эта статья?