Налаштування Web Push повідомлень на вашому сайті

Вибір типу підписки

1. В обліковому записі перейдіть на вкладку Налаштування → Web Push.

2. Виберіть тип підписки:

• У два кліки. Підписка з подвійним підтвердженням. Перевага цього типу — можливість налаштувати оформлення вікон підписки та підтвердження. У такому випадку користувач спочатку побачить ваше кастомізоване вікно, а потім — стандартне.
• В один клік. Дозволяє користувачам оформити підписку одним натисканням кнопки, без необхідності проходити додаткове підтвердження.

Браузер Google Chrome може блокувати нав'язливі вікна підписки, щоб уникнути потенційних обмежень оберіть підписку у два кліки.

Тип підписки можна змінити будь-коли — наявні токени підписників при цьому зберігаються, повторно збирати базу не потрібно.

Зовнішній вигляд вікна підписки (тексти, кольори, розміщення) також можна змінювати в будь-який момент: перевстановлювати скрипт і файл Service Worker для цього не потрібно.

Частота показу нативного запиту (Single Opt-in) залежить від браузера та від частки користувачів, які закривають його на вашому сайті. Після відмови запит може перестати з'являтися взагалі — браузер переводить сайт у режим тихих сповіщень, і далі дозвіл вмикається лише вручну в налаштуваннях браузера. Вікно Double Opt-in — це ваше власне вікно, тож ці обмеження браузера на нього не поширюються.

Якщо в акаунті є налаштовані підписки, натисніть кнопку + Прив'язати сайт, а потім виберіть тип підписки.

Використовуєте плагін для Shopify, WooCommerce або OpenCart?

Технічна частина налаштування Web Push (скрипт, Service Worker, реєстрація домену) виконується плагіном автоматично.

Перейдіть одразу до активації скрипта та пропустіть розділи ручного встановлення скриптів.

→ Shopify | → WooCommerce | → OpenCart

Прив'язка нового сайту

1. Після вибору типу підписки заповніть обов'язкові поля Посилання на сайт та Назва сайту.

Поле Назва сайту можна використовувати для створення умовних груп, а також для пошуку та фільтрації контактів у списку.

Рекомендуємо задавати оригінальні назви для кожного сайту або сторінки збору підписок — це допоможе розділяти підписників різних версій сторінок, навіть якщо вони мають спільний домен.

Наприклад:

• sitename.com/ua — My store UA (українська версія сайту)
• sitename.com/en — My store EN (англійська версія сайту)

Налаштування Service Worker

Service Worker — це скрипт, який працює у фоновому режимі на вашому пристрої, навіть коли ви не використовуєте веб-сторінку або застосунок.

Налаштування Service Worker містить три поля (заповнюються автоматично):

• Шлях до файлу — шлях директорії на сайті, куди повинен бути завантажений файл скрипту.

• Назва файлу — ім'я файлу, який містить код (буде згенерований на кроці Інтеграція Web Push).

• Область дії — область, в межах якої Service Worker може взаємодіяти з контентом сайту. Вона визначає, на яких сторінках або в яких директоріях сайту цей Service Worker буде активним.

• Якщо ви використовуєте web push service worker разом із PWA (Progressive Web App) service worker, рознесіть області дії скриптів, щоб між ними не виникало конфліктів. Зазвичай PWA service worker розміщують у кореневій директорії сайту, а web push service worker — у будь-якій іншій.

• Область дії web push service worker не обмежується лише тими сторінками, на яких активний скрипт і працює на всіх сторінках вашого сайту, навіть якщо ці сторінки не підпадають під визначену область.

• Браузер зберігає дозвіл на сповіщення для всього домену, а не для шляху. Тому мовні версії в межах одного домену — /uk/, /en/ — мають спільну підписку: щойно відвідувач дозволив сповіщення на одній із них, на інших запит більше не з'являється. В акаунті для одного домену можна створити кілька веб-пуш застосунків, але дозвіл браузера все одно діє на весь домен.

Якщо необхідно розмістити файл в іншій директорії сайту, змініть шлях до файлу Service Worker.

Сертифікати Web Push

Якщо у вас вже є база підписників, введіть відкритий та закритий ключі у відповідні поля. Для отримання нових сертифікатів, залиште поля порожніми — ключі будуть автоматично згенеровані разом зі скриптом для вашого сайту.

Підтримка старих браузерів Safari

Для налаштувань Web Push підписки на Safari нижче 16 версії, перейдіть за посиланням.

Інтеграція Web Push

Складається з таких кроків:

• Генерація та інтеграція скрипту
• Перевірка статусу прив'язки

Розглянемо ці кроки докладніше.

Генерація та інтеграція скрипту

Натисніть Згенерувати скрипт та виконайте такі кроки:

1. Завантажте інсталяційний файл Service Worker нижче та скопіюйте його в каталог /push/esputnik/ на вашому сайті або у той каталог, що вказаний у полі Шлях до файлу у налаштуваннях Service Worker.
2. Скопіюйте згенерований код і вставте його в розділ <head> HTML-сторінок сайту.
3. Створіть файл маніфесту, розмістіть його на сайті та підключіть на HTML-сторінках, щоб забезпечити надсилання повідомлень на пристрої iOS/iPadOS.

Токен у згенерованому скрипті обмежений подіями — доступу до даних контактів він не дає, тому тримати скрипт у коді сайту безпечно.

Перевірка статусу прив'язки

Після завантаження інсталяційного файлу та додавання коду на ваш сайт натисніть кнопку Перевірити статус прив'язки.

Перевірити статус можна також прямо зі списку сайтів на сторінці Налаштування для Web Push, не відкриваючи Інтеграцію Web Push: натисніть іконку оновлення поруч зі статусом сайту.

У налаштуваннях має відобразитись статус Сайт підключений — під час перевірки зі списку сайтів він з'являється як сповіщення під сайтом. З цього моменту почнуть збиратися токени.

Нова підписка на web push прив'язується до наявного контакту через подію CustomerData з параметром externalCustomerId. Подія прив'язує токен лише до контакту, який уже є в системі з цим externalCustomerId: якщо контакт існував до підписки, надішліть подію одразу після її підтвердження, а якщо контакт створюється пізніше — після його створення. Доки подію не надіслано, токен лишається на окремому анонімному контакті. Подію має надсилати JavaScript на сайті, у тому самому браузері, де оформлено підписку: скрипт зіставляє токен із контактом за даними, доступними в браузері. Якщо сайт надсилає CustomerData зі свого сервера, скрипт цих даних не бачить, і токен лишається на окремому контакті. Формат події дивіться у статті Налаштування веб-трекінгу через відправлення подій через виклик функцій esjs.

• Сам скрипт Web Push не приймає externalCustomerId — прив'язати підписку до зовнішнього ідентифікатора безпосередньо на етапі підписки не можна.
• Надіслати Web Push конкретному контакту можна ресурсом Send prepared message за contactId, якщо в контакта є веб-пуш-токен — після підписки contactId доступний у сховищі браузера.
• Передавання каналу webpush у запиті Add/update contacts більше не оновлює токен — сервіс перестав це підтримувати, і web push-токен ставить лише скрипт на сайті.
• Якщо подію CustomerData не надіслано і контакти лише з токеном уже накопичилися окремо від контактів з email, вони об'єднуються, коли підписник переходить за посиланням із вашого листа: скрипт зіставляє contactId з UTM-мітки посилання з підпискою у сховищі браузера. Докладніше — Ідентифікація контактів.
• Не рекомендовано присвоювати externalCustomerId контактам, які мають лише веб-пуш-токен: токен нестабільний, і такий контакт може бути видалений автоматично, що призводить до конфліктів ідентифікаторів. Контакт без медіаканалів видаляється автоматично, а зовнішній ідентифікатор залишається закріпленим за ним — призначити цей самий externalCustomerId іншому контакту вже не можна.

Якщо ви побачите Скрипт не встановлено — перевірте внесені налаштування.

• У деяких випадках статус прив'язки сайту може не відображатися через політику безпеки провайдера сайту. Якщо скрипт встановлено, проігноруйте цей статус.
• Сайт перевіряється під час прив'язки та щоразу, коли ви перевіряєте статус вручну, автоматичних повторних перевірок немає. Якщо захист сайту (наприклад, Cloudflare) блокує цю перевірку, додайте до білого списку наші IP-адреси 18.193.171.62, 3.66.101.249 і 52.16.166.210 — запис потрібен тільки на час перевірки.
• Статус Скрипт не встановлено також може бути хибним, якщо скрипт додано через Google Tag Manager: підписка при цьому може працювати коректно.
• Орієнтуйтеся на фактичні ознаки роботи: скрипт завантажується (це видно на вкладці Network), Service Worker зареєстровано, браузер показує запит дозволу, підписка проходить успішно, а база підписників зростає. Шукати конфлікт із sw.js чи Service Worker від PWA або помилки на вкладках Console і Network варто лише тоді, коли функціональність справді не працює.

Підтримка Web Push на iOS/iPadOS у PWA

Щоб увімкнути підтримку Web Push повідомлень на пристроях iOS/iPadOS у PWA (прогресивних вебзастосунках), переконайтеся, що:

• файл маніфесту розміщений на сайті та доступний браузеру;
• маніфест підключений на HTML-сторінках сайту в розділі <head>, наприклад: <link rel="manifest" href="/manifest.json">;
• у маніфесті вказано "display": "standalone" або "display": "fullscreen". Якщо display не вказано, браузер використовує значення browser за замовчуванням, і Web Push на iOS/iPadOS може не працювати;
• якщо застосунок має відкриватися з головної сторінки сайту, вкажіть у маніфесті "start_url": "/".

Розміщення маніфесту в кореневому каталозі не є обов'язковим.

Якщо Web Push на iOS/iPadOS у PWA не потрібні, статус Маніфест не знайдено можна проігнорувати. Після додавання маніфесту перевірте статус повторно іконкою оновлення в списку сайтів.

Відписатися від web push у PWA користувач може через налаштування сповіщень браузера/пристрою або безпосередньо з отриманого push-повідомлення — окремого пункту відписки всередині самого PWA-застосунку для цього не потрібно.

Для переходу до налаштувань зовнішнього вигляду вікна підписки, натисніть Налаштувати підписку або Назад, щоб повернутись на загальну вкладку налаштувань.

Детальніше про налаштування зовнішнього вигляду вікна підписки читайте в окремій статті.

Видалення токенів

Увімкніть опцію автоматичного видалення неактивних токенів через 30, 60 або 90 днів, щоб залишалися тільки ті користувачі, які взаємодіють із розсилкою.

Web push токен прив'язаний до конкретного браузера (через його Service Worker), а не до пристрою в цілому. Тому той самий користувач може мати кілька токенів на одному пристрої, якщо підписався з різних браузерів.

Два браузери на одному пристрої створюють дві окремі підписки, і push може надійти в обидва.

Щоб повідомлення було доставлено, браузер не обов'язково має бути відкритим: Service Worker працює у фоновому режимі там, де це підтримують операційна система та браузер.

Редагування інтеграції Web Push

Щоб повернутись до налаштувань інтеграції, наприклад — змінити назву сайту, повторно завантажити інсталяційний файл або скопіювати згенерований код, натисніть посилання на сайт або іконку три крапки та виберіть Інтеграція Web Push.

В цьому ж меню можна видалити або тимчасово деактивувати/активувати прив'язаний сайт.

Якщо сайт деактивовано, збір підписників для нього призупиняється, відправка повідомлень неможлива.

Після активації вся функціональність знов стане доступною, всі контакти залишаться підписаними і з активними токенами.

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

• Для прив'язки сайту можна використовувати API ресурс Add web push domain.
• Цей ресурс також використовується в інтеграції за допомогою плагінів, таких як WooCommerce та Shopify.
• Сайт, прив'язаний через API, за замовчуванням неактивний — його потрібно активувати вручну.

Токен, який використовує скрипт на вашому сайті, обмежений за доступом: ним можна лише генерувати події. Доступу до контактів він не дає, тож тримати його в коді сторінки безпечно.