Progress28.ru

IT Новости
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Оповещения в браузере

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

Вероятно, вы все уже слышали про технологию «Веб-push» в составе Push API и Notifications API. Я уверен, что среди вас есть те, кто возлагает надежды на эту технологию, как на новый канал коммуникации с пользователем. И я не исключаю возможность, что данную статью будут читать основатели тех немногочисленных стартапов, которые всерьёз занялись окучиванием технологии «Веб-push» для рекламы и маркетинга. Сегодня я вам расскажу, о том как можно использовать данную технологию.

Современные веб стандарты подарили нам возможность посылать пользователю уведомления. Это такие всплывающие сообщения в правом нижнем углу экрана, хотя местоположение зависит от используемого браузера, а повлиять на расположение сообщения разработчик напрямую не может. И вот эти сообщения всплывают значит и показывают какую-то информацию. Информацию заведомо нужную пользователю, так как нельзя распространить эти уведомления на аудиторию, которая на них не подписана. И всё вроде бы логично, но пользователи упорно жмут кнопку «Отказаться», когда им предлагают подписаться на получение таких уведомлений. Попробуем разобраться почему так происходит.

Технология «веб-push» буксует на одном месте и это очевидно. Помимо раздражающего фактора наличия самого уведомления, которое стремительным, ослепительно белым аэропланом врывается на поверхность рабочего стола, есть ещё одна причина. Это использование технологии не по назначению. Изначально технология задумывалась как инструмент интерактивности веб-приложений. Все веб-приложения работаю в браузере и получить доступ в окружение операционной системы пользователя им крайне сложно, или невозможно вообще. Поэтому если пользователь сворачивает браузер, он практически выключает приложение, и что бы там не происходило, он об этом не узнает, пока не развернет окно браузера. Технология уведомлений позволяет обратить внимание пользователя на приложение даже когда браузер свернут. Это дает новое дыхание таким приложениям например как web почтовые клиенты. Но некоторым людям захотелось использовать этот канал связи для интернет-маркетинга и рекламы. Предполагается, что пользователи добровольно будут подписываться на такого рода рассылки.

Но так или иначе технология существует и её надо осваивать. Настал тот момент, когда я решил встроить уведомления на сайт. Как оказалось, технология (Web Push API и Notification API) достаточно простая и естественно появилось желание поэкспериментировать. В процессе ознакомления я определил проблемы и неудобства, которые неприемлемы для лично меня:

Со стороны пользователя

  • неадекватная система подписки/отписки на уведомления
  • нет доступа к истории уведомлений
  • нет пользовательских настроек, например, что-то типа режима «не беспокоить»

Со стороны отправителя уведомлений

  • отсутствие контроля за уведомлениями и базой пользователей
  • отсутствие статистики по активности клики/просмотры

Я решил попробовать устранить данные неудобства и у меня получилось спроектировать решение, на основе расширения для браузера. Архитектура клиент-серверная и расширение выступает в роли клиента. Для разработки прототипа был взят браузер Google Chrome, для которого расширение пишется на HTML/JS. Панель управления выполнена на PHP. Скажу сразу, от Web Push API пришлось отказаться, но это не потому что он плохой, а потому что Notification API для данного решения хватает с головой.

Собственно, для начала было сделано расширение для браузера, которое умеет бегать на сервер и спрашивать есть ли для него сообщения (ссылка на код расширения в конце статьи). Если сообщения есть, то в зависимости от настроек пользователя, появляются уведомления на рабочем столе. Так же пользователь может получить доступ к списку активных уведомлений в любое время нажав на иконку расширения в браузере. Есть опция «Не беспокоить», которая позволяет отключать уведомления, но оставляет возможность пользователю получить доступ к пришедшим уведомлениям через кнопку расширения. Так же вне зависимости от настроек на кнопке расширения присутствует индикация наличия непрочитанных сообщений.

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

Читать еще:  Одноклассники войти через логин

Расширение можно удалить стандартным способом, т.е. так же, как и любое другое расширение для браузера, но для удобства, дополнительно добавлена кнопка для удаления. На случай самоликвидации отправителя, существует способ удаленно деинсталлировать расширение со всех устройств пользователей, послав в заголовке сообщения секретную команду, где вы ещё такое найдёте :).

Что касается серверной части, то тут мы имеем небольшую админку написанную на PHP для внесения уведомлений в БД и шлюз для приема запросов от пользователей и соответственно выдачу уведомлений из БД. Этот же шлюз используется для сбора статистики и пишет всё в ту же БД.

Вот пример того как сервер отдает JSON для уведомлений (установлен лимит в 3 сообщения).

А вот так формирую JSON для отображения в расширении. Тут отдаём HTML снипет:

Формируем HTML снипет extention_m.php:

Осталось рассказать про статистику. Я много делать не стал. В свою базу добавляю по минимуму. С остальным хорошо справляется Google Analytics. Просто при публикации расширения я указал Google Analytics ID и могу получать всю информацию о просмотрах и переходах по ссылкам, которые содержатся в уведомлениях.

Вот таким способом мне удалось оптимизировать технологию веб-push уведомлений и сделать её более удобной (по крайней мере для себя). Учитывая широкие возможности браузерных расширений, в данное приложение можно добавить более богатый функционал.

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

Здесь само расширение для браузера Chrome , о котором говрится в статье.

Браузерные push уведомления: Что это и как сделать для сайта своими руками

Правда жизни такова:

Это реально сложно получать трафик на сайт.

Но знаете что еще хуже?

90% посетителей, побывавших на вашем сайте не вернутся больше никогда.

Эксклюзивный бонус: [popup_trigger > Нажмите здесь [/popup_trigger] чтобы скачать чеклист по созданию магнетических текстов. Статьи, написанные по этому чеклисту будут словно магнитом удерживать внимание читателя ([popup_trigger >нажмите чтобы скачать [/popup_trigger]).

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

Но не отчаивайтесь, есть решение:

Установите на свой сайт браузерные пуш уведомления.

Вот в чем фишка:

Пуш уведомления для сайта позволяют быть на связи с вашими посетителями.

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

Да и просто, это хорошая альтернатива email рассылке.

В этой статье вы узнаете:

  • В чем преимущество пуш уведомлений
  • Стоит ли использовать эту относительно новую технологию
  • Список лучших сервисов пуш уведомлений
  • Как подключать push`ы на свой сайт

Но прежде, небольшой пример.

Компания Extra — один из крупнейших ритейлеров на Ближнем Востоке.

С помощью пуш уведомлений они смогли увеличить продажи мобильным пользователям в 2 раза:

Если вы думаете, что на этом все — вы глубоко ошибаетесь.

Помимо этого, доля повторных покупок выросла в 4 раза (. ).

Как итог, маркетологи компании Extra признали пуш уведомления как самый эффективный инструмент удержания клиентов.

Даже круче чем email рассылка.

Что такое push уведомления для сайта?

Все еще не уверены, что такое push уведомления для сайта?

Все очень просто:

Заходя на какой-нибудь веб ресурс вы можете увидеть вот такое всплывающее окно:

Пример запроса на получение push уведомлений

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

Читать еще:  Одноклассники ru вход на мою страницу

Сообщения появляются в правом углу экрана. При этом браузер может быть свернут или даже закрыт.

Пример пуш уведомления:

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

Браузеры, поддерживающие Push уведомления

Первой технологию пуш уведомлений в браузере начала поддерживать Safari . Затем, в апреле 2015 года ее внедрили в Chrome версии 42 .

И наконец, в начале 2016 года пуш уведомления начали поддерживаться в браузере Firefox версии 44 .

На данный момент уже более 75% всех браузеров поддерживают отправку Push уведомлений.

Почему пользователям стоит подписываться на пуш уведомления

Сначала давайте затронем те преимущества, которые получают пользователи при подписке на push уведомления.

1. Удобство прежде всего

То, что вы должны уяснить как дважды два:

Люди покупают на тех сайтах, которые предлагают лучший сервис. Это же касается лояльности читателей.

Но как быстро и просто сделать сайт удобным для посетителей?

С помощью пуш уведомлений.

Представим, я подписался на обычные обновления вашего сайта.

Мне придется частенько открывать свой почтовый ящик в ожидании email письма от вас.

В случае с push уведомлениями все намного проще.

Как не крути, юзабилити сайта влияет на ваш доход.

2. Экономия времени

Из всего вышесказанного мы получаем неплохую экономию времени.

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

Если бы они использовали пуш уведомления — я был бы на седьмом небе от счастья:

Если сесть и посчитать, я мог бы сэкономить кучу времени.

3. Работа в фоновом режиме

Последний в очереди, но не менее важный плюс:

Получение пуш уведомлений происходит в фоновом режиме.

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

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

Только представьте, вы можете сделать сегментацию пользователей. Разве не круто?

Да и не забывайте про мобильных пользователей. Для них все вышеперечисленные плюсы можно умножать на два.

В чем интерес владельцев сайтов?

Ну что ж. Пришло время поговорить о себе любимых :=)

1. Больше возможностей

На многих сайтах процент подписок на push`ы выше чем на email рассылку.

Причины могут быть следующие:

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

Пуш уведомления — пока что самый простой и безболезненный способ заполучить пользователя.

2. Новая плоскость в общении с пользователями

Push уведомления — это альтернатива email рассылке и RSS каналам.

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

В отличии от той же email рассылки, которая предполагает хоть минимальное, но все же общение с читателями, работа с push уведомлениями не отнимает много времени. Клик-клик, и готово!

А теперь, о гибкости данной технологии:

  • Интернет-магазины могут использовать пуш уведомления для показа статуса заказанного клиентом товара. Или сообщать о поступлении интересного для пользователя продукта.
  • Блоги могут уведомлять о выходе новых статей.
  • Онлайн-сервисы могут информировать о своих новых функциях, разработках.

В общем, вы ограничены лишь своей фантазией.

Если у вас все ещё есть сомнения по поводу пуш уведомлений, читайте следующий пункт.

3. Удобство установки

Есть много сервисов, предоставляющих услуги пуш уведомлений. Все они довольно просты в использовании.

Для установки уведомлений на сайт обычно уходит не более 20 минут.

Да и управлять сообщениями довольно просто.

Если вдруг по какой-то причине вам не понравится работа с push уведомлениями, вы ничего не теряете. Куда вы только не тратите эти 20 минут?

Какой сервис выбрать?

Вариантов как обычно много. Различия в основном в ценах и предлагаемых опциях.

Читать еще:  Одноклассники гu вход

Для простоты я сделал небольшой анализ и выбрал для вас два сервиса:

  • OneSignal — полностью бесплатный и мощный сервис
  • Pushcrew — невероятно прост в установке и использовании

Для меня было важно найти сервис, поддерживающий WordPress push уведомления.

Во главу угла я ставил следующие параметры:

  • Функциональность
  • Удобство в работе
  • Интуитивно понятный интерфейс
  • Бесплатность

Признаюсь честно, поиски длились достаточно долго. Пришлось перерыть массу информации.

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

Но как говорится: ‘Ищущий да обрящет’.

Полный список альтернативных сервисов я указал в конце статьи.

OneSignal

OneSignal — отличный сервис push уведомлений для сайта. Его я установил и протестировал на своем блоге.

Уведомления поддерживаются в 3 браузерах (Safari, Chrome, Firefox) и в мобильной версии Google Chrome.

После перехода на сайт советую сразу же создать в нем аккаунт. Для этого нужно нажать на кнопку Sign Up Free:

Процесс регистрации не отличается от любых других сервисов. Надеюсь разберетесь.

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

Вот как происходит настройка приложения на Вордпресс сайтах:

Устанавливая push уведомления для wordpress сайта нужно активировать плагин OneSignal.

После этого в левой колонке вашей админ зоны появится раздел OneSignal Push.

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

Перед вами откроется окно, в котором нужно перейти в раздел Configuration:

Далее, в подразделе Google Keys показывается процесс создания Google проекта.

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

Введите номер проекта в поле Google Project Number в разделе Configuration. API ключ вам нужно сохранить (еще понадобится).

Дальше переходите в подраздел Chrome&Firefox Push и в соответствии со скриншотами создайте проект на сайте OneSignal.
Эксклюзивный бонусный материал: [popup_trigger > Нажмите здесь [/popup_trigger]чтобы скачать пошаговую PDF инструкцию по настройке OneSignal ([popup_trigger >нажмите чтобы скачать [/popup_trigger]).

Если ваш сайт находится по адресу http, вы ничего не меняете. Если же https, то ставьте галочку в соответствующем чекбоксе.

Далее, выберите для себя субдомен.

Зачем это нужно?

Дело в том что push уведомления поддерживаются только на https сайтах. Однако, сервис OneSignal решает проблему тем что создает для вас субдомен у себя.

В качестве субдомена можете использовать адрес вашего сайта. Например, вместо site4business.net — я сделал site4business.onesignal.com

Дальше, в разделе OneSignal Keys скопируйте ID и API приложения. Затем укажите их в настройках плагина, в разделе Configuration.

В подразделе Modify Site рассказывается о видах внедрения пуш уведомлений. В подразделе Safari Push все аналогично предыдущим шагам.

И наконец, расположение кнопки подписки и ее текст вы можете изменить в разделе Configuration.

Имейте ввиду что для http доступна подписка на уведомления только при помощи кнопки. Ее дизайн вы можете свободно изменять.

А всплывающие попап окна доступны только для https сайтов.

PushCrew

Для начала установите плагин PushCrew.

После этого, заведите аккаунт на сайте сервиса.

Дальше скопируйте Account ID в разделе Account Settings и укажите в настройках плагина:

И наконец, в разделе Customize for desktop вы можете настроить внешний вид всплывающих окон.
Эксклюзивный бонусный материал: [popup_trigger > Нажмите здесь [/popup_trigger]чтобы получить видеоурок по настройке PushCrew ([popup_trigger >нажмите чтобы посмотреть [/popup_trigger]).

Итак, теперь вы знаете что такое браузерные web push уведомления и как их подключать на сайт.

Если у вас возникли вопросы по установке или самим уведомлениям, напишите о них в комментариях.

А на этом у меня все. Надеюсь, данная статья была для вас полезной. Если это так: cделайте репост данного материала в социальных сетях, чтобы больше людей получили от нее пользу.

Ссылка на основную публикацию
Adblock
detector
×
×