Налаштування 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 прив'язується до наявного контакту через подію CustomerData з параметром externalCustomerId. Якщо цю подію не надіслати одразу після підтвердження підписки, токен прив'язується до нового (анонімного) контакту замість наявного. Формат події дивіться у статті Налаштування веб-трекінгу через відправлення подій через виклик функцій esjs.

• Сам скрипт Web Push не приймає externalCustomerId — прив'язати підписку до зовнішнього ідентифікатора безпосередньо на етапі підписки не можна.
• Надіслати Web Push конкретному контакту можна ресурсом Send prepared message за contactId, якщо в контакта є веб-пуш-токен — після підписки contactId доступний у сховищі браузера.
• Не рекомендовано присвоювати externalCustomerId контактам, які мають лише веб-пуш-токен: токен нестабільний, і такий контакт може бути видалений автоматично, що призводить до конфліктів ідентифікаторів. Контакт без медіаканалів видаляється автоматично, а зовнішній ідентифікатор залишається закріпленим за ним — призначити цей самий externalCustomerId іншому контакту вже не вийде.

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

• У деяких випадках статус прив'язки сайту може не відображатися через політику безпеки провайдера сайту. Якщо скрипт встановлено, проігноруйте цей статус.
• Статус Скрипт не встановлено також може бути хибним, якщо скрипт додано через 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, за замовчуванням неактивний — його потрібно активувати вручну.

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