Веб-пуши через Google Tag Manager
Внедрите push-уведомления за четыре шага без написания кода! Wavesend WebSDK Lite можно добавить на ваш сайт через Google Tag Manager, что делает процесс интеграции максимально простым.
Интеграция
Section titled “Интеграция”Учетные данные Firebase
Section titled “Учетные данные Firebase”В консоли Firebase выберите ваш проект, чтобы получить Server Key и Sender ID из Firebase. Для справки см. скриншот ниже:
Control Panel Wavesend
Section titled “Control Panel Wavesend”Перейдите в Control Panel Wavesend и добавьте новое приложение. На открывшейся странице настройте платформу Chrome или Firefox, нажав кнопку Configure в соответствующей строке. Заполните форму:
- Server Key из консоли Firebase в поле API key;
- Sender ID из консоли Firebase в поле FCM Sender ID;
- Точный адрес вашего сайта в поле Website Name.
Обязательно скопируйте Application Code созданного приложения, он понадобится вам позже. Код приложения выделен ниже:
Google Tag Manager
Section titled “Google Tag Manager”1. В Google Tag Manager выберите контейнер или создайте новый.
2. Создайте новый Tag и выберите Custom HTML в конфигурации тега.
3. Скопируйте приведенный ниже скрипт и вставьте его в поле HTML;
<script type="text/javascript" src="/docs//cdn.wavesend.ru/webpush-lite/v1/wavesend-web-notifications-lite.js?pw_application_code=#####-#####" async></script>4. Замените знаки решетки #####-##### (выделены на рисунке ниже) в скрипте на ваш Application Code Wavesend, который вы получили на шаге 2.
5. Прокрутите вниз до опций Triggering (Условия активации) и выберите All Pages.
6. Нажмите “Сохранить”. Ваш Tag готов!
Кнопка подписки на push-уведомления
Section titled “Кнопка подписки на push-уведомления”Позвольте пользователям подписываться на push-уведомления с помощью кнопки подписки. Чтобы настроить кнопку, просто добавьте следующий скрипт через Google Tag Manager.
<div style="text-align:center;margin:90px 0;"> <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.wavesendLite.instance.showSubscriptionWindow()">Subscribe Now</button></div>Все готово! Теперь посетители вашего сайта могут подписываться на push-уведомления и получать их.