Guia rápido de início para push na web

Tudo o que você precisa saber antes de começar a enviar notificações push da web

Notificações push web são mensagens que vêm de um site e são entregues por um navegador após o usuário optar por recebê-las. Eles são uma poderosa ferramenta de engajamento destinada a fornecer informações relevantes e atualizadas aos seus assinantes.

Os visitantes do seu site receberão um aviso perguntando se desejam receber notificações. Apenas páginas web que possuem o SDK Xtremepush presente receberão esse prompt de opt-in.

Se aceitos, notificações push da web serão entregues ao usuário final.

Pré-requisitos: integração do SDK

Notificações push web exigem que você configure sua aplicação web no seu projeto Xtremepush e que complete a integração do Xtremepush SDK no seu site. Veja detalhes sobre como alcançar isso em nosso guia de integração do site.

Certifique-se de que está definindo o ID de usuário
Recomenda-se que, neste momento, você use nosso método SDK para definir IDs de usuário, seguindo nosso guia dedicado para garantir que os dispositivos possam ser associados e direcionados em suas campanhas pelo seu próprio identificador único

Navegadores suportados

Os navegadores atualmente suportados são Chrome desktop e mobile (Android), Opera desktop e mobile baseados em Chromium (Android), Firefox desktop e mobile (Android) e Safari desktop e mobile (iOS).

Suporte a push web no iOS
A partir da versão 16.4, o Apple iOS começa a suportar notificações push da web (apenas Safari). Apenas aplicativos Web Progressivos (PWAs) são suportados. Os requisitos para receber notificações push web do Safari em dispositivos iOS são:
Um gesto do usuário é necessário
Os destinatários devem adicionar o site à tela inicial, o que cria um atalho
A versão mais recente do SDK é necessária. Entre em contato conosco se precisar de ajuda com isso

Chrome, Opera e Firefox

No desktop, as mensagens chegam desde que o usuário tenha pelo menos uma aba do navegador aberta em qualquer site, em segundo plano ou em primeiro plano. Em dispositivos Android, o navegador não precisa estar aberto e as notificações push da web aparecerão como uma notificação push enviada para um aplicativo.

600 — Exemplo de notificação push para Chrome nas versões móvel e desktop.

Safari

No desktop, as notificações do Safari estão sempre ativadas, mesmo quando o próprio Safari está desligado, já que o Safari está integrado ao macOS. Revise os requisitos para notificações push web no Safari mobile.

1440 — Exemplo de notificação push do Safari no desktop.

Testando...
É recomendado realizar testes antes de começar a enviar campanhas de push web para seus clientes. Você encontrará detalhes sobre como fazer o teste abaixo.

Notificações push web de teste

Para testar o web push, primeiro você precisa optar por promover seu site. Veja as instruções detalhadas dos navegadores suportados:

Solução de problemas: Logs de depuração
Os logs de depuração permitem que você revise solicitações feitas do seu site para o projeto Xtremepush e detecte problemas. Veja nosso guia dedicado para instruções sobre como habilitar logs de depuração.

Chrome, Opera e Firefox

Depois disso, você ativar os logs de depuração do Chrome, Opera ou Firefox no seu site e, dependendo de como configurou o prompt , seu site pode mostrar o prompt de permissão do navegador, que pede permissão para mostrar notificações push web quando a página carrega ou não. Você pode acionar manualmente o prompt de permissão de opt-in usando o seguinte método SDK:

xtremepush('push', 'prompt');

Quando isso acontecer, verá isso aparecer no seu navegador. Veja exemplos para Chrome, Opera e Firefox:

1004 — Exemplo do prompt do navegador do Chrome

878 — Exemplo do prompt do navegador do Firefox

Clique em Permitir / Permitir notificações para assinar seu dispositivo nas notificações push. Você estaria pronto para testar o envio de uma campanha de teste para seu dispositivo.

Safari

Desde a versão 12.1 do Safari, o prompt de permissão web push requer um gesto do usuário para ser exibido. Essa é uma restrição rígida do navegador e não pode ser contornada.

Isso significa que você não poderá pedir aos usuários que optem por entrar no carregamento da página (ou usando o método do SDK mostrado anteriormente) e o usuário terá que executar uma ação que pode ser usada para acionar a funcionalidade de prompt do SDK Xtremepush. Implementar uma troca de valor antes de acionar o prompt do navegador vai resolver isso. Veja este guia sobre como implementar uma troca de valor.

492 — Exemplo de troca de valor para Safari.

Clique em Permitir para optar e você estará pronto para enviar uma campanha de teste ao seu dispositivo.

Para mais detalhes sobre como participar do Push, por favor, confira nosso guia de inscrição no canal.

Enviando uma campanha de push web para si mesmo

Depois de configurar seu site, integrar o canal do SDK e ativar as notificações push para Chrome, Opera e Firefox ou/ou Safari, você poderá ver o web push como um canal disponível na página do construtor de campanhas.

Você pode criar uma campanha web push navegando até Campanhas > Criar Campanha > Etapa única > >Criar campanha baseada em tempo > selecionar Web Push na aba Configurar. Revise nossas diretrizes criativas para push web para melhores resultados.

Você pode revisar mais detalhes sobre como configurar uma campanha de push web neste guia.

Navegue até a aba Segmento para especificar os destinatários da campanha (Criar segmento personalizado). Se você integrou mais de um site no seu projeto, pode especificar qual site deseja direcionar, caso contrário a notificação push da web será enviada por todos os seus sites. Além disso, se quiser direcionar seu próprio dispositivo de teste, pode selecionar o identificador > ID do dispositivo igual a condição no Segmentation Engine e inserir o ID do seu dispositivo.

Como obter o ID do seu dispositivo?
Confira nosso guia dedicado para saber como obter o ID do seu dispositivo.

Conte os destinatários antes de iniciar a campanha
Ao lançar uma campanha, é uma boa prática usar o recurso Calcular destinatários para contar os destinatários e garantir que o público-alvo dessa campanha seja o que você espera.

Solução de problemas

Se você ainda não recebeu a notificação push, pode analisar algumas das causas mais comuns. Primeiro, navegue até Campanhas > Campanhas Existentes > e, na campanha correspondente, clique no menu Opções:fa-ellipsis-v: para ver opções adicionais > Registro de Notificações.

Esta página mostrará uma entrada para cada aplicativo web que você tenha direcionado para aquela campanha. Clicando em Opções:fa-ellipsis-v: > Detalhes , é possível aprofundar os detalhes daquela campanha e verificar se há erros.
Revise nossos guias dedicados sobre o registro de notificações e os erros mais comuns mostrados no registro de notificações para saber mais.