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

Зачем вообще нужны уведомления?

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

webpushnotifications - Как добавить кнопку веб-уведомлений на свой сайт

Помимо Рабочего стола уведомления также работают и на мобильных устройствах. Многие популярные сайты используют эту систему, так как она показала себя куда более эффективной, чем СМС, e-mail маркетинг и прочие стратегии по привлечению пользователей. Если верить исследованиям, то пользователи щелкают по уведомлениям на мобильных телефонах в 50% случаев. Это, в свою очередь, увеличит количество просмотров страниц и число возвращающихся пользователей. Теперь, когда мы разобрались с уведомлениями и выяснили, что это действительно годная вещь, давайте уже разберемся с тем, как установить их на сайт WordPress.

Установка уведомлений с помощью OneSignal

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

onesignalkeys - Как добавить кнопку веб-уведомлений на свой сайт

Страница настроек поделена на две вкладки под названием Setup и Configuration. Первая содержит в себе подробную информацию об установке уведомлений. Чтобы настроить только что установленный плагин вам потребуют различные ключи API и application ID.

Шаг 1. Создаем Google Keys

Сперва вам надо посетить Google Services Wizard.

googleservicesapp - Как добавить кнопку веб-уведомлений на свой сайт

Просто введите название для своего приложения и название пакета Android. OneSignal не будет его использовать, но это все равно обязательное поле. Затем выберите свою страну и регион и щелкните по кнопке Choose and configure services. Вы попадете на следующий экран, на котором надо будет выбрать какой сервис вы хотите использовать. Вам нужно щелкнуть по Enable Google Cloud Messaging.

Теперь вы увидите ключ API своего сервера и Sender ID. Вам нужно его скопировать и вставить в страницу настроек плагина под полем Google Project Number. Вам также необходимо скопировать свой Server API key и вставить его в текстовый файл у себя на компьютере, так как потом он нам еще понадобится.

gkeys - Как добавить кнопку веб-уведомлений на свой сайт

Шаг 2. Настраиваем уведомления в Chrome и Firefox

Сейчас мы будем настраивать уведомления в Chrome и Firefox. Сначала надо будет зайти на сайт OneSignal и создать бесплатный аккаунт. Как только вы его создали, надо залогиниться и щелкнуть по кнопке Add a new app.

addnewap - Как добавить кнопку веб-уведомлений на свой сайт

От вас потребуют ввести имя для своего приложения. Можете назвать его как хотите и щелкнуть по кнопке Create, чтобы продолжить.

appname - Как добавить кнопку веб-уведомлений на свой сайт

На следующей странице от вас попросят выбрать платформу. Выбирайте Website Push и идите дальше.

Потом у вас попросят выбрать браузер. Выбирайте Google Chrome и Mozilla Firefox – как настроить Safari мы расскажем чуть позже.

browserplatform - Как добавить кнопку веб-уведомлений на свой сайт

В следующем шаге от вас попросят ввести адрес своего сайта, Google Server API key и адрес изображения для иконки уведомления.

appsettings - Как добавить кнопку веб-уведомлений на свой сайт

Если ваш сайт не поддерживает SSL/HTTPS, то вам надо поставить галочку возле My site is not fully HTTPS. Вы можете настроить SSL на своем сайте, но это необязательно.

Google Chrome не поддерживает уведомления для сайтов без поддержки SLL, однако сервис OneSignal решает эту проблему тем, что подписывает пользователей на свой субдомен https. Вам надо будет выбрать субдомен под свое приложение и ввести Google Project Number или Sender ID, которые вы сгенерировали ранее.

httpfallback - Как добавить кнопку веб-уведомлений на свой сайт

Щелкните по кнопке Save. Теперь вы можете закрыть этот экран. Вас предупредят, что настройка не завершена. Нажмите Да.

Шаг 3. Создаем ключи OneSignal

Вам теперь понадобятся OneSignal Keys для своего сайт. Щелкните по App Settings из панели управления вашего приложения.

appsettingslink - Как добавить кнопку веб-уведомлений на свой сайт

Вы попадете на страницу настроек, где нужно будет выбрать вкладку Keys and IDs.

keysandids - Как добавить кнопку веб-уведомлений на свой сайт

Вы увидите OneSignal App ID и Rest API Key.

onesignalkeys - Как добавить кнопку веб-уведомлений на свой сайт

Вам надо будет скопировать и вставить их в настройках плагина OneSignal у себя на сайте.

Шаг 4. Настраиваем уведомления в Safari

Помните, мы пропустили настройку Safari? Теперь мы покажем как настроить уведомления и для этого браузера. Залогиньтесь в свой аккаунт OneSignal и зайдите на страничку App Settings. Прокрутите до веб платформ и выберите Apple Safari.

configapplesafari - Как добавить кнопку веб-уведомлений на свой сайт

Откроется диалоговое окно, в котором надо будет ввести имя сайта и его адрес.

safarisettings - Как добавить кнопку веб-уведомлений на свой сайт

Вам нужно отметить ячейку I’d like to upload my own notification icons. Перед вами появится опция загрузки иконок разных размеров. воспользуйтесь Фотошопом или любым графическим редактором, чтобы создать иконки нужного размера. Затем загрузите их.

safarinotificationicons - Как добавить кнопку веб-уведомлений на свой сайт

После этого нажмите на кнопку Save и закройте диалоговое окно. Обновите страницу App Settings и прокрутите вниз до раздела Web Platforms. В этот раз вы увидите Web ID под Apple Safari.

safariwebid - Как добавить кнопку веб-уведомлений на свой сайт

Вам надо скопировать этот ID и вставить его во вкладку Configuration плагина OneSignal. Вот и все – вы успешно настроили уведомления для своего сайта.

Шаг 5. Проверка уведомлений

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

subscribepushnotif - Как добавить кнопку веб-уведомлений на свой сайт

Вы должны будете увидеть сообщение thank you for subscribing, которое идет по умолчанию. Теперь залогиньтесь в OneSignal. Щелкните по названию приложения, а потом по App Settings. Прокрутите вниз до платформ и выберите Google Chrome и Firefox.

cofigwebpush - Как добавить кнопку веб-уведомлений на свой сайт

Вы увидите экран настройки, который вы уже заполняли ранее. Просто нажмите Save и щелкните по Continue.

testingwebpush1 - Как добавить кнопку веб-уведомлений на свой сайт

Вас попросят выбрать SDK. Выберите WordPress и щелкните Next.

testingwebpush2 - Как добавить кнопку веб-уведомлений на свой сайт

Так как на данный момент у вас всего один подписчик, то ваш ID будет автоматически заполнен. Нажмите Next и вы попадете на экран Test Settings. Щелкните по Send Test Notification.

sendtestnotif - Как добавить кнопку веб-уведомлений на свой сайт

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

testnotif - Как добавить кнопку веб-уведомлений на свой сайт

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

successmsg - Как добавить кнопку веб-уведомлений на свой сайт

Вернитесь назад на экран настроек на сайте OneSignal и нажмите Check Notification Status.

notifstatuscheck - Как добавить кнопку веб-уведомлений на свой сайт

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

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

Плагин уведомлений OneSignal автоматически отправит уведомление всем вашим подписчикам каждый раз, когда вы опубликуете какой-нибудь новый пост. Вы можете настроить уведомления и вручную. Зайдите в свой аккаунт и щелкните по названию приложения. Из меню слева выберите кнопку New Message.

newmessage - Как добавить кнопку веб-уведомлений на свой сайт

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

composepushnotification - Как добавить кнопку веб-уведомлений на свой сайт

Вы также можете щелкнуть на Options, Segment, Schedule/Send Later для больших настроек ваших уведомлений. Например, можете направить на определенную страницу сайта или выбрать определенный сегмент пользователей, которые увидят ваше уведомление, или даже назначить время для его появления.


Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — vadim@coma.lv, +371 29394520


Как добавить кнопку веб-уведомлений на свой сайт
5 2 votes