Меню

Onesignal push notifications настройка



Как добавить Push-уведомления на WordPress-сайт

Сегодня мы узнаем, как добавить PUSH-уведомления на WordPress-сайт с помощью популярного сервиса OneSignal . Для этого мы установим и настроим бесплатный плагин OneSignal для WordPress .

Что такое Push-уведомления?

Push – это технология отправки сайтом интерактивных уведомлений на компьютер или мобильное устройство пользователя. Это новый канал взаимодействия, который позволяет отправлять маркетинговые сообщения посетителям, даже если они покинут ваш сайт или закроют браузер. Он обеспечивает более высокие показатели вовлеченности и прямых переходов по сравнению с другими маркетинговыми стратегиями. Изображение, приведенное ниже, демонстрирует push-уведомления Facebook в действии.

Несколько фактов о PUSH-уведомлениях.

  • Они обеспечивают средний показатель вовлеченности 7–10%.
  • CTR в 4-8 раз выше, чем email-рассылки.
  • Имеют средний уровень отказа от подписки 10%.

Как использовать Push-уведомления

Несколько сценариев использования Push-рассылок:

  • Отправка информации о распродажах, последних новостей и т. д.
  • Привлечение внимания пользователей путем отправки уведомлений о публикации нового контента.
  • Реализация ретаргетинга и удержания путем информирования о расширении ассортимента, скидках, персональных бонусах и т.д.

Как установить Push-уведомления с помощью OneSignal

Чтобы установить службу push-уведомлений OneSignal, мы используем официальный плагин сервиса. Он доступен в репозитории плагинов на WordPress.org.

Войдите в панель администрирования WordPress-сайта и перейдите в раздел « Плагины», «Добавить новый» .

В поле поиска введите «OneSignal». Затем выберите нужный плагин и нажмите на кнопку « Установить сейчас» .

Дождитесь завершения установки и нажмите кнопку « Активировать» .

Активация плагина добавит новый пункт « OneSignal Push» в меню панели администрирования WordPress.

Как настроить Push-уведомления с помощью OneSignal

Чтобы настроить Push-уведомления, кликните по пункту « OneSignal Push» в меню панели администрирования WordPress.

Это приведет вас на страницу настроек OneSignal.

Обратите внимание на уведомление в самом верху страницы. Оно сообщает, что нужно делать дальше. Вкладка « Configuration» позволяет связать службу push-уведомлений OneSignal с вашим WordPress-сайтом.

Создание бесплатной учетной записи OneSignal

Создадим работающее веб-приложение с push-уведомлениями. Чтобы создать бесплатную учетную запись OneSignal, на вкладке «Setup» кликните по ссылке OneSignal.

Также можно просто открыть в браузере сайт onesignal.com. После этого откроется официальный сайт OneSignal (в новой вкладке браузера). Нажмите кнопку « Sign Up» .

Заполните форму, а затем нажмите кнопку « Create Account» . Также вы можете зарегистрироваться с помощью учетной записи GitHub, Google или Facebook.

После регистрации активируйте созданный аккаунт через электронную почту.

Войдите в указанный при регистрации электронный почтовый ящик, найдите письмо от сервиса и перейдите по ссылке « Click Here To Confirm Your Account» .

Это откроет панель управления OneSignal в новой вкладке браузера.

В конечном итоге вы окажетесь на информационной панели OneSignal.

Создание приложения Web Push

Теперь создадим первое веб-приложение с push-уведомлениями. Нажмите кнопку «Add App».

Читайте также:  Контакт советы по настройкам

Введите название приложения и нажмите кнопку « Add App» .

На следующем шаге выберите Web Push и нажмите кнопку « Next» .

Перейдите на вкладку « WordPress Plugin or Website Builder» , а затем на вкладку « WordPress» .

Далее прокрутите страницу вниз, заполните форму, загрузите иконку и нажмите кнопку « Save» .

Это действие сохранит ваше веб-приложение Web Push и предоставит идентификатор приложения ( APP ID ) и API-ключ ( API KEY ). Они необходимы для добавления push-уведомлений OneSignal на ваш WordPress-сайт. Посмотрите изображение, приведенное ниже.

Скопируйте идентификатор приложения и ключ API. Затем вставьте их в соответствующие поля на вкладке « Configuration» в разделе OneSignal Push панели администрирования WordPress.

После этого активируйте нужные настройки, прокрутите страницу вниз и нажмите кнопку « Save» .

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

Настройка push-уведомлений с помощью OneSignal для браузера Safari

Чтобы настроить Push-уведомления для браузера Safari, необходимо сгенерировать веб-идентификатор Safari. Для этого откройте панель инструментов OneSignal и щелкните по своему приложению.

Затем нажмите кнопку « Settings» .

Кликните по вкладке « Apple Safari» .

Затем заполните форму и нажмите кнопку « Save» .

Снова кликните по вкладке « Apple Safari» .

После этого появится всплывающее окно с идентификатором для браузера Safari (Safari Web ID).

Скопируйте идентификатор и вставьте его на вкладке « Configuration» .

Прокрутите вниз до нижней части страницы и нажмите кнопку « Save» .

Бесплатный аккаунт сервиса поддерживает до 30 000 веб-подписчиков и неограниченное количество мобильных подписчиков. Если нужно больше, то можно приобрести пакет стоимостью от 99 долларов в месяц.

Настройка push-уведомлений с помощью специального WordPress-плагина и сервиса OneSignal проста и занимает не больше 15 минут.

Источник

Как настроить пуши на сайте, не потратив ни рубля — пошаговое руководство

Чёткая инструкция от Константина Юревича, сооснователя Driveback.

В умелых руках веб-пуши увеличивают конверсию на сайте и превращают пользователей в лояльных покупателей. Если вы ещё не тестировали инструмент, потому что «сложно» или «дорого», расскажем, как настроить пуши на сайте самостоятельно и бесплатно.

Руководство написано на базе одной из популярнейших систем по отправке пуш-уведомлений — OneSignal. Выбор пал на неё по двум причинам:

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

Что нужно для начала работы:

  • сайт с поддержкой HTTPS, на котором будем настраивать пуши;
  • доступ к коду сайта, чтобы разместить в нём три статичных файла.

Шаг 1. Регистрация и настройка аккаунта

Регистрируем новый аккаунт в OneSignal. Подтверждаем email и логинимся в панели управления:

Читайте также:  Avermedia live gamer portable настройка

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

Черный чемоданчик, чтобы быть в топе в Черную Пятницу!

Подписывайся и узнавай первым про наши обновления!

Нажимаем Add a new app и указываем название сайта, на котором хотим настроить пуш-уведомления:

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

Отмечаем Web Push и нажимаем Next:

Выбираем тип настроек Typical Site. Ниже указываем имя сайта и его URL с HTTPS. Загружаем квадратную картинку с логотипом вашего сайта, нажав кнопку +UPLOAD. Она будет отображаться в качестве иконки будущих пуш-уведомлений.

Настройку My site is not fully HTTPS оставляем по умолчанию отключённой.

Если ваш сайт до сих пор не поддерживает HTTPS, прекращайте чтение руководства и займитесь настройкой HTTPS:-) Безопасность пользователей превыше всего.

Скроллим страницу вниз на один экран и переходим к настройке Prompt. Это диалог, который запрашивает у пользователя разрешение на подписку.

Выбираем ADD A PROMPT:

В появившемся окне выбираем тип диалога SLIDE PROMPT.

Активируем опцию Customize slide prompt text, чтобы активировать русский язык.

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

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

Переходим на следующий экран, где опционально можно настроить Welcome Notification — сообщение об успешной подписке.

Ничего не имею против Welcome Notification, но точно нужно деактивировать Open link when clicking welcome notification. Многие компании не просто ставят ссылки в такие сообщения, но и проставляют utm-метки: но это вредит атрибуции по last non-direct click.

Скроллим до конца страницы. Оставляем все опции по умолчанию и нажимаем Save.

Шаг 2. Установка на сайт

Теперь устанавливаем систему OneSignal на сайт.

Скачиваем файлы OneSignal SDK и загружаем их в корень сайта:

Файлов всего три:

  • Manifest.json
  • OneSignalSDKUpdaterWorker.js
  • OneSignalSDKWorker.js

Самый простой способ поставить их в корень сайта — доверить эту работу программистам, а затем пройти по ссылкам и проверить. Домен заменить на собственный:

Если ссылки открываются и публично доступны, значит всё работает. После этого осталось добавить код инициализации OneSignal на все страницы сайта.

Сделать это можно разными способами. Рассмотрим некоторые из них.

Способ 1

Установить напрямую в код сайта, как показано на скриншоте:

Читайте также:  Настройка часов casio alarm chrono

Не рекомендую этот способ по двум причинам. Во-первых, в будущем надо будет часто менять конфигурацию, чтобы отправлять в OneSignal разные сегменты и настраивать автоматизацию.

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

Способ 2

Установить при помощи Google Tag Manager.

Использовать триггер All Pages, как показано на рисунке:

Способ 3

Подключить при помощи DigitalDataManager.

Для этого необходимо выбрать OneSignal в личном кабинете в списке интеграций:

Указать идентификатор App ID и сохранить:

Идентификатор App ID можно найти в JS-коде установки из пункта 1 или позже в специальном разделе панели управления:

Настройка для всех браузеров, кроме Safari, завершена.

Шаг 3. Настройка пуш-уведомлений для Safari

Настройка пуш-уведомлений для браузера Safari требует сделать дополнительный шаг. Заходим в Settings в панели OneSignal:

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

В поле Site Name указываем название сайта.

В поле Site URL прописываем URL сайта с https. В нашем случае это demo.ddmanager.ru

Поле I’d like to upload my own.p12 certificate оставляем неактивным.

Поле I’d like to upload my own notification icons делаем активным и загружаем квадратную иконку сайта в разрешении 256×256.

Название сайта Site name и иконка будут отображаться в системных диалогов Safari:

Когда всё готово, нажимаем Save.

Шаг 4. Подписка на пуш-уведомления

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

Подписываемся на пуш-уведомления и возвращаемся в панель OneSignal, чтобы проверить, что подписки появились в разделе Users.

Заходим в Users → All Users:

Находим себя в списке подписчиков:

Следующим шагом добавляем себя в список тестировщиков, чтобы в будущем тестировать новые пуш-уведомления.

Присваиваем имя «тестировщику»:

Видим, что все тестовые пользователи отображаются в разделе Users → Test Users:

Шаг 5. Отправка первого пуш-уведомления

Теперь главное — тестируем отправку первого пуш-уведомления.

Заходим в раздел Messages и нажимаем New Push:

В разделе Audience выбираем Send to Test Device(s) и отмечаем галочками тестовые подписки, которые настроили в предыдущем шаге:

Указываем заголовок и вводим текст сообщения:

Для браузера Google Chrome можно настроить разные картинки, иконки и кнопки.

Указываем URL перехода при клике на пуш с необходимым UTM-метками в поле Launch URL и нажимаем Confirm:

Подтверждаем отправку выбранному сегменту пользователей:

Барабанная дробь… И появляются пуш-уведомления.

В следующих частях расскажем, как:

  • настраивать сегменты внутри OneSignal и передавать поведенческие данные с сайта;
  • настраивать автоматизацию («Брошенная корзина», «Реактивация спящих» и подобное);
  • настраивать сегментированный сбор подписок.

Источник

Adblock
detector