Как создать web push-уведомление? Видео

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

Пуш-уведомления — это бесплатная функция, которая может повлиять на ваши конверсии, а также информировать людей о новостях на ваших страницах, оповещать их или напоминать о вашем сайте. Они позволяют охватить больше людей и отображать уведомления с возможностью перехода на выбранный вами сайт.

С помощью GetResponse вы теперь можете создавать Rich push уведомления, которые позволяют включать изображения, добавлять кнопки действий и поддерживать темы. Внешний вид уведомления может отличаться от предварительного просмотра в зависимости от браузера и операционной системы получателя (так как разные браузеры/ОС поддерживают разные элементы Rich push).

Вы также можете сгенерировать заголовок и текст уведомления с помощью AI.

Введение в веб-пуш уведомления

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

Как работает веб-пуш?

Когда посетитель нажимает Разрешить уведомления, наше приложение отправляет запрос соответствующему посреднику (push-сервису), который доставляет сообщение в браузер, если он онлайн. Если браузер офлайн, сообщение ставится в очередь и будет доставлено при следующем открытии браузера. [Нажмите здесь для получения дополнительной информации.]

• Вам нужно создать сайт в GetResponse, который будет содержать ваши уведомления, а также URL и изображение.
• Необходимо установить скрипт интеграции WebConnect на ваш сайт и service worker на сервер сайта.
• Мы поддерживаем все основные браузеры, за исключением Safari и Internet Explorer 11.
• Мы настоятельно рекомендуем создавать пользовательский запрос разрешения перед показом нативного запроса браузера. Это уведомит ваших посетителей о том, что вы можете отправлять им уведомления, если они согласятся. Такой подход повышает конверсию, а также некоторые браузеры могут блокировать нативный запрос браузера, если до этого не было взаимодействия с сайтом. Кроме того, пользовательский запрос может увеличить количество подписок на ваши уведомления.

Пользовательский запрос разрешения

Нативный запрос разрешения

Добавление сайта

Чтобы добавить сайт:

1. Перейдите в Инструменты > Пуш-уведомления.
2. Нажмите Добавить сайт.

Click Add site.

3. Укажите название вашего сайта (до 150 символов).
4. Укажите точный URL вашего сайта. Это должен быть именно тот URL, который отображается в браузере. Ваш сайт должен поддерживать HTTPS, чтобы отправлять уведомления. Если нет, потребуется настроить SSL-сертификат для сайта.
5. (Необязательно) Нажмите Загрузить изображение, если хотите добавить иконку. Это будет изображение по умолчанию, отображаемое во всех ваших уведомлениях и пользовательских запросах. Это может быть ваш логотип или фирменная иконка.
6. Нажмите Добавить сайт и продолжите.

Вы можете добавить только домен или поддомен в качестве сайта, например:

• https://example.com
• https://subdomain.example.com

Нельзя использовать каталог в качестве сайта, например:

• https://example.com/directory
• https://subdomain.example.com/directory

Второй шаг — настроить ваш сайт.

1. Нажмите Получить Web Connect, чтобы скопировать код отслеживания. Добавьте этот код на сайт, где вы хотите отображать уведомления. Он должен быть размещён в разделе head.
2. Нажмите Скачать файл service worker, чтобы загрузить service worker. Установите его в корневой каталог вашего сайта на сервере. Если вы не уверены в своих силах, попросите помощи у веб-разработчика.
   Когда пользователи согласятся на уведомления, service worker будет загружен в их браузер. Если они подпишутся, они смогут получать ваши уведомления. На что обратить внимание:
   • Для установки service worker требуется HTTPS.
   • Не переименовывайте файл.
   • Файл должен относиться к тому же домену (origin), что и ваш сайт.
3. Нажмите Завершить, чтобы завершить настройку сайта.

На третьем шаге вы можете выбрать способ подписки. Двухэтапная подписка (с пользовательскими запросами) обеспечивает лучшую конверсию. Этот параметр можно изменить позже в Путях запроса.

• При одиночной подписке (One-click opt-in) будет отображаться только нативный запрос браузера.
• Двухэтапная подписка (Two-click opt-in) позволяет создать пользовательский брендированный запрос, который показывается перед нативным запросом браузера.

Управление сайтом

Чтобы управлять сайтом:

1. Перейдите в Веб-пуш уведомления.
2. Наведите курсор на меню Действия (вертикальное многоточие).
3. Там вы можете:
   • Редактировать сайт
   • Получить код и service worker
   • Создать запрос разрешения (Prompt)
   • Создать уведомление
   • Удалить сайт (возможно только при отсутствии активных уведомлений)

На этом экране вы также увидите, сколько человек подписано на уведомления с этого сайта.

Создание запроса разрешения

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

Учтите, что:

• Нельзя редактировать или удалять нативный запрос браузера.
• Вы можете просмотреть, как будет выглядеть запрос. Внешний вид запроса может отличаться в разных браузерах и операционных системах.
• Вы найдёте его в разделе Permission prompts, рядом с любыми пользовательскими запросами, которые вы создали.

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

Чтобы создать пользовательский запрос:

1. Перейдите в Веб-пуш уведомления.
2. Наведите курсор на меню Действия (вертикальное многоточие) и выберите Создать запрос.

3. Введите внутреннее название для вашего запроса (до 150 символов).
4. Введите текст вашего запроса (до 128 символов). Создайте персонализированное сообщение, чтобы побудить людей подписаться. Пользовательский запрос отображается перед нативным запросом.
5. Укажите текст кнопки подтверждения и выберите её цвет.
6. Укажите текст ссылки отмены и выберите её цвет. Справа будет отображён предварительный просмотр вашего запроса.
7. Нажмите Сохранить, чтобы завершить настройку пользовательского запроса.
8. (Необязательно) Нажмите Предварительный просмотр, чтобы увидеть, как будет выглядеть нативный запрос.
9. Нажмите Сохранить и активировать, чтобы активировать созданный запрос (с отключением текущего активного), или Сохранить прогресс, чтобы сохранить изменения без активации запроса.

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

Управление запросами

Чтобы управлять вашими запросами:

1. Перейдите в Веб-пуш уведомления.
2. Нажмите на название вашего сайта.
3. На вкладке Permission prompts вы можете деактивировать запрос.
4. Чтобы управлять запросом, наведите курсор на меню Действия (вертикальное многоточие) рядом с вашим пользовательским запросом. Там вы сможете:
   • Редактировать запрос
   • Удалить его (возможно только если запрос ещё не был отображён)

Контроль того, где будут отображаться ваши запросы

Вы можете контролировать, где будут отображаться ваши запросы, с помощью Путей запроса (Prompt paths).

Пути запроса предназначены для того, чтобы показывать запрос на всём сайте или выбирать конкретные страницы, добавляя путь запроса. Путь относится к части URL после домена. Например, в URL “https://www.example.com/store/sale” путь будет “/store/sale”.

1. Перейдите в Веб-пуш уведомления.
2. Нажмите на название вашего сайта.
3. Перейдите на вкладку Prompt paths.
4. Нажмите Редактировать пути (Edit paths), чтобы изменить все пути.
5. Наведите курсор на три точки рядом с вашим путем, чтобы удалить его или добавить путь выше или ниже.

6. При добавлении пути необходимо:
   • Выбрать запрос (Prompt)
   • Введите путь запроса (Prompt path), у вас есть три типа на выбор:
     • Путь начинается с (Path starts with) — введите первую часть URL, которая отображается после URL вашего сайта. Например, если это https://www.example.com/store/, введите /store, и запрос будет показан на всех страницах, начинающихся с https://www.example.com/store/
     • Путь исключает (Path excludes) — введите часть пути URL, на которой вы не хотите показывать запрос
     • Весь сайт (Entire site) — выберите этот вариант, если хотите показать выбранный запрос на всём сайте. При выборе этого варианта все запросы с более низким приоритетом, выбранные с Путь начинается с (Path starts with), будут скрыты
7. Определите последовательность ваших путей запроса, перемещая их вверх и вниз с помощью значка с тремя полосками слева от пути.

8. Сохраните изменения, нажав Сохранить пути (Save Paths).

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

Создание уведомления

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

Примечание: разные браузеры и устройства могут иметь разные ограничения по количеству символов. Чтобы уведомление корректно отображалось у всех подписчиков, лучше не создавать слишком длинные уведомления, так как они могут отображаться не полностью.

Вы можете создавать уведомления вручную или с помощью AI.

Чтобы создать уведомление:

1. Перейдите в Веб-пуш уведомления.
2. Наведите курсор на меню Действия (вертикальное многоточие) и нажмите Создать уведомление.

3. Укажите внутреннее название для вашего уведомления (до 150 символов).
4. На этом этапе вы можете выбрать, хотите ли использовать AI (см. таблицу ниже) или создать уведомление вручную (перейдите к пункту 4). AI доступен только в платных тарифных планах.

4. В разделе Аудитория (Audience) вы можете настроить отображение ваших запросов для определённых групп пользователей. Раздел подразделяется на три части:
   • Посетители (Visitors) — выберите группу, для которой будет отображаться запрос:
     • Все посетители (All visitors)
     • Новые посетители (New visitors)
     • Возвратившиеся посетители (Returning visitors) с возможностью указать количество посещений
   • Устройство (Device) — выберите устройство или устройства, на которых будет отображаться запрос:
     • Телефон (Phone)
     • Планшет (Tablet)
     • Настольный компьютер (Desktop)
   • Страна (Country) — нацеливание на посетителей по их стране.

5. (Необязательно) Добавьте триггеры для появления запроса:
   • После указанного количества секунд
     • После прокрутки определённого процента страницы
     • При намерении покинуть страницу
     • После периода бездействия
     • По клику на конкретный элемент
6. Необходимо выбрать, должен ли запрос отображаться, когда все выбранные триггеры срабатывают, или достаточно, чтобы сработал любой триггер.

6. Время ожидания запроса (Prompt cooldown). Чтобы не перегружать пользователей, вы можете установить период ожидания для запроса. Это определяет, сколько дней должно пройти, прежде чем запрос снова появится у того же пользователя, если он ранее его закрыл.
7. 

7. Введите заголовок уведомления (до 250 символов). Используйте цепляющую фразу или название вашего бренда.
8. (Необязательно) Добавьте текст уведомления (до 250 символов). Используйте его, чтобы рассказать больше о продвигаемом товаре, уведомить подписчиков о изменениях или сообщить о текущих распродажах и новых продуктах.
9. (Необязательно) Укажите URL назначения, на который пользователи будут перенаправлены после клика по вашему уведомлению.

10. (Необязательно) Загрузите изображение для уведомления. Можно использовать форматы: JPEG, .JPG, PNG, GIF, WEBP, ICO, CUR, BMP, размером не более 10 МБ. Рекомендуем использовать изображение с соотношением ширины к высоте 2:1.
11. (Необязательно) Загрузите иконку для уведомления. Можно использовать форматы: .JPEG, .JPG, .PNG, .GIF, .WEBP, .ICO, .CUR, .BMP, размером до 10 МБ. Для наилучшего результата используйте квадратное изображение не меньше 196 x 196 пикселей.

12. (Необязательно) Нажмите кнопку Добавить (Add), чтобы создать кнопки действий для уведомления, позволяющие посетителям выполнять определённые действия. Затем введите текст, который будет отображаться на кнопке, вставьте URL, который откроется при клике на кнопку, и выберите иконку кнопки, которая будет отображаться рядом с текстом кнопки.

13. Справа вы сможете увидеть предварительный просмотр уведомления и протестировать его в браузере. Предварительный просмотр будет применяться для браузера Google Chrome на macOS, Windows и Android. Для других браузеров и операционных систем могут быть визуальные отличия. Предварительный просмотр носит информационный характер, так как на отдельных устройствах могут быть различия.
14. Чтобы протестировать, как уведомление будет работать в вашей системе, нажмите Предварительный просмотр в браузере (Preview in browser). Вам будет предложено согласиться на получение уведомлений.
15. Вы сможете просмотреть аудиторию, то есть сколько человек подписалось на ваше уведомление.
16. Вы можете выбрать, отправить уведомление сразу (Send) или запланировать (Schedule) его на позже. При планировании уведомления можно изменить часовой пояс, отличный от стандартного в вашей учетной записи.
17. Примечание: запланированное уведомление также может использоваться в автоматизированном рабочем процессе (automation workflow).
18. Вы можете нажать Отмена (Cancel), Сохранить черновик (Save draft), чтобы использовать уведомление позже, Отправить уведомление (Send notification) или Запланировать уведомление (Schedule notification).
19. Примечание: чтобы отправить уведомление сразу, нужен хотя бы один подписчик на уведомления, но для планирования уведомления на позже это не требуется.
20. (Необязательно) Вы можете установить тему уведомления (notification topic). Это работает, если у вас несколько уведомлений с одной темой. Старое уведомление, на которое не кликнули, будет заменено новым уведомлением с той же темой. Однако, если посетитель офлайн и несколько сообщений с одной темой ожидают доставки, он получит только последнее.
21. После этого вы будете перенаправлены на страницу Уведомления (Notification page). Там вы сможете видеть статус уведомления, когда оно было создано и отправлено, сколько уведомлений было отправлено, доставлено и на сколько из них кликнули.

Управление уведомлениями

Чтобы управлять вашими уведомлениями:

1. Перейдите в Веб-пуш уведомления.
2. Нажмите на название вашего сайта.
3. На вкладке Уведомления (Notifications) наведите курсор на меню Действия (вертикальное многоточие), где вы можете:
   • Просмотреть уведомление
   • Создать копию уведомления
   • Отменить (если запланировано)

Чтобы изменить запланированную дату и время уведомления, необходимо его отменить и запланировать заново.

Для уведомления, которое не было отправлено или является черновиком, у вас есть следующие варианты:

• Редактировать
• Удалить