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.

Integração

Credenciais do Firebase

No Console do Firebase, 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:

Painel de Controle da Pushwoosh

Acesse o Painel de Controle 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).

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:

Google Tag Manager

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

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

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

<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.

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

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.

<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.