Вебпуши

1. Подготовка к интеграции

• Проверьте, что сайт на https и на нём установлен трекер .
• Воспользуйтесь инструкцией, чтобы завести проект в Firebase для отправки вебпушей, и настройте отправку пушей на сайт в интерфейсе Mindbox.
• Получите Sender Id на своем проекте Firebase, чтобы использовать для интеграции на сайте.

2. Установите Service Worker на сайте

Нужно установить SW, чтобы ваши пользователи могли подписываться на уведомления и получать вебпуши.

Для этого разместите в корне или в другой директории сайта файл mindbox-services-worker.js.

Code
importScripts("https://<Domain API Mindbox>/scripts/service-worker.js");

3. Доработайте трекер Mindbox на сайте

Найдите где размещен код трекера Mindbox. Он может быть размещен прямо в html коде сайта, контейнере GTM или в отдельной папке.

Внесите в него следующие изменения.

Рекомендуем первые два способа, в которых путь размещения файла SW и scope совпадают и расположены в корне или в другой области сайта.

Code
// Файл SW и scope SW не в корне и совпадают
// Необходимо установить значение для параметра serviceWorkerScope, 
// совпадающее со значением области размещения файла SW serviceWorkerPath

mindbox = window.mindbox || function() { mindbox.queue.push(arguments); };
mindbox.queue = mindbox.queue || [];

//  mindbox('create'); нужно заменить на следующее

mindbox('create', {
  // ... прочие настройки
  serviceWorkerPath: "/webpush/mindbox-services-worker.js",
  serviceWorkerScope: "/webpush/"
});

//  нужно добавить скрипт инициализации модуля веб-пушей
mindbox("webpush.create");

4. Начинайте собирать подписчиков

Для сбора подписчиков есть 2 пути:

• С помощью поп-апа
• С помощью других форм встроенных в страницы сайта

Важно использовать один из этих способов, чтобы гарантировать показ системного окна браузера для сбора подписок во всех браузерах, например в Safari.

Если вызывать системное окно браузера автоматически по тайм-ату, а не после клика пользователя в поп-апе или встроенном блоке, часть браузеров будет блокировать такое поведение: не получится собрать подписчиков и отправлять больше пушей.

Сбор подписчиков с помощью попапа

При подключении модуля веб-пушей всем клиентам доступно неограниченное кол-во попапов для сбора подписчиков без дополнительной платы. Настройка делается в 3 простых шага. После согласия в попапе пользователю показывается системное окно для фиксации разрешения в браузере.

Алгоритм настройки

1. Заведите попап из доступных шаблонов "Для push-подписки”. Настройте внешний вид, условия показа и частоту всплывания. Подробнее про процесс настройки: https://help.mindbox.ru/docs/подписка-на-web-push-уведомления
2. Запустите попап.

Это рекомендованный способ сбора подписчиков для веб-пушей, потому что:

• вы можете показывать попап в нужный момент, когда клиент с большей вероятностью согласится получать уведомления
• поп-ап можно показывать несколько раз одному клиенту
• отклонения в этом поп-апе не учитывается браузером и не приведут к автоматической блокировке уведомлений от вашего сайта

Сбор подписчиков с помощью форм встроенных в страницы сайта

Вы можете разместить на страницах сайта формы, которые будут собирать подписчиков на вебпуши. Например, это могут быть блоки после статей или в корзине.

Чтобы интегрировать эти формы с подпиской на вебпуши, надо разместить код, который вызывает системный попап подписки по клику на кнопку.

Пример реализации:

Подписка на пуши по клику на кнопку
// выбрать кнопку, по клик по которой отслеживать
var myButton = document.querySelector(".some-class");


// по клику на кнопку вызывать функцию 'webpush.subscribe'
myButton.addEventListener("click", function () {
  mindbox("webpush.subscribe", {
    onGranted: function () {},
    onDenied: function () {}
  });
});