unnamed

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

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

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

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

WordPress

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

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

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

WordPress

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

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

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

WordPress

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

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

WordPress

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

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

WordPress

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

WordPress

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

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

WordPress

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

WordPress

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

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

WordPress

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

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

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

WordPress

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

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

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

WordPress

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

WordPress

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


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