веб пуши что такое
Web Push: рассылки на стероидах
Эффективная коммуникация с клиентом сегодня является одной из приоритетных задач любого бизнеса. Кто не хочет получить удобный, быстрый, да желательно ещё и бесплатный канал? Одним из таких прорывных инструментов последнего времени стали Web Push уведомления. Давайте разберёмся в деталях и преимуществах нового канала коммуникации с посетителями, а после мы расскажем о том, как установить Web Push на ваш сайт.
Осенью 2017 года компания Sendsay подключила сервис Web Push. Казалось бы, не начнет ли он соперничать с традиционными почтовыми рассылками? Наоборот, эти два инструмента довольно разные и благодаря этому скорее не конкурируют, а дополняют друг друга.
Если провести параллель с социальными сетями, то маркетинговое письмо — это привлекательно оформленная запись в Facebook, а Web Push — твит. Причём, пуши просто и быстро оформлять, но также просто и получать. Всё, что от человека требуется, это кликнуть по единственной кнопке, подтверждая согласие на получение уведомлений. Ни тебе заполнения форм, ни переходов по ссылкам в письмах-подтверждениях. И, да, адрес или телефон никому сообщать не потребуется.
Отсюда следует первое достоинство Web Push: человеку легче согласится на уведомления, нежели подпишется на почтовую рассылку.
Для отправки Web Push используется специальный, встроенный в браузеры, лёгкий протокол. Для идентификации пользователя вместо почтового или другого адреса используется специальный уникальный токен, создаваемый браузером подписчика. После этого, браузер будет принимать из сети только те push-уведомления, которые предназначены именно ему.
Правда, легковесность Web Push является и их ахиллесовой пятой: уведомления привязываются к конкретному экземпляру браузера, так что рассыльщик не знает о получателе ничего кроме безликого токена. По сути на push подписывается не человек-пользователь, а конкретный браузер. Смена браузера или его переустановка приведут к тому, что новый браузер «не признает» старых подписок. Более того, два браузера на двух разных компьютерах, даже связанные через общий сетевой аккаунт (например, google или mozilla), не могут принимать общие уведомления: на домашнем и рабочем компьютере придётся подписываться на уведомления независимо. Но тут ничего не поделать: такова плата за удобство коммуникации.
Из особенностей работы пушей следует ещё одно важное их свойство: они не чувствительны к работе всевозможных систем борьбы со спамом и слабо подвержены влиянию блокировщиков рекламы.
К несомненным плюсам электронных писем стоит отнести возможность добавить в них большой объем информации, а html-вёрстка открывает перед дизайнером и маркетологом широчайшие возможности выражения своих мыслей и чувств.
С другой стороны, специфика push-уведомлений состоит в том, что они, подобно твитам, коротки и не отягощены сложным форматированием. А это значит, что подготовленный маркетолог в одиночку, без привлечения программистов, дизайнеров и копирайтеров, сможет генерировать поток «вкусных» уведомлений, которые будут привлекать подписчиков на сайт компании. Опыт работы в Twitter тут будет очень кстати для ёмкого изложения мыслей.
В силу анонимности Web Push не может использоваться для персональной коммуникации: вы легко можете настроить индивидуальные письма с подтверждением заказа или поздравлением с днём рождения, но пуши пока так не могут. С другой стороны, далеко не все события стоят того, чтобы ради них использовать email рассылку.
Максимальная длина push-уведомлений
Одним из важнейших вопросов при составлении уведомлений является проблема допустимой длины. К сожалению, существующий на сегодняшний день стандарт Push API не говорит об этом явно. Так что разработчики браузеров реализуют push исходя из собственных представлений о прекрасном.
На момент написания статьи экспериментальным путём удалось установить следующее (см. стаблицу): наиболее безопасным следует считать вариант уведомления с заголовком длиной 30 символов и телом 130 символов.
1 Chrome 63.0, Windows 10
2 Chrome 64.0, Android 5.1.1. Количество выводимой информации может зависеть, в том числе, от разрешения экран
3 Firefox 58.0.1, Windows 10
4 При использовании уведомления с картинкой, текст не отображается вовсе
5 При использовании уведомления с картинкой
Такое сообщение гарантированно поместится в окошко уведомлений наиболее распространённых браузеров.
Здесь стоит отметить, что невзирая на минимализм Web Push, они демонстрируют высокую конверсию.
Итак, потребность в Web Push не вызывает сомнений. Остаётся разобраться, как же их интегрировать в свой сайт? На самом деле, все просто.
Прежде всего, авторизуемся в личном кабинете платформы Sendsay в предыдущей версии интерфейса. Если вы в новом интерфейсе (слева вверху логотип компании с буквой «бета»), нужно нажать на кнопку с именем вашего аккаунта в правом верхнем углу и выбрать пункт «Предыдущий интерфейс».
Затем выбираем пункт «Система», переходим в «Настройки» и далее в раздел «web push script». В появившемся окне с инструкцией копируем код скрипта и устанавливаем его на тех страницах сайта, с которых необходимо предлагать подписку на push-уведомления. Также, в корень сайта следует добавить скрипт с именем sendsay_push_sw.js и единственной строки importScripts(«https://image.sendsay.ru/js/push/sendsay_sw.js»);
Вот собственно и всё, что требуется для того, чтобы начать собирать подписчиков.
Что такое WEB-PUSH?
Web Push Уведомления – это короткие сообщения, всплывающие на экране мобильного устройства или компьютера.
Пуши можно рассылать в любое время, при этом получателю не обязательно быть в момент отправки онлайн, в определенном приложении или использовать свой гаджет. Уведомление в любом случае будет доставлено.
Если речь идет о мобильных оповещениях, то у каждой мобильной платформы для приема таких уведомлений есть собственные сервисы.
Чтобы получать браузерные сообщения, пользователю достаточно дать согласие на их прием. Запрос на разрешение отправки пушей посетителю сайта может выглядеть так на мобильном устройстве:
И вот так уведомление будет выглядеть на десктопе
Немного истории
Пуш-уведомления – сравнительно новый канал коммуникации. Первый сервис для отправки таких сообщений – Apple Push Notification Service (APNs) – появился в июне 2009.
В следующем году состоялся релиз Google Cloud to Device Messaging.
В упрощенном варианте схема доставки пуш уведомлений выглядит следующим образом:
В дальнейшем функционал этих сервисов расширялся и углублялся. Уже в мае 2013 Google предоставил возможность дополнять сообщения изображениями и CTA кнопками.
В приложении, созданном компанией Apple, интерактивные кнопки появились в сентябре того же года, что позволило отправителям моментально получать отклик.
На сегодняшний день пуши обладают практически таким же функционалом, как и SMS сообщения. Их можно делать наглядными и понятными для получателя с помощью добавления визуального контента и кнопок, планировать рассылку заранее и сегментировать получателей.
Зачем нужны пуш уведомления?
В первую очередь, этот канал коммуникации обладает явными преимуществами для пользователя:
он удобен и полезен для пользователей, поскольку дает возможность всегда быть в курсе обновлений на интересующем их сайте. Например, появления новых публикаций, проведения акций, обновления ассортимента;
информация предоставляется в сжатом виде, так как существует ограничение по количеству символов в пуш-сообщении, поэтому получателю не нужно тратить много времени и усилий, чтобы прочитать его и вникнуть в суть;
к данной информации получатели лояльны, так как они сами дали согласие на ее принятие.
Чем вам полезны web push уведомления как отправителю?
Ответ очевиден. Они не попадают под действие спам фильтров, получатели не оставят их непрочитанными во входящих. Такое положение дел обеспечивает высокий показатель CTR при использовании данного канала.
Пуши хороши для реактивации клиентов, кроме того, с их помощью можно подтолкнуть представителей вашей аудитории к совершению целевых действий.
В частности, этот инструмент эффективен для решения следующих задач:
Cross-sell и Up-sell;
улучшение имиджа компании;
перевод клиентов из одной категории в другую;
моментальная отправка транзакционных уведомлений;
привлечение внимания пользователей к другим каналам коммуникации, например, соцсетям.
Стратегия использования Push-уведомлений
Чтобы пуши хорошо выполняли свою роль эффективного канала коммуникации, они должны быть полезны получателю. Ценность в данном случае означает, что информация в уведомлении должна быть релевантной, актуальной и своевременной. Вот как описывают “правильные” пуш уведомления специалисты компании Google:
Поэтому следует улучшать качество предлагаемого контента. В противном случае, получатели быстро потеряют интерес к таким сообщениям, и будут их просто закрывать, не читая.
Стоит продумать и частоту отправки пушей. Слишком частые рассылки могут раздражать, а если они будут нерегулярными, то подписчики попросту забудут о самом факте подписки на такие уведомления.
Принцип действия
Уведомления запускаются с помощью внешних скриптов, которые срабатывают, даже если веб-страница в данный момент не используется. Потенциальному получателю уведомление придет, как только его мобильное устройство или компьютер подключится к сети.
При подписке на пуши пользователю присваивается token, выступающий идентификатором браузера, в котором посетитель вашего сайта подписался на сообщения. Одному и тому же браузеру на разных сайтах присваиваются разные токены, поэтому база подписчиков уникальна, так что переносу на другой ресурс или передачи третьим лицам она не подлежит, что по сути является еще одним преимуществом данного канала коммуникации.
Пуш уведомления могут состоять из нескольких полей: кнопки, заголовка, изображения, чисел, текста, ссылки и звукового контента. Обязательными являются только заголовок, текст и ссылка, использование дополнительных вариантов позволяет сделать оповещение более выразительным и привлекающим внимание.
С чего начать отправку пуш-уведомлений?
В системе eSputnik Push сообщения постоянно совершенствуются. Преимуществом данного инструмента является простота его использования.
Анатомия пуша
Создать сообщение можно без специальной подготовки. Ниже представлены два варианта создания пуша:
1) Базовое пуш уведомление для всех пользователей
Чтобы сделать самый простой пуш, достаточно придумать заголовок, краткий текст (до 79 символов), загрузить логотип вашей компании или тематическую картинку небольшого размера, а также добавить ссылку, по которой получатели смогут перейти на сайт и ознакомиться с информацией детальнее. В правой части экрана вы увидите варианты отображения сообщения в разных браузерах: Chrome, Firefox и на «яблочных» гаджетах:
Сообщение увидят все, кто дал согласие на получение уведомлений с вашего сайта. Чтобы убедиться, что пуш отображается корректно, протестируйте его перед отправкой. Для этого нажмите кнопку TEST:.
Созданное по такому алгоритму сообщение будет иметь следующий вид:
2) Расширенный, для пользователей Chrome
Примените полученные знания!
Чтобы сделать более эффектный пуш можно добавить большую картинку и кнопку CTA:
Пользователи OS Windows и браузера Chrome получат это сообщение в таком виде:
Кроме показанного выше функционала, Push сообщения на сайте можно использовать:
Как видите, настроить Web PUSH уведомления для отображения в браузере несложно, поэтому не стоит пренебрегать этой новой возможностью коммуникации с вашими подписчиками. Уже сегодня наши клиенты используют отправку транзакционных пуш-уведомлений и более сложные сценарии. Как настроить сценарий с использованием push, описано здесь.
На сегодняшний день эта услуга предоставляется абсолютно бесплатно при заказе email и sms рассылок.
Service Workers. Web Push и где они обитают
Добро пожаловать в школу CODEдейства и волшебства!
На сегодняшнем занятии мы с вами узнаем, как использовать малоизвестный тандем Web Push + Service Workers (SW). Я приоткрою вам завесу: расскажу о способе удерживать аудиторию маглов благодаря технологии Web Push и о том, чем это может быть полезно для редакций сайтов и прочих интернет-сервисов.
Текст продолжает статью о базовом применении SW. Из комментариев и вопросов я понял, что людям интересно направление SW + Web Push. Давайте вместе разберёмся с тем, что это такое, и как использовать эту магическую пару на практике.
Что такое Push Notification?
Вы принимаете оповещения на свою электронную почту: заходите в почтовый клиент и смотрите входящие письма. В данном случае это технология pull, то есть вы заходите на сайт и «тянете» с него данные, когда они вам нужны.
В случае же с push-уведомлениями ресурс проталкивает новые данные вам сам. При этом вы сразу получаете самые свежие данные, ведь в этой технологии нет определённого периода проверки данных, они приходят в режиме онлайн. Использование пушей не ограничивается получением уведомлений. Так, через push-технологию можно синхронизировать данные при обновлении.
Push-уведомления — это небольшие всплывающие окна. Они могут появляться на экране, где есть область оповещений или есть возможность вывода на экран принятых данных. Push-уведомления работают даже тогда, когда пользователь ушёл с сайта. Это означает, что вы можете доставлять сообщения о новых материалах и новых событиях, чтобы привлечь внимание пользователя в ваше приложение.
Не забывайте о поддержке в браузерах. Так в IE, Edge и Safari ваши Push-уведомления работать не будут.
Заготовки для магической связки SW и Web-push
Для написания своего собственного SW для работы с Web-push нам как всегда понадобятся:
В файле server.js я укажу лишь эндпоинт (точка входа в API серверного приложения) для регистрации push-уведомлений.
В статье мы рассмотрим варианты отправки push-уведомлений и способы их применения. Давайте знакомиться с магией вне Хогвартса вместе.
Push Payload
Этот простейшее магическое заклинание показывает, как отправлять и получать строки, но данные могут быть извлечены из push-сообщения в различных форматах: строки, буфер ArrayBuffer, BLOB-объект в JSON.
Если вам просто нужны push-уведомления — этот пример для вас. Сообщение может доставлять не только текст, но и payload — обогащенные данные для приложения. Код ниже демонстрирует, как вы можете доставлять payload для вашего приложения.
Для демонстрации мы используем данные из текстового поля, которые будут отправлены на сервер и затем отображены в виде push-уведомления через SW.
Rich Notifications
Усложним предыдущий вариант и добавим спецэффектов, здесь всё зависит от ваших желаний и фантазии. Нам поможет полное Notification API. API предоставляет интерфейс для использования «живых» push-уведомлений пользователю c указанием локали, шаблоном вибрации, изображения.
Пример схож с тем, что описан выше, но позволяет использовать более расширенное Notification API, чтобы выбирать изображение, выставлять локаль и шаблон уведомления — то есть делать уведомление уникальным.
Push Tag
Следующее заклинание будет демонстрировать аккумулирование и замену предыдущего заклинания более сильным. Используем тег для уведомления, чтобы заменить старые уведомления новыми. Позволяет показывать маглам только актуальную информацию или сворачивать несколько уведомлений в одно.
Вариант подойдёт для тех приложений, где имеются чаты или уведомления о новом контенте (примеры: Tproger и Tinder). Ниже код демонстрирует, как управлять очередью уведомлений, чтобы предыдущие уведомления можно было отбросить или объединить в одно уведомление. Это полезно, чтобы иметь fallback на случай, если мы написали чат, где можно редактировать сообщения. Клиент увидит не тонну уведомлений с исправлениями, а всего лишь одно.
Push Clients
Пришло время для «непростительных заклинаний». Напомню, почему они непростительные:
любое чрезмерное применение этих заклинаний к маглам карается пожизненным заключением в Азкабан. Поэтому главное — не надоедать!
Когда магл нажмет на уведомление, сгенерированное из push-события, оно сфокусирует его на вкладке приложения или даже повторно откроет его, если оно было закрыто.
Ниже код для трёх случаев использования доставки уведомлений в зависимости от состояния приложения.
Он может распознавать, когда вы находитесь на странице или нужно переключиться на открытую вкладку или повторно открыть вкладку.
Способ поможет вам увеличить конверсию приложения, если вы хотите вернуть магла. Только не перегибайте палку, маглам может не понравиться излишнее внимание приложения.
Самые классические примеры использования:
Push Subscription
Пришло время завладеть разумом наших маглов. Маглы называют это «телепатией» или чтением мыслей, но будем делать иначе. Давайте научимся помещать нашу информацию и заставлять привязываться к нашему приложению. Этот пример показывает, как использовать push-уведомления с управлением подпиской, позволяя пользователям подписаться на приложение и поддерживать связь с ним. Стараемся помнить об Азкабане!
После того, как SW зарегистрирован, клиент проверяет, подписан ли он на сервис уведомлений. В зависимости от этого устанавливается текст кнопки.
После успешной подписки (index.js::pushManager.subscribe) клиент отправляет post-запрос на сервер приложений для регистрации подписки.
Сервер периодически отправляет уведомление с помощью библиотеки web-push на все зарегистрированные эндпоинты. Если эндпоинт больше не зарегистрирован (подписка истекла или отменена), текущая подписка удаляется из списка подписок.
После успешной отписки (index.js::pushSubscription.unsubscribe) клиент отправляет post-запрос на сервер приложений, чтобы отменить регистрацию подписки. Сервер больше не отправляет уведомления. SW также следит за событиями pushsubscriptionchange и resubscribes.
Подписка может быть отменена пользователем вне страницы в настройках браузера или UI-уведомлений. В этом случае бекенд перестанет отправлять уведомления, но фронтенд об этом не узнает. Чтобы магия работала, важно периодически проверять, активна ли регистрация в службе уведомлений.
Ещё разок о заклинаниях
Выше мы рассмотрели магические способы использования SW и Web Push для приложений.
Данный тандем таит в себе множество интересных применений.
Если вам нужно лишь иногда зазывать магла к себе в приложение или сообщать ему о об исправлениях или изменении статуса его заказа, то используйте Push Payload. Можно добавить немного фантазии и заиспользовать Notification API — тогда цвета и иконка вашего приложения будет видны пользователю в Rich Push.
Если же вы желаете завладеть всем вниманием магла и установить с ним контакт — примеры Push Client и Push Subscription для вас. Главное — помните об Азкабане, иначе вы начнёте терять свою аудиторию.
Жду ваших комментариев и пожеланий на следующую тему. От себя добавлю, что хотелось бы поговорить и обсудить тему работы SW + React/Redux-приложений и способы ускорения. Будет полезно?
Что такое Web-Push-сообщения и как их использовать
Web-push – один из маркетинговых инструментов, которые позволяют удобно, быстро и сравнительно недорого взаимодействовать с аудиторией. При этом доставляемость пушей – 50-90%, и, по нашим данным, они увеличивают средний чек на 16%. Если вы ещё не используете этот канал, наш материал будет для вас актуален: мы рассказываем о преимуществах пушей, каким компаниям он нужен, а также как их правильно использовать.
Что такое Web-Push
Web-push-уведомления – это небольшие сообщения, которые всплы вают на экране компьютера или мобильного устройства. Чтобы отправить веб-пуш, для начала нужно собрать контакты: когда человек подписывается на рассылку, ему присваивается уникальный token. Он идентифицирует браузер, в котором пользователь подписался на уведомления. Один и тот же браузер при подписке на рассылку разных сайтов будет иметь разные токены.
Анатомия push-уведомления
Важно: отображение одного пуша будет разным в зависимости от браузера и операционной системы. Например, в Chrome на Windows web-push будет отображаться со всеми дополнительными элементами.
Преимущества Web-Push
Прежде всего, пуши имеют ряд преимуществ для получателя :
Преимущества web-push для отправителя:
Кому нужны Web-Push
Веб-пуши пригодятся любой компании, а особенно в маркетинговой стратегии следующих сфер:
Стратегия использования push-уведомлений
Чтобы пуши были эффективными, они должны нести релевантную, актуальную и своевременную информацию для получателя. Для этого нужно постоянно улучшать качество контента и проверять срок жизни уведомления перед отправкой. Иначе подписчик быстро потеряет интерес к сообщениям и будет их закрывать, не читая, или совсем отпишется от уведомлений.
Какие бывают типы уведомлений
В пушах можно отправлять разные сообщения, исходя из общей маркетинговой стратегии:
Приветственная рассылка через пуши имеет схожую с емейл статистику – высокий % открытий, а вот конверсию даже выше.
Частота отправки сообщений
Слишком много сообщений будут раздражать даже самого лояльного подписчика. И напротив, редкие, нерегулярные рассылки приводят к тому, что человек забывает о самом факте подписки. К счастью, существуют сервисы автоматизации маркетинга, которые помогают определить лучшую частоту рассылок.
Например, eSputnik позволяет не только настроить уровень беспокойства пользователей (дневной и недельный лимит сообщений), но и определить стратегию частоты рассылок для каждого сегмента аудитории. Например, активным подписчикам – раз в 2 дня (проморассылка, ссылка на статью в блоге), а “спящим” – не больше 1 сообщения в неделю. Если человек находится одновременно в нескольких сегментах, то система выберет отправку в приоритетном. Это позволит грамотно работать с аудиторией и не беспокоить подписчиков слишком часто.
Время отправки пушей
Для брошенных корзин есть универсальное время отправки – через 20 минут после окончания визита пользователя на сайт. А вот для проморассылок и мероприятий нужно подобрать своё лучшее время. Для этого можно протестировать разные подходы: разделить аудиторию на равные группы ➡ запустить рассылку в разное время ➡ проанализировать результаты.
Мы часто проводим онлайн-ивенты и определили лучшее время рассылки пушей – за 5 минут или в момент начала вебинара. Сразу после отправки уведомлений наблюдается самая большая активность посетителей. А если отправить анонс за час, то большинство подписчиков уйдут со страницы и забудут вернуться.