Push уведомления для сайта на WordPress

В этой статье мы рассмотрим, как сделать Push уведомления в браузере для сайта на платформе CMS WordPress. С развитием технологий Email подписка стремительно сдает позиции по привлечению посетителей на сайт. К сожалению из-за кучки недобросовестных веб-мастеров, которые продавали базы своих подписчиков и занимались спам-рассылкой — посетители сайтов теперь с опаской относятся к email рассылке. Частенько попытка отписаться от рассылки ни к чему не приводила — спам продолжал захламлять ящики пользователей.

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

Преимущества Push-уведомлений

  • Они работают в любом браузере или операционной системе;
  • Каждая мобильная платформа поддерживает Push-уведомления — IOS, Android,Windows и BlackBerry;
  • Технология не требует специальных приложений на устройстве;
  • Смартфон получает и отображает социальные, медиа или текстовые сообщения, даже когда экран устройства заблокирован;
  • Они не попадают в спам-фильтры;
  • Пользователь не забудет про них в почтовом ящике;
  • Кликабельность в несколько раз выше, чем у электронной почты.

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

Огромным недостатком Push уведомлений я считаю рассылку мгновенно после публикации. На днях я столкнулся с данной проблемой. Как оказалось, один из моих подписчиков, являясь администратором новостного ресурса, регулярно воровал с моего сайта свеже опубликованные статьи, при этом оказываясь в последствии выше моего оригинала. Поэтому если вы используете рассылку на сайте, то отключайте автоматическую и рассылайте вручную, по истечении некоторого времени. Все статьи добавляйте в Оригинальные тексты ВебМастера, добавляйте ссылку в переобход страниц и индексацию Гугл Searh — все это доступно в сервисах вебмастеров Яндекс и Гугл. Не повторяйте чужих ошибок.

Выбор плагина для отправки push уведомлений

Теперь ближе к теме. Так как в моих планах отправлять Push — уведомления о новых публикациях — это было приоритетом, я решил воспользоваться плагином. Как по мне именно использование плагина сделало б рассылку более стабильной, что не мало важно не требующей постоянных действий с моей стороны — так как работают они автоматически. На wordpress.org оказалось совсем не малое количество доступных плагинов. Это очень усложнило выбор сервиса, который соответствовал моим требованиям:

  1. Доступность, как бесплатной, так и платной версии. Мне совсем не хотелось сразу оплачивать услугу, в востребованности которой на моем ресурсе я не был уверен. Поэтому подбирались сервисы с большим количеством подписчиков в бесплатном тарифе.
  2.  Поддержка максимального количества доступных платформ и оперативных систем. В наше время пользователи пользуются различными устройствами для поиска информации в интернете, поэтому хотелось обхватить как можно большее количество.

Подбор плагина сильно осложнялся тем, что разработчики на wordpress.org не предоставляют полную информацию о тарифах. И о том, что они предлагают только платное использование, узнаешь уже после установки и активации плагина. Многие плагины не соответствовали версии wordpress или попросту не работали, после исполнения всех рекомендаций разработчиков.

Из большого количества я отобрал только два плагина, которые оказались полностью работоспособными и предоставляли до 3000 подписчиков в бесплатном тарифе.

  1. PushAssist (Push Notification for WordPress by PushAssist);
  2. OneSignal Push Notifications.

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

OneSignal Push Notifications

Возможности сервиса:

  • Поддержка Chrome (Desktop & Android), Safari (Mac OS X), и Firefox (Desktop) для  HTTP и HTTPS сайтов;
  • Автоматическая рассылка — плагин автоматически рассылает уведомления подписчикам при публикации или изменении статьи;
  • Оправка сообщений набранных вручную. Но доступна эта функция только с сайта сервиса;
  • Тергетирование;
  • Большое количество настроек отображаемого текста и возможность изменения дизайна окна подписки и кнопки;
  • Аналитика в реальном времени;
  • A/B тестирование;
  • Отслеживание действий с разосланными уведомлениями (закрытие, переход и тд);
  • Рассылка до 3000 подписчиков — бесплатно;
  • Поддержка HTTP и HTTPS соединений.

Ссылка на плагин https://wordpress.org/plugins/onesignal-free-web-push-notifications/

Ссылка на сайт сервиса https://onesignal.com

А теперь пошагово:

После установки и активации плагина и переходе по добавленному пункту OneSignal в боковом меню WordPress нам сразу надо будет перейти для регистрации на самом сервисе. Что очень удобно — доступна и быстрая регистрация через соцсети.

Ну с регистрацией я думаю проблем ни у кого возникнуть не должно…

При входе мы первым делом попадаем в окно создания приложения:

Кликаем плюсик, попадаем в окно создания

Так как я собираюсь осуществлять push рассылку в браузерах — я ее выбираю из предложенных пунктов. Кликаем Next попадаем в следующее окно выбора.

Здесь надо выбрать Google Chrome& Mozilla Firefox, настройку для Safari мы сделаем позже другим способом.

В верхней строке вводим адрес нашего сайта(Важно, чтобы в конце не было слэша. Например: https://ddr5.ru ).

В нижнюю графу прописываем путь к логотипу нашего сайта.

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

Отображение окна Onesignal при подтверждении подписки для сайтов работающих на HTTP. Так как передача данных о подписке возможна только в зашифрованном формате HTTPS, сервис OneSignal предоставляет сайтам не поддерживающим данный тип передачи данных свой домен.

Если сайт поддерживает передачу данных HTTPS переходим по ссылке https://documentation.onesignal.com/docs/web-push-sdk-setup-https  скачиваем архив и закидываем файлы в корневую папку сайта. Открываем manifest.json и прописываем имя сайта в соответствующих строках.

В <head> шаблона прописываем <link rel=»manifest» href=»/manifest.json»>

Важно! Кроме указанной строки ничего больше не прописываем — это приведет к конфликту скриптов и плагин будет работать только через субдомен сервиса и никак иначе.

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

В боковом меню выбираем App Settings

Попадаем в вот такое окно:

У меня Apple Safari уже активировано — у вас будет стоять Inactive. Кликаем configure и заполняем формы.

После сохранения Уведомление и Пописка в сафари активируется. Все последующие настройки осуществляются в плагине.

Копируем Key и Api в соответсвующие строки плагина, доступны они на сайте во вкладке Keys & IDs

В настройках плагина при наличии HTTPS передвигаем ползунок, тем самым включаем поддержку SSL.

 

В Safari Web ID мы копируем и вставляем код из панели настрое приложений сервиса.

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

Хоть настройки и на английском все довольно просто и понятно. При желании включаете отображение кнопки управления подпиской «колокольчика» — цвета, размер и отступы можно изменить по своему усмотрению.

В конечном итоге я получил вот такой вид в Safari

Что смотрится вполне прилично….

И вот такой вид в Google Chrome

Как работает кнопка управления подпиской

Внешний вид уведомлений:

Если выполнили все правильно получаете полностью рабочий сервис push подписки и уведомлений. Работает во всех заявленных браузерах. Проверил в десктопных Mozilla, Safari, Chrome и в Chrome (Android) — работает без нареканий.

PushAssist (Push Notification for WordPress by PushAssist)

Основные возможности:

  • Мгновенные уведомления: уведомления отображаются в виде оповещений сообщений и даже звуковые оповещения в зависимости от операционной системы.
  • Автоматическая рассылка. Плагин позволяет отсылать push уведомления в автоматическом режиме при публикации и обновлении статьи, также есть возможность отправки сообщений набранных вручную прямо из панели  Wordpress.
  • Сегментирование: возможность разбивать общее количество пользователей на группы для рассылки уведомлений только определенным подписчикам.
  • HTTP/HTTPS: поддержка сайтов на WordPress  с HTTP и HTTPS соединением.
  • Возможность изменения логотипа на свой;
  • Поддержка Chrome (Desktop & Android), Safari (Mac OS X), и Firefox
  • Рассылка до 3000 подписчиков — бесплатно;
  • Подробная аналитика;
  • Отслеживание действий с разосланными уведомлениями (закрытие, переход и тд);

Ссылка на плагин https://wordpress.org/plugins/push-notification-for-wp-by-pushassist/

Ссылка на сервис https://pushassist.com

PushAssist меня поразил своей функциональностью, которая доступна прямо из административной панели WordPress.

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

Настройки плагина минимальны если их сравнивать со следующим плагином, который мы будем рассматривать.

 

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

Рассмотрим пошагово:

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

Стоит заметить что большинство из инструментов доступно из панели WordPress. Но есть некоторые функции, которые доступны только на сайте разработчиков. Одной из таких функций настройка сайта с поддержкой SSL.

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

Скачать архив, кликнув на зеленую кнопку

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

Прописать в <head> шаблона

<link rel="manifest" href="/manifest.json">

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

Конечный результат:

Отображение в Chrome:

Внешний вид уведомления:

Оторажение в Safari:

Так как сервис по всей видимости еще молодой, судя по количеству установок и отзывов, ему свойственны и недоработки. При моем знакомстве с плагином не приходили уведомления на Android, а после обновления Safari до 10.0.3 — перестали приходить и в Safari(Desktop). Пол дня тех поддержка по чату уверяла, что исправят данные баги, но я этого момента так и не дождался в течении нескольких дней.

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

Отдал предпочтение OneSignal Push Notifications. Возможно в будущем разработчики сервиса PushAssist доведут его до ума и с удовольствием на него перейду, но пока увы он работает только десктопных Mozilla и Chrome.

Не злоупотребляйте рush-уведомлениями

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

Вас могут заинтересовать:

@DDR5.RU

@DDR5.RU

Комментарии не относящиеся к тематикам страниц, вводящие в заблуждение пользователей нашего ресурса, носящие рекламный и провокационный характер будут беспощадно удаляться!!! С уважением, администрация DDR5.RU...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *