Sendsay
65
Блоги

Web Push: рассылки на стероидах

Поделиться

В избранное

В избранном

Эффективная коммуникация с клиентом сегодня является одной из приоритетных задач любого бизнеса. Кто не хочет получить удобный, быстрый, да желательно ещё и бесплатный канал? Одним из таких прорывных инструментов последнего времени стали Web Push уведомления. Давайте разберёмся в деталях и преимуществах нового канала коммуникации с посетителями, а после мы расскажем о том, как установить Web Push на ваш сайт.

Запрос согласия на получение уведомлений

Достоинства новой технологии

Осенью 2017 года компания Sendsay подключила сервис Web Push. Казалось бы, не начнет ли он соперничать с традиционными почтовыми рассылками? Наоборот, эти два инструмента довольно разные и благодаря этому скорее не конкурируют, а дополняют друг друга.

Если провести параллель с социальными сетями, то маркетинговое письмо — это привлекательно оформленная запись в Facebook, а Web Push — твит. Причём, пуши просто и быстро оформлять, но также просто и получать. Всё, что от человека требуется, это кликнуть по единственной кнопке, подтверждая согласие на получение уведомлений. Ни тебе заполнения форм, ни переходов по ссылкам в письмах-подтверждениях. И, да, адрес или телефон никому сообщать не потребуется.

Отсюда следует первое достоинство 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 не вызывает сомнений. Остаётся разобраться, как же их интегрировать в свой сайт? На самом деле, все просто.

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

Управление рассылками в личном кабинете Sendsay

Затем выбираем пункт «Система», переходим в «Настройки» и далее в раздел «web push script». В появившемся окне с инструкцией копируем код скрипта и устанавливаем его на тех страницах сайта, с которых необходимо предлагать подписку на push-уведомления. Также, в корень сайта следует добавить скрипт с именем sendsay_push_sw.js и единственной строки importScripts("https://image.sendsay.ru/js/push/sendsay_sw.js");

Вот собственно и всё, что требуется для того, чтобы начать собирать подписчиков.

О форматах скриптов Web Push

Методика, используемая Sendsay, может показаться несколько громоздкой: зачем так сложно? Ведь некоторые из конкурирующих платформ предлагают просто вставить одну строчку кода для подгрузки скрипта с сервера и всех делов!

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

Онлайновый скрипт Sendsay грузится вместе со страницей и не подпадает под действие блокировщиков.

Отправка Web Push от Sendsay

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

Для этого нужно перейти в раздел «Рассылки» > «web push-рассылки», нажать кнопку «Создать выпуск» и можно начинать творить.

Создание push-сообщения в интерфейсе Sendsay

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

Собственно, это всё. web push-уведомление готово, остаётся его только отправить.

Подключение пушей с помощью GTM

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

Отличным выходом из подобной ситуации может стать такой удобный инструмент как Google Tag Manager (GTM). Работает он предельно просто: на страницах сайта размещается код GTM, а все остальные скрипты вроде Web Push, Google Analytics, Яндекс.Метрики и прочих маркетинговых инструментов подключаются уже через него (в терминах сервиса подключаемые скрипты называются тегами).

При этом для внесения изменений в теги уже не требуется программист, всё может выполнить подготовленный маркетолог. Самое приятное, что какой-то высоченной квалификации при работе с GTM не требуется: всё просто и предельно понятно.

В частности, подключение web push-уведомлений осуществляется в несколько простых шагов:

  • Добавляем новый тег.
  • Присваиваем ему осмысленное название, чтобы потом не путаться.
  • Жмем по полю «Конфигурация тега» и выбираем тип тега «Пользовательский HTML».
  • В открывшемся окне вставляем код скрипта, полученный из личного кабинета sendsay.ru.
  • В расширенных настройках нужно задать ограничения активации кода (проще говоря, нужно сказать, на каких страницах вашего сайта будет выскакивать предложение подписаться на пуши). В простейшем случае говорим «без ограничений», так что скрип web push будет активироваться на всех страницах.
  • Profit.

Итог

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

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

Это касается таких вопросов как:

  • стимулирование продаж с помощью тематических рассылок;
  • привлечение трафика на целевые страницы сайта;
  • поддержание внимания аудитории к продукции компании и её бренда.

Поскольку Web Push связан не с человеком, а с браузером, этот канал коммуникации оказывается весьма хрупким: связь с аудиторией устанавливается легко и быстро, но так же легко может и прерваться, в том числе и по техническим причинам. В этом смысле традиционный подход почтовых рассылок оказывается более надёжным и обстоятельным: люди не так часто меняют e-mail, кроме того, информацию о подписчике можно и обогатить с помощью опросов и пр.

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

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

SENDSAY

Платформа для мультиканального маркетинга

{ "author_name": "Sendsay ", "author_type": "self", "tags": [], "comments": 0, "likes": -3, "favorites": 1, "is_advertisement": false, "section_name": "blog", "id": "34895", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } } ]