Что такое вебпуши: возможности и механики в канале Web Push

Что такое вебпуши: возможности и механики в канале Web Push


Как работают Web Push рассылки, для каких целей подходят лучше всего, в чем плюсы и минусы. Покажем примеры механик, где можно использовать вебпуши, какие есть возможности по настройке рассылок. Подробная статья от product owner’a Валентина Шабанова.


Содержание

Web push рассылка — что это?

Вебпуш (web push) — небольшое всплывающее сообщение от вашего сайта. Показывается поверх других окон и содержит текст, картинку и кнопки. Клиент может увидеть web push как на компьютере, так и на телефоне с ОС Android — уведомление везде будет выглядеть по-разному:
Вебпуш-сообщение в браузере Chrome
Вебпуш-сообщение в браузере Chrome
Вебпуш-сообщение в браузере Yandex
Вебпуш-сообщение в браузере Yandex
Вебпуш-сообщение в браузере Firefox
Вебпуш-сообщение в браузере Firefox
Вебпуш-сообщение на MacOS в браузере Chrome
Вебпуш-сообщение на MacOS в браузере Chrome
Вебпуш-сообщение на телефоне с ОС Android, в браузере Chrome
Вебпуш-сообщение на телефоне с ОС Android, в браузере Chrome

Плюсы и минусы вебпушей

Плюсы:
  1. Показываются даже тем, кто ушел с вашего сайта.
  2. Показываются поверх других окон.
  3. Раскрываются мгновенно, клиент видит контент сразу.
  4. Легкая подписка — не нужно указывать почту или телефон.
  5. Стоимость сообщений — бесплатно.
Закрыл сайт и перешел на другой — вебпуш всё равно пришел
Пользователь закрыл ваш сайт, перешел на другой — но вебпуш все равно пришел
Открыто другое приложение — вебпуш открылся поверх него
Открыто другое приложение — вебпуш открылся поверх него
Для подписки достаточно нажать 1 кнопку, не нужно оставлять контактные данные
Для подписки достаточно нажать 1 кнопку, не нужно оставлять контактные данные
Минусы:
  1. Короткое время для коммуникации — скроются через несколько секунд или клиент их быстро закроет.
  2. Большой процент недоставок: если клиент долгое время не заходит на сайт, его пуш-токен (идентификатор) устаревает. Web push не будет доставляться такому клиенту, пока он снова не зайдет на сайт.
  3. В последних версиях Chrome и Firefox добавлена блокировка всплывающих окон push-подписки.
Вывод: вебпуши — про мгновенное взаимодействие с клиентом. На несколько секунд вы получаете его полное внимание, но главная сложность — сделать это правильно и убедить его кликнуть на пуш. Как это сделать — расскажем далее.

Для каких целей подходят вебпуш-рассылки

Быстро набрать базу

Для подписки на web push не нужно вводить почту или телефон, достаточно сделать один клик. Так как окно подписки показывается всем посетителям сайта, вы быстро получаете новых подписчиков, с которыми можно взаимодействовать. Если у вас в базе пока не так много клиентов, web push — хороший способ это исправить.

Напомнить о продукте, событии, акции

Web push открывается мгновенно и показывается поверх других окон. Это позволяет перехватить внимание клиента и завлечь его на сайт. Посмотрите, как это делает «Медуза»:
Вебпуш привлекает внимание: сложно не кликнуть!
Вебпуш привлекает внимание: сложно не кликнуть!

Довести покупку до конца

Если клиент добавил товар в корзину и ушел с сайта — самое время вернуть его с помощью web push. С помощью вебпушей можно делать стандартные «брошенные» механики: брошенные просмотр, корзина, избранное, поиск. Также в вебпуше можно рассказать про появление скидки на товар в корзине или о появлении товара в наличии.

Получить новые контакты клиентов

База подписчиков web push обычно растет быстрее, чем база email-подписчиков. Чтобы получить больше других контактов от клиентов можно мотивировать webpush-подписчиков оставить свою почту или телефон. Таким образом, поток подписчиков на web push конвертируется в клиентов с email или телефоном.

Как сделать хороший web push

Нужно помнить, что web push сразу отобразится у вашего клиента, но будет скрыт уже через несколько секунд. Поэтому, вот наши 3 правила хорошего вебпуша: он должен быть персональным, полезным и информативным.
Персональный. Никому не интересен абстрактный web push про «новые скидки». Обратитесь к вашему клиенту по имени. Предложите в web push скидку на товары, которыми он интересовался или добавлял в корзину. Чуть ниже приведем примеры таких механик в Mindbox.
Полезный. Ваши клиенты разного пола, возраста, с разными интересами. Пуш про поступление новой коллекции женских блузок вряд ли будет интересен мужчинам. Сделайте так, чтобы пуш принес им пользу. Например, что появилась скидках на их любимый товар или вышла новая статья в рубрике, на которую они подписаны.
Информативный. Сообщение должно привлекать внимание и быть понятным. Используйте все возможности web push: добавьте большую картинку, используйте emoji, напишите краткий, но емкий заголовок.

Особенности web push в Mindbox

Персонализация и единый профиль клиента

Персонализация: подставляйте в web push имя клиента, данные о его заказе, информацию о товаре, который он добавил в корзину (название, фото, цена, размер скидки и так далее).
Сегментация: выделяйте сегменты среди ваших клиентов и отправляйте пуши точно под их интересы. Например, вы можете выделить сегменты «Недавно зарегистрированные», «Постоянные покупатели», «Подписчики распродаж», «‎Отток».
Автоматическая склейка данных клиентов: Mindbox — CDP (Customer Data Platform). Автоматически склеивает данные клиентов в единый профиль, чтобы вы не отправили рассылку одному клиенту дважды. Если клиент перешел из email-рассылки на сайт, мы свяжем его email-контакт и вебпуш-токен в единый профиль, и вы сможете строить каскадные механики.
Отправка на активное устройство клиента. Мы отправляем пуш только на то устройство, которым активно пользуется клиент.

Настройки отправки

Триггерные web push. Кроме массовых, в Mindbox вы можете настроить триггерные вебпуши, которые отправляются после определенного события: регистрации клиента, добавления товара в корзину, снижения цены на товар, оформления заказа и так далее. Также можно настраивать триггерные пуши по условиям — например, реактивационные серии для тех, кто давно не совершал покупку.
АВ-тестирование. Делайте несколько вариантов одной рассылки и замеряйте их эффективность. Алгоритм автоматически определит лучший вариант и будет использовать его. Можно тестировать заголовки, текст, картинки и кнопки пушей.
Настройка срока жизни пуша. Если акция работает до воскресенья, пуш не будет показываться клиентам в понедельник.
Ограничение скорости отправки. Настройка скорости при отправке массовых вебпушей позволит показывать пуш ограниченному количеству клиентов в час. Например, чтобы не перегружать ваш колл-центр или сайт.

Работа с контентом

Автоматический ресайз картинок: мы определеяем браузер клиента и автоматически адаптируем картинки так, чтобы они идеально вписывались в его браузер.
Легкая обрезка картинок: обрезать картинку идеально под размеры браузера можно в пару кликов прямо в интерфейсе.
Обрезать картинку можно прямо в интерфейсе
Обрезать картинку можно прямо в интерфейсе

Примеры лучших механик web push

Welcome web push

Клиент подписывается на вебпуши и сразу видит всплывающее «Спасибо!». Моментальный отклик на действия клиента ?
Приветственный пуш сразу после подписки
Приветственный пуш сразу после подписки

Серия вебпушей «Повторный заказ» с автоподстановкой товаров

Web push отправляется клиентам, которые месяц назад делали заказ для своего питомца. Ожидается, что спустя месяц им потребуется восполнить запасы корма, а наш web push поможет сделать это в пару кликов:
Предлагаем клиенту сделать новый заказ
Предлагаем клиенту сделать новый заказ
Как работает цепочка:
  • Первый вебпуш: при клике на вебпуш в корзину автоматически добавляются товары из последнего заказа.
  • Второй пуш отправляется в случае, если на купленный ранее товар есть скидка. В этот вебпуш подтягивается картинка товара, на который действует скидка.
  • Третий вебпуш отправляется тем, кто получал первый или второй более недели назад. Как и первый, он автоматически пересобирает корзину.

Как технически работают web push

Web push отображается не с помощью верстки страницы (как попапы или баннеры), а благодаря браузеру. С того момента, как клиент зашел на сайт и подписался на пуши, в его браузере начинает работать наш скрипт. Именно благодаря этому он увидит ваш пуш, даже когда неделю не заходил на сайт.
Чтобы начать сбор web push подписок, в корень сайта необходимо добавить js-файл (см. Вебпуши) и установить скрипты для сбора подписок.
В отличие от email или мобильного телефона, отправка web push происходит на токен клиента (firebase token). Токен клиента может меняться, поэтому в ряде случаев вебпуш не отправится до тех пор, пока клиент не зайдет на сайт, чтобы его токен обновился.

Автоблокировка окон подписки на web push

Начиная с 2020 года в браузерах Firefox (версия 72 и выше ) и Chrome (версия 80 и выше) появилась автоблокировка всплывающих окон подписки web push. Вот как это выглядит на примере Chrome:
Автоблокировка окон подписки на web push
В Chrome блокировка web push происходит в следующих случаях:
  • Настройка вручную. Пользователь перешел в настройки Chrome и заблокировал показ всплывающих уведомлений.
  • Автоматическая для пользователя. Если клиент часто блокирует уведомления — браузер учтет это и включит блокировку уведомлений по-умолчанию.
  • Блокировка на отдельных сайтах. Если на вашем сайте большинство пользователей блокируют всплывающие окна — то для вашего сайта по умолчанию будет включен режим блокировки уведомлений.
Можете также ознакомиться со статьей из официального блога Chromium.

Заключение

Web push — канал мгновенных сообщений с сайта. Главное преимущество канала — показ поверх других окон и легкая подписка в один клик. За счет этого вы можете быстро нарастить базу подписчиков и сконвертировать в заказы или в получение других контактов. Главное — делайте пуши полезными и сегментируйте ваших клиентов.