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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• в один клик;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настраивается аналогично стандартному виду подписки в два клика. Дополнительно необходимо указать позицию запроса на подписку к 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 или номер телефона.