# Веб-пуши через Google Tag Manager

Внедрите push-уведомления за четыре шага без программирования!
Pushwoosh WebSDK Lite можно добавить на ваш сайт через Google Tag Manager, что делает процесс интеграции максимально простым.

<Aside type="note">
#### Частичная функциональность

Обратите внимание, что из всех посетителей вашего сайта только те, кто использует Chrome или Firefox, смогут подписываться на push-уведомления и получать их. WebSDK Lite также имеет ограниченный доступ к функциям Pushwoosh, таким как пользовательские теги (Tags), UserID или сообщения, запускаемые по событиям. За подробностями, пожалуйста, обратитесь в нашу [службу поддержки](https://help.pushwoosh.com/hc/en-us/requests/new/)!
</Aside>

## Интеграция

### Учетные данные Firebase

В [консоли Firebase](https://console.firebase.google.com/project/_/settings/cloudmessaging/) выберите ваш проект, чтобы получить **ключ сервера (Server Key)** и **идентификатор отправителя (Sender ID)** Firebase. Для справки см. скриншот ниже:

<img src="/web-push-notifications-web-push-via-google-tag-manager-1.webp" alt=""/>

### Панель управления Pushwoosh

Перейдите в [**панель управления**](https://go.pushwoosh.com/v2/applications) Pushwoosh и добавьте новое приложение. На открывшейся странице настройте платформу Chrome или Firefox, нажав кнопку **Configure** в соответствующей строке. Заполните форму:

*   **Ключ сервера (Server Key)** из консоли Firebase в поле **API key**;
*   **Идентификатор отправителя (Sender ID)** из консоли Firebase в поле **FCM Sender ID**;
*   Точный адрес вашего сайта в поле **Website Name**.

<img src="/web-push-notifications-web-push-via-google-tag-manager-2.webp" alt=""/>

Обязательно скопируйте код приложения (Application Code) только что созданного приложения, он понадобится вам позже. Код приложения выделен ниже:

<img src="/web-push-notifications-web-push-via-google-tag-manager-3.webp" alt=""/>

### Google Tag Manager

**1.** В Google Tag Manager выберите контейнер или создайте новый.

<img src="/web-push-notifications-web-push-via-google-tag-manager-4.webp" alt=""/>

**2.** Создайте новый тег и выберите **Пользовательский HTML (Custom HTML)** в конфигурации тега.

<img src="/web-push-notifications-web-push-via-google-tag-manager-5.webp" alt=""/>

**3.** Скопируйте скрипт ниже и вставьте его в поле HTML;

```txt
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>
```

**4.** Замените знаки решетки `#####-#####` (выделены на картинке ниже) в скрипте на ваш код приложения (Application Code) Pushwoosh, который вы получили на шаге 2.

<img src="/web-push-notifications-web-push-via-google-tag-manager-6.webp" alt=""/>

**5.** Прокрутите вниз до опций триггеров (Triggering) и выберите **Все страницы (All Pages)**.

<img src="/web-push-notifications-web-push-via-google-tag-manager-7.webp" alt=""/>

**6.** Нажмите «Сохранить». Ваш тег готов!

### Кнопка подписки на push-уведомления

Позвольте пользователям подписываться на push-уведомления с помощью кнопки подписки. Чтобы настроить кнопку, просто добавьте следующий скрипт через Google Tag Manager.

```txt
<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.pushwooshLite.instance.showSubscriptionWindow()">Subscribe Now</button>
</div>
```

Все готово! Теперь посетители вашего сайта могут подписываться на push-уведомления и получать их.