Меню

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

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

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

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

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

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

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

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

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

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

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

Акция в поддержку бизнеса в карантин

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

Превратите онлайн-карты в рабочий канал коммуникации и привлечения клиентов: пользуйтесь сервисом Repometr ВСЕГО ЗА 1 РУБЛЬ!

Адаптируйтесь и будьте ближе к клиентам!

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

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

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

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

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

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

Скроллим страницу вниз на один экран и переходим к настройке 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

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

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

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

Способ 2

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

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

Способ 3

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

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

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

Читайте также:  как сбросить настройки на lg l65 dual

Идентификатор 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 и передавать поведенческие данные с сайта;
  • настраивать автоматизацию («Брошенная корзина», «Реактивация спящих» и подобное);
  • настраивать сегментированный сбор подписок.

источник

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

Автор: @DDR5.RU · Опубликовано 27/01/2017 · Обновлено 30/06/2018

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

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

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

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

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

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

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

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

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

Подбор плагина сильно осложнялся тем, что разработчики на 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 соединений.

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

После установки и активации плагина и переходе по добавленному пункту 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 и прописываем имя сайта в соответствующих строках.

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

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

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

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

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

Читайте также:  настройка mtu для adsl

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

Копируем 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 подписчиков — бесплатно;
  • Подробная аналитика;
  • Отслеживание действий с разосланными уведомлениями (закрытие, переход и тд);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

источник

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

Adblock
detector