# Web push através do Google Tag Manager

Implemente notificações push em quatro passos, sem precisar programar!
O WebSDK Lite da Pushwoosh pode ser adicionado ao seu site através do Google Tag Manager, tornando o processo de integração o mais fácil possível.

<Aside type="note">
#### Funcionalidade Parcial

Observe que, de todos os visitantes do seu site, apenas aqueles que usam Chrome ou Firefox poderão se inscrever e receber notificações push. O WebSDK Lite também tem acesso limitado aos recursos da Pushwoosh, como Tags personalizadas, UserIDs ou mensagens acionadas por eventos. Para mais detalhes, entre em contato com nossa [Equipe de Suporte](https://help.pushwoosh.com/hc/en-us/requests/new/)!
</Aside>

## Integração

### Credenciais do Firebase

No [Console do Firebase](https://console.firebase.google.com/project/_/settings/cloudmessaging/), escolha seu projeto para obter sua **Chave do Servidor** (Server Key) e **ID do Remetente** (Sender ID) do Firebase. Consulte a captura de tela abaixo como referência:

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

### Painel de Controle da Pushwoosh

Acesse o [**Painel de Controle**](https://go.pushwoosh.com/v2/applications) da Pushwoosh e adicione um novo aplicativo. Na página que abrir, configure a plataforma Chrome ou Firefox clicando no botão **Configure** na respectiva linha. Preencha o formulário:

*   A **Chave do Servidor** (Server Key) do Console do Firebase no campo **Chave da API** (API key);
*   O **ID do Remetente** (Sender ID) do Console do Firebase no campo **ID do Remetente do FCM** (FCM Sender ID);
*   O endereço exato do seu site no campo **Nome do Site** (Website Name).

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

Certifique-se de copiar o Código do Aplicativo (Application Code) do aplicativo recém-criado, você precisará dele mais tarde. O código do aplicativo está destacado abaixo:

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

### Google Tag Manager

**1.** No Google Tag Manager, escolha um contêiner ou crie um novo.

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

**2.** Crie uma nova Tag e escolha **HTML Personalizado** (Custom HTML) na Configuração da Tag.

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

**3.** Copie o script abaixo e cole-o no campo HTML;

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

**4.** Altere os sinais de número `#####-#####` (destacados na imagem abaixo) no script para o seu Código de Aplicativo da Pushwoosh, que você obteve no Passo 2.

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

**5.** Role para baixo até as opções de Acionamento e escolha **Todas as Páginas** (All Pages).

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

**6.** Clique em "Salvar". Sua Tag está pronta!

### Botão de inscrição para push

Permita que os usuários se inscrevam para receber notificações push com um botão de inscrição. Para configurar o botão, basta adicionar o seguinte script através do 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()">Inscreva-se Agora</button>
</div>
```

Tudo pronto! Os visitantes do seu site agora podem se inscrever e receber mensagens push.