Как настроить push-уведомления на сайте через Trigly

Зачем нужны push-уведомления

Push-уведомления — один из шести каналов коммуникации в Trigly, и у них уникальное преимущество: они достигают клиента даже когда он не на вашем сайте. Уведомление появляется прямо на рабочем столе или экране смартфона — мимо него сложно пройти.

Ключевые преимущества push-канала:

• Бесплатная доставка: в отличие от SMS (2.5 руб.) и WhatsApp (5-8 руб.), push не стоит ни копейки
• Высокий CTR: 4-8% (для сравнения: email 2-4%, SMS 3-5%)
• Мгновенная доставка: уведомление приходит в реальном времени, без задержек
• Нет спам-фильтров: push не может попасть в папку "Спам"
• Работает без контактных данных: не нужен email или телефон — достаточно разрешения браузера

Push отлично работает как часть fallback-цепочки: email → push → Telegram → SMS. Бесплатный канал между email и Telegram повышает охват без дополнительных расходов.

Как работает WebPush технически

Trigly использует стандарт Web Push Protocol с VAPID-аутентификацией (Voluntary Application Server Identification):

1. Сервер Trigly генерирует пару VAPID-ключей (публичный + приватный)
2. JavaScript на вашем сайте регистрирует Service Worker и запрашивает разрешение пользователя
3. Браузер создаёт push-подписку (endpoint + encryption keys) и отправляет в Trigly
4. При отправке push Trigly шифрует payload с помощью ключей подписки и отправляет через push-сервис браузера (FCM для Chrome, Mozilla Push для Firefox)
5. Service Worker принимает push-событие и показывает уведомление

Технология работает во всех современных браузерах: Chrome, Firefox, Edge, Opera, Safari (начиная с macOS Ventura). На iOS поддержка появилась в Safari 16.4+ при добавлении сайта на домашний экран.

Шаг 1: Подключите push-канал

Перейдите в Trigly → Каналы → Push → нажмите "Подключить".

Trigly автоматически генерирует VAPID-ключи. Вам не нужно разбираться в криптографии — всё происходит в один клик. После подключения канал появится в списке с зелёным статусом "Активен".

Что происходит под капотом: Trigly генерирует пару ключей (ECDSA P-256), сохраняет приватный ключ в зашифрованном виде в ChannelConfig, а публичный ключ отдаёт через SDK-эндпоинт.

Проверьте подключение кнопкой "Тест" — Trigly отправит тестовое уведомление, если ваш браузер подписан.

Шаг 2: Установите SDK на сайт

Добавьте JavaScript-сниппет на все страницы сайта, перед закрывающим тегом </body>:

<script src="https://your-trigly.ru/api/v1/sdk/push/sw.js"></script>
<script>
  triglyPush.init({
    orgId: 'YOUR_ORG_ID'
  });
</script>

Что делает этот код:

1. Загружает Service Worker с сервера Trigly
2. Регистрирует Service Worker в браузере пользователя
3. Service Worker обрабатывает два события:
   • push — получение и отображение уведомления
   • notificationclick — обработка клика (переход по URL)
4. Получает публичный VAPID-ключ через /api/v1/sdk/push/vapid-key?org_id=YOUR_ORG_ID

Важно: Service Worker требует HTTPS. На localhost разработка возможна без SSL, но на продакшене HTTPS обязателен.

Установка через npm (для SPA)

Если у вас React, Vue или другой SPA-фреймворк:

// В корневом компоненте
useEffect(() => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        // Запрос разрешения на push
        return registration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: 'VAPID_PUBLIC_KEY'
        });
      })
      .then(subscription => {
        // Отправка подписки в Trigly
        fetch('/api/v1/sdk/push/subscribe?org_id=YOUR_ORG_ID', {
          method: 'POST',
          body: JSON.stringify(subscription),
          headers: { 'Content-Type': 'application/json' }
        });
      });
  }
}, []);

Шаг 3: Настройте виджет подписки

Виджет подписки — всплывающее окно, которое просит пользователя разрешить уведомления. Trigly предлагает три типа виджетов:

Типы виджетов

Тип	Описание	Лучше для
Popup	Всплывающее окно поверх контента	Высокая конверсия, но может раздражать
Inline	Встроенный блок в контент страницы	Ненавязчивый, подходит для блогов
Floating	Плавающая кнопка в углу экрана	Баланс между видимостью и ненавязчивостью

Настройка виджета

Перейдите в Trigly → Каналы → Виджеты → "Создать":

1. Тип: выберите popup, inline или floating
2. Дизайн:
   • Заголовок: "Хотите получать выгодные предложения?" (на русском!)
   • Цвета: фон, текст, кнопка — в стилистике вашего сайта
   • Позиция: top-left, top-right, bottom-left, bottom-right, center
3. Таргетинг (когда показывать):
   • Страницы: все или конкретные URL (например, только блог)
   • Задержка: показать через N секунд после загрузки (рекомендуем 15-30 сек)
   • Процент скролла: показать после прокрутки N% страницы (рекомендуем 50-70%)
4. Каналы: отметьте Push (можно добавить email и Telegram в тот же виджет)

Советы по конверсии виджета

• Не показывайте виджет сразу — дайте посетителю 15-30 секунд на знакомство с контентом
• Объясните ценность — "Узнайте первыми о скидках до 50%" лучше, чем "Подпишитесь на уведомления"
• Не показывайте повторно — после отказа скройте виджет на 30 дней (настраивается в targeting_rules)
• Используйте floating для мобильных — popup на маленьком экране закрывает весь контент

Шаг 4: Запустите первую push-кампанию

Перейдите в Кампании → "Создать" → Канал: Push.

Структура push-уведомления

Поле	Ограничение	Пример
Title	До 50 символов	"Скидка 30% на всё!"
Body	До 100 символов	"Только сегодня. Промокод: PUSH30"
Icon	URL изображения (иконка)	https://site.ru/icon-192.png
URL действия	Куда перейти по клику	https://site.ru/sale

Настройка кампании

1. Заполните title и body — краткость критична, push не место для длинных текстов
2. Укажите URL иконки (рекомендуемый размер: 192x192 px, формат PNG)
3. Укажите URL действия — страница, на которую перейдёт пользователь по клику
4. Выберите сегмент получателей (или все push-подписчики)
5. Установите время отправки — учитывайте quiet hours и часовые пояса
6. Нажмите "Запустить"

Использование шаблонов

Trigly предлагает 15 готовых шаблонов, которые автоматически адаптируются для push-канала через ContentAdapterService:

• HTML-шаблон email → title (первые 50 символов заголовка) + body (первые 100 символов текста) + иконка + URL
• Адаптация происходит автоматически при выборе шаблона в кампании

Шаг 5: Отслеживайте результаты

После отправки кампании отслеживайте метрики:

• Sent: количество отправленных push-уведомлений
• Delivered: доставлено (зависит от онлайн-статуса браузера)
• Clicked: клики по уведомлению (переход по URL)
• CTR: clicked / delivered x 100%

Уведомления, отправленные на устаревшие подписки (пользователь отозвал разрешение или переустановил браузер), возвращают HTTP 410 или 404. Trigly автоматически удаляет такие подписки из базы — ваша статистика всегда актуальна.

Аналитика доступна в разделе Каналы → Аналитика — дашборд, сравнение каналов, воронка доставки, timeline и отчёт по ошибкам.

Push в контексте омниканальности

Push-уведомления максимально эффективны в связке с другими каналами:

В fallback-цепочке

Добавьте push между email и Telegram в Flow Builder:

1. Send Email → Wait 24h → Condition (opened?) →
2. Если НЕТ → Send Push → Wait 6h → Condition (clicked?) →
3. Если НЕТ → Send Telegram → Wait 12h →
4. Если НЕТ → Send SMS

Push между email и Telegram добавляет бесплатный шаг, увеличивая охват на 10-15%.

Smart Send

Шаг "Smart Send" в Flow Builder анализирует 90-дневную историю engagement каждого клиента и может выбрать push как оптимальный канал, если клиент лучше реагирует на push, чем на email или Telegram.

Мультиканальные виджеты

В виджете подписки можно запросить разрешение сразу на несколько каналов: push + email + Telegram. Пользователь заполняет email, нажимает "Разрешить уведомления" и переходит по Telegram deep link — три канала за один клик.

Советы и лучшие практики

1. Краткость — ключ к CTR — push-уведомление видно 5-10 секунд. Title должен мгновенно привлечь внимание, body — дать ценность. "Скидка 50% на кроссовки" лучше "Уважаемый клиент, рады сообщить о специальном предложении".

2. Отправляйте в рабочее время — push в 3 часа ночи разбудит пользователя (если не включён "Не беспокоить"). Используйте quiet hours и timezone delivery.

3. Не частите — 1-2 push в неделю максимум. Больше — пользователь отзовёт разрешение. Настройте frequency capping: 1 push/день, 3 push/неделю.

4. Персонализируйте — используйте данные из CDP для персонализации: "Иван, ваш любимый товар снова в наличии" работает лучше, чем "Товар снова в наличии".

5. Тестируйте разные форматы — используйте A/B тестирование для сравнения разных заголовков и текстов. Даже небольшое улучшение CTR на базе 10K подписчиков = сотни дополнительных переходов.

Распространённые ошибки

• Запрос разрешения сразу при загрузке страницы: посетитель ещё не знает вашего сайта — конечно, он нажмёт "Блокировать". Показывайте виджет после 15-30 секунд на сайте или после прокрутки 50% страницы.
• Слишком длинный текст: если body обрезается — посетитель не поймёт сути. Строго 100 символов для body, 50 для title.
• Отсутствие URL действия: push без ссылки — потерянная конверсия. Пользователь кликнул, но перешёл на главную вместо страницы акции.
• Отправка без сегментации: push "Скидка на детские товары" не нужен клиентам без детей. Используйте сегменты и RFM-анализ для таргетинга.
• Игнорирование HTTPS: Service Worker не работает без SSL-сертификата. Убедитесь, что ваш сайт доступен по HTTPS.

Ожидаемые метрики

Метрика	Среднее значение	Хороший результат
Конверсия виджета (показ → подписка)	3-5%	7-12%
Delivery rate	85-92%	95%+
CTR (клик / доставлено)	4-8%	10-15%
Отписки / месяц	2-5%	< 2%
Стоимость за клик	0 руб.	0 руб.

Для сравнения: CTR email = 2-4%, CTR SMS = 3-5%. Push — один из самых кликабельных каналов при правильном использовании.

Часто задаваемые вопросы

Push работает на мобильных устройствах?

Да, на Android push работает в Chrome, Firefox, Edge через стандартный Service Worker. На iOS push поддерживается в Safari 16.4+ (macOS Ventura, iOS 16.4), но только если сайт добавлен на домашний экран (PWA). Для полноценных мобильных push используйте нативное приложение или Telegram-канал.

Что делать, если подписчик отозвал разрешение?

Trigly автоматически обнаруживает отозванные подписки (HTTP 410/404 при отправке) и удаляет их из базы. Вы можете попробовать вернуть пользователя через другой канал — email или Telegram. Повторный запрос разрешения в браузере невозможен до тех пор, пока пользователь вручную не сбросит настройки сайта.

Можно ли отправлять push с изображениями?

WebPush поддерживает иконку (icon — маленькое изображение рядом с текстом). Полноразмерные изображения (image) поддерживаются в Chrome и Edge, но не во всех браузерах. Рекомендуем использовать иконку 192x192 px в формате PNG для максимальной совместимости.

---

Подключите бесплатный push-канал за 20 минут — перейдите в настройки каналов и активируйте Push. Создайте виджет подписки, установите SDK на сайт и запустите первую push-кампанию. Узнайте, как push работает в связке с другими каналами в руководстве по fallback-цепочкам.