Создание web-push уведомлений

Web push-уведомление – это небольшое информационное окошко, которое всплывает в браузере и позволяет коммуницировать с клиентом в режиме онлайн.

Пример веб-пуша созданного в eSputnik

Создание Web Push начинается с настройки сбора адресов – “Токенов” или push token. В системе eSputnik настройка получения push token займет всего несколько минут.

Настройка и подключение уведомлений

Шаг 1. Выбор настроек для Web Push

  1. Чтобы начать настройку и подключение Web push-уведомлений, нажмите на стрелочку рядом с названием вашего аккаунта на панели меню и выберите пункт “Настройки”.

Переход к настройкам веб-пушей

  1. Перейдите во вкладку Web push. Тут вы можете ознакомиться с общей информацией о настройках Web Push и кликнуть на нужный тип подписки (В один клик / В два клика) для перехода в настройки.

Настройки web push

Подписка в один клик – это простой и быстрый способ роста базы. Подписчик попадает в группы для рассылок без дополнительных подтверждений. Также данный тип подписки позволяет использовать собственный домен в подписях к push-уведомлениям.

Отображение домена в пуш-уведомлении

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

Окно подписки в один клик

Окна подписки в два клика

Пример подписки в один клик

Пример подписки в два клика

Шаг 2. Привязка сайта для сбора токенов

  1. После выбора типа подписки вы перейдете в окно настройки. Также заполните раздел Информация о сайте с названием и ссылкой на сайт.

Привязка нового сайта

  1. Введите название вашего домена для отображения в подписях отправленных вами push-уведомлений.

Информация о сайте

Обратите внимание, что название домена может содержать только цифры, латинские буквы в нижнем регистре и тире. Если в названии домена есть другие символы, например точка, вам нужно их удалить или заменить для корректного отображения домена в подписи. Например, домен https://test-website.com должен выглядеть в подписи как https://test-websitecom-push.esputnik.

Привязка нового сайта для отправки пуш-уведомлений

  1. Если у вас уже есть база подписчиков и вы хотите продолжить с ней работать у нас в системе, введите ваши ключи в поле “Интеграция с сервисом сбора подписчиков”.

Параметры интеграции с сервисом сбора подписки

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

Для браузера Safari вы также можете задать отдельные настройки в раскрывающемся блоке раздела интеграции.

Шаг 3. Генерация и интеграция скрипта

  1. После нажатия на кнопку скрипт для вашего сайта автоматически сгенерируется и выведется специальным блоком ниже.

Создание скрипта для интеграции

Ваш скрипт будет сгенерирован в этом же окне ниже.

  1. Для подписки в один клик скачайте установочный файл. Загрузите его в каталог верхнего уровня вашего сайта. Далее скопируйте и вставьте сгенерированный скрипт в код вашего сайта перед закрывающимся тегом .

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

Шаг 4. Проверка статуса привязки сайта

  1. После вставки кода на ваш сайт, нажмите на кнопку Проверить статус привязки.

  • Если отобразится статус “Сайт не привязан” – необходимо еще раз проверить внесенные настройки

Статус привязки сайта

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

Успешная привязка сайта

  1. Нажмите на кнопку “К списку доменов”, чтобы вернуться в окно настроек для Web Push.

Успешная привязка сайта для отправки пушей

Здесь будут отображаться все сайты, которые вы привяжете.

Общие настройки подписки

Независимо от того какой способ подписки вы выбрали, можно будет включить автоматическое удаления неактивных WebPush токенов за 30, 60 или 90 дней. 

Будьте внимательны, при удалении токенов не учитывается, когда была последняя рассылка, а только факт прочтения. Например, задав удаление токенов, у которых нет прочтений 30 дней, а последняя рассылка была 31 день назад - будут удалены все токены, кроме тех, кто подписался за последние 30 дней.

Очистка токенов

Шаг 1. Переход к настройкам окон подписки

  1. Если вы выбрали подписку в два клика, вы можете задать оформление и время показа этого окна в “Настройках запроса подписки”. В этом же окне задаются настройки показа для подписки в один клик.

Настройки пуш-подписки

  1. В окне “Настройка запроса подписки” вы можете выбрать один из типов подписки для дальнейшего редактирования.

  • в один клик;

  • стандартный вид (в два клика);

  • панель (в два клика).

Подписка в один клик

Окно настройки для каждого варианта открывается при клике на соответствующий блок.

  1. Чтобы просмотреть, как выглядит каждый из типов подписки в соответствующем окне, активируйте опцию “Показывать пример окна подписки”.

  • Окно просмотра подписки в один клик.

Пример окна подписки

  • Окно просмотра подписки в два клика (стандартный вид после редактирования оформления).

Настройка отображения формы подписки для пуш-уведомлений

  • Окно просмотра подписки в два клика (панель после редактирования оформления).

Параметры оформления подписки на пуши

Шаг 2. Настройка оформления окон подписки

  • Подписка в один клик.

Для подписки в один клик укажите способ отображения окна подписки (при загрузке страницы / при клике на элемент), а также время до показа окна push-подписки после открытия страницы.

Время показа запроса на подписку

  • Подписка в два клика: стандартный вид.

При запуске подписки в два клика используется определенная последовательность таких окон:

  • окно push-подписки, цель которого – получить от пользователя разрешение на отправку уведомлений с указанного домена. Для этого окна также дополнительно задаются содержимое и оформление окон запроса подписки и образца Web Push-сообщения.

Параметры подписки в два клика

  • окно подтверждения подписки отображается когда пользователь подтвердил подписку на ваши уведомления. В этом окне, помимо текста уведомления об отписке, также отображается окно образца Web Push-сообщения.

Информирование об успешной подписке

  • окно блокировки подписки отображается когда пользователь отказался подписываться и ещё раз напоминает о возможности подписаться на уведомления, изменив разрешения в настройках браузера. В окне также отображается образец Web Push-сообщения.

Информирование об отказе от подписки

Таким образом, для запуска подписки в два клика необходимо задать настройки следующих окон:

  1. Окно запроса подписки (отображается в окне push-подписки);

Параметры окна подписки

Кликните по тексту, чтобы изменить его (например, Кликните "Разрешить", чтобы получать уведомления от...) и задайте цвет текста окна подписки, цвет фона, а также текст и цвет текста для кнопок отмены и подтверждения подписки.

  1. Окно образца Web Push-сообщения (отображается в окнах push-подписки, подтверждения подписки, а также блокировки подписки);

Образец уведомления

Для этого окна задаются заголовок (Образец уведомления), текст сообщения (Так выглядят уведомления от...) и логотип.

  1. Окно push-подписки;

Для этого окна задаются цвет фона, цвет текста, текст окна, а также способ отображения окна (при загрузке страницы/при клике на элемент), время до показа окна push-подписки после открытия страницы, а также время до повторного показа окна push-подписки, если ничего не выбрано.

  1. Окно подтверждения подписки;

  2. Окно блокировки подписки.

Для окон подтверждения и блокировки подписки также задаются цвет фона и текста, текст окна и время показа (в секундах для окна подтверждения подписки и в днях для окна блокировки подписки).

Параметры окон подтверждений

  • Подписка в два клика: панель.

Настраивается аналогично стандартному виду подписки в два клика. Дополнительно необходимо указать позицию запроса на подписку к push-уведомлениям.

Параметры отображения формы

После окончания настройки окон нажмите “Сохранить”, а затем вернитесь “К списку доменов”.

Поздравляем! Теперь вы можете отправлять массовые push-сообщения и создавать сценарии на основе push-token.

Старт массовой пуш-рассылки

После того, как все необходимые настройки внесены в аккаунт - можно создавать массовые рассылки push-уведомлений.

1. В разделе "Сообщения" выберите "Web push"

Создать первое пуш-уведомление

Нажмите на кнопку Создать Web Push, чтобы перейти к редактору пуш-сообщений.

2. Задайте тему push-уведомления и его текст

Здесь же вы увидите как выглядит сообщение в браузерах Chrome и Firefox, а также сразу сможете запустить тестовое сообщение.

Меню создания пуш-уведомлений

ВАЖНО!Используйте заголовки не более 30 символов, чтобы они корректно отображались на разных устройствах. Оптимальным количеством знаков для контента считается 45 - 60. При добавлении в пуш большой картинки - задавайте не более 30 символов, так как картинка "отрежет" часть текста.

3. Сделайте пуш-уведомления уникальными

  • Персонализируйте web-push рассылки

Используйте персонализацию и подстановку динамического контента в триггерных и проморассылках.

Пример использования персонализации в пушах

Особенно актуальна подстановка в сообщения о заказах и брошенных корзинах.

  • Добавляйте большие изображения и Call-To-Action

Для контактов Chrome можно отправлять пуши с большой картинкой и одной или двумя кнопками. Эти настройки можно задавать на ваше усмотрение.

Пример пуш-уведомления

  • Загружайте картинки быстро и персонализируйте их:

    • Вместо загрузки картинки с компьютера просто перетащите файл в нужную область или укажите ссылку на картинку в интернете (ссылка может быть динамическая)
    • Картинки при создании можно персонализировать, добавляя динамический контент

Пример использования персонализации на картинках

3. Выберите группу подписчиков и задайте настройки отображения уведомления:

  • "Время активности" - период, после которого сообщение не будет показано, если до того пользователю оно не было доставлено.
  • "Скрывать автоматически" - время показа web push уведомлений будет зависеть от браузера (от 8 до 20 секунд). Если эту опцию оставить неактивной - сообщение будет находиться на экране пока пользователь не кликнет по нему или не закроет.

Запуск и настройка пуш-уведомлений

Если всё готово - нажмите “Начать немедленно”. Для отложенного запуска выберите кнопку "Запланировать" и задайте нужную дату и время отправки.

Триггерная рассылка

Вы можете настроить триггерную рассылку по которой будет отправляться пуш-уведомление клиенту в результате наступления какого-либо события. Условия отправки push могут быть различными.

Рассмотрим пример с условием "Хочу отправлять push-уведомление всем, кто подтвердил подписку". Эта потребность реализовывается очень просто:

Добавиьт сценарий

  • В сценарии устанавливаем блок отправки push-уведомлений и указываем его настройки и сохраняем

Редактирование сценария с пуш-уведомлениями

  • Укажите событие для запуска сценария.

Событие создается в разделе “Триггеры” - “Типы событий”. Вам нужно будет заполнить такие поля:

Добавить тип события

  • Устанавливаем условия запуска сценария

Добавление сценария

После создания события нужно вернуться в раздел “Сценарии” и в созданном сценарии выбрать условия запуска:

Условия запуска сценария с пушами

  • Запускаем сценарий.

Запуск сценария с веб-пушами

Теперь каждому клиенту, который подписался на push-уведомления на вашем сайте, будет приходить пуш сообщение после подтверждения подписки.

Привязка контакта к web push токенам

Один из вопросов, который беспокоит отправителей push-уведомлений - как можно привязать к "безликим" (за исключением технической информации - ip, url, локаль, браузер сбора) web push токенам информацию о фактическом клиенте: узнать его имя, телефон, емейл, чтобы стало возможно воспользоваться персонализацией в самом сообщении.

Ответ крайне прост и уже реализован в нашей системе. Привязка контактов к push-токенам происходит автоматически, когда подписчик переходит на ваш сайт из письма, отправленного через eSputnik. Собирайте токены через eSputnik и вы сможете отправлять персонализированные push-сообщения тем клиентам, которым был не доставлен емейл или создать для себя любой удобный сценарий, который будет соответствовать вашей бизнес логике. К слову, более 20% всех push-токенов в нашей системе имеют привязанный контакт email или номер телефона.

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email