Notificações Push Web Explicadas com Exemplos Reais e Casos de Uso

A notificação push web é uma ferramenta poderosa para guiar os usuários ao longo de sua jornada em seu site e/ou aplicativo e mantê-los engajados, fornecendo recursos complementares no momento certo. Este blog explora o que são as notificações push web, seus benefícios, principais componentes, casos de uso da indústria e muito mais.

O Que São Notificações Push Web?

Notificações push web, ou notificações push do navegador, são mensagens que um site ou aplicativo web envia aos navegadores de seus usuários, mesmo quando eles não estão ativos na plataforma. Lançadas pela primeira vez pelo Chrome em 2015, essas notificações push aparecem como pequenas mensagens pop-up na tela do desktop ou dispositivo móvel, geralmente contendo:

• Título, que resume a notificação.
• Mensagem, que descreve a notificação em detalhes.
• Imagem ou ícone, que ajuda os usuários a identificar a origem, como o site ou a marca, da notificação.
• Botão ou link de Chamada para Ação (CTA), que orienta o usuário a realizar uma ação específica.
• URL da Landing Page, que direciona o usuário para a landing page dedicada.

O push web é uma forma eficaz de os sites se engajarem com seu público, fornecerem atualizações oportunas e incentivarem a interação do usuário. É especialmente útil para fornecer conteúdo sensível ao tempo, informações relevantes, dicas de interface do usuário, atualizações de comunicação e muito mais.

Dependendo do estado do dispositivo no momento do envio, as notificações podem aparecer temporariamente e desaparecer automaticamente ou exigir uma ação do usuário para fechá-las. As notificações push web e mobile podem ser usadas de forma independente ou combinadas em vários dispositivos.

Benefícios das Notificações Push Web

Aqui estão alguns dos benefícios das notificações push web:

1. Entrega em tempo real

O push web é um canal de comunicação poderoso, direto e rápido, que entrega mensagens aos usuários instantaneamente, permitindo garantir o momento ideal para os seus esforços de divulgação.

2. Não requer instalação de aplicativo ou atividade do usuário

As notificações push do navegador são entregues aos usuários independentemente de estarem ativos na plataforma ou terem instalado o aplicativo, permitindo que as marcas alcancem seu público com facilidade.

3. Opt-in fácil

Ao solicitar explicitamente o consentimento dos usuários, o push web ajuda a garantir que suas mensagens sejam entregues a um público genuinamente interessado em suas ofertas. Ao mesmo tempo, ajuda a garantir a conformidade com as regulamentações de privacidade de dados.

4. Engajamento aprimorado

A entrega em tempo real das notificações push ajuda a melhorar significativamente as taxas de engajamento. Notificações oportunas sobre descontos, promoções ou outras informações podem ajudar as marcas a aumentar o número de usuários que retornam aos seus sites.

5. Melhores taxas de conversão

Segmentar efetivamente o público-alvo e personalizar as mensagens pode ajudar a melhorar as taxas de conversão, garantindo que a notificação certa seja entregue ao público certo, no momento certo.

Como Funcionam as Notificações Push Web e Como Implementá-las?

Aqui estão as etapas de como as notificações são entregues aos usuários:

Etapa 1: O usuário faz o “opt-in” para permitir notificações push

Etapa 2: O certificado de assinatura é armazenado no servidor web para identificar e confirmar que o dispositivo de um usuário pode aceitar as notificações.

Etapa 3: Quando pronta para ser enviada, a solicitação de notificação é enviada por meio do protocolo web push.

Etapa 4: Uma vez enviada, um serviço de push manterá a mensagem no servidor até que o usuário fique online e a notificação seja entregue, ou até que a mensagem expire. Se a mensagem tiver uma data de expiração, é possível especificar por quanto tempo ela deve permanecer na fila antes de ser removida ou considerada não entregue.

A capacidade de armazenar temporariamente as notificações push para que sejam enviadas somente se o usuário estiver disponível dentro de um determinado período é essencial para evitar que mensagens sensíveis ao tempo sejam entregues com atraso.

Etapa 5: A mensagem chega ao dispositivo do usuário.

Etapa 6: O navegador aciona o service worker, um script que permite o envio de mensagens offline e pode até ser executado quando o navegador está totalmente fechado. Por fim, a notificação push é despachada e entregue.

Aqui estão as medidas para implementar as notificações push web de forma eficaz:

• Obtenha a certificação Transport Layer Security (TLS) ou, anteriormente, Secure Sockets Layer (SSL) para garantir conexões seguras (HTTPS).
• Adicione o arquivo de service worker para lidar com suas notificações. (A CleverTap fornece o arquivo de service worker, que deve ser hospedado na raiz do seu documento.)
• Peça permissão aos usuários para enviar notificações.
• Desenvolva uma estratégia para engajar os usuários com conteúdo relevante e oportuno.

Componentes de uma Notificação Push Web

A aparência das notificações varia dependendo do navegador e do sistema operacional. Por exemplo, a aparência de uma notificação no Windows difere da aparência no Mac, mesmo usando o mesmo navegador Chrome. Aqui estão alguns exemplos que demonstram como o push web aparece em diferentes navegadores e sistemas operacionais.

1. Chrome

a. No Windows

As notificações entregues via Chrome no Windows têm os seguintes elementos:

• Imagem de banner de 360×180 ou proporção 2:1. Os formatos suportados incluem JPG, PNG e GIF (não animado).
• Navegador e ícone do navegador.
• O logotipo ou ícone do site que envia a notificação (192×192 ou maior). Os formatos suportados incluem JPG, PNG e GIF (não animado).
• A URL do site que envia a notificação.
• Até 2 botões de ação.
• Configurações de notificação e assistente de foco.
• Título com limite de 60 caracteres.
• Conteúdo com limite de 120 caracteres.

b. No Mac

As notificações entregues via Chrome no Mac têm os seguintes atributos:

• Ícone do navegador.
• Título com limite de 60 a 80 caracteres.
• A URL do site que envia a notificação.
• Conteúdo com limite de 120 a 150 caracteres.
• Ícone de banner de 192×192 ou maior, que se expande quando aberto. Os formatos suportados incluem JPG, PNG e GIF (não animado).
• Até 2 botões de ação.

2. Firefox

a. No Windows

O Firefox ainda não suporta funcionalidade de imagem de banner ou caixa de ação. Aqui estão os principais elementos das notificações quando entregues via Firefox no Windows:

• Navegador e ícone do navegador.
• Ícone de 192×192 ou maior. Os formatos suportados incluem JPG, PNG e GIF (não animado).
• A URL do site que envia a notificação.
• Configurações de notificação e assistente de foco.
• Título com limite de 60 caracteres.
• Conteúdo com limite de 120 caracteres.

b. No Mac

As notificações entregues via Firefox no Mac têm os seguintes atributos:

• Ícone do navegador.
• Título com limite de 60 a 80 caracteres.
• A URL do site que envia a notificação.
• Conteúdo com limite de 120 a 150 caracteres.
• Ícone de banner de 192×192 ou maior, que se expande quando aberto. Os formatos suportados incluem JPG, PNG e GIF (não animado).
• Até 2 botões de ação.

3. Safari

Notificações push web no iOS

A Apple anunciou o suporte a notificações push web no iOS durante a WWDC 2022. As notificações push do navegador para o Safari agora são compatíveis com iPhones e iPads, ajudando as marcas a manter seus usuários iOS engajados. A notificação push web no iOS tem os seguintes atributos:

• Logotipo ou ícone do navegador.
• Título com limite de 30 caracteres.
• Mensagem com limite de 120 a 150 caracteres.
• Nome do site que envia a notificação.
• Horário, mostrando há quanto tempo a notificação foi entregue ao dispositivo.

Exemplos e Casos de Uso de Notificações Push Web em Diversos Setores

As notificações push do navegador têm múltiplos casos de uso em diferentes setores. Dependendo do setor em que você atua, é possível utilizá-las para fornecer conteúdo extremamente sensível ao tempo, como atualizações de trânsito, cobertura jornalística, movimentações do mercado de ações, entre outros.

Vamos analisar alguns dos exemplos e casos de uso mais comuns de notificações push web nos setores de e-commerce, notícias e mídia, e serviços de streaming e OTT:

E-commerce

As empresas de e-commerce podem usar as notificações push do navegador para diversos casos de uso, incluindo o envio de uma mensagem de boas-vindas a novos usuários, trazendo-os de volta aos carrinhos de compra abandonados, agradecendo-os por seus pedidos, notificando-os sobre envios e entregas, e reengajando-os com ofertas relevantes, entre outros.

Notícias e Mídia

Veículos de notícias e mídia usam o push mobile e web para fornecer informações como notícias de última hora, atualizações que exigem atenção e outras informações relevantes.

Serviços de OTT e Streaming

Os serviços de OTT e streaming usam o push web para informar o status de uma ação do usuário, seja um erro ocorrido ou a ação desejada concluída com sucesso. Essas notificações podem ser usadas em combinação com microinterações para manter os usuários informados enquanto suas ações estão sendo processadas e quando uma resposta é obtida.

Melhores Práticas para Implementar Notificações Push Web

Aqui estão algumas das melhores práticas de notificações push web mais utilizadas:

1. Opt-In Fácil: Garanta que o prompt de opt-in para solicitar o consentimento do usuário para as notificações seja claro e conciso.
2. Segmentação de Público: Segmente seu público com base em atributos demográficos, geográficos, comportamentais e psicográficos para enviar notificações personalizadas nos momentos ideais.
3. Personalização e Relevância: Crie mensagens atraentes, relevantes e que ressoem com o público-alvo. Evite enviar notificações genéricas, pois elas podem resultar em desengajamento.
4. Não Redundância: Garanta que as notificações push web não sejam enviadas a usuários que já habilitaram as notificações push do aplicativo. Receber notificações duplicadas no aplicativo e no navegador pode incomodar o usuário e fazer com que ele bloqueie as notificações ou desinstale o aplicativo.
5. Compatível com Dispositivos Móveis: Garanta que as notificações sejam renderizadas corretamente em dispositivos móveis.
6. Limite de Caracteres: Esteja atento aos limites de caracteres das notificações push, pois esses limites podem levar a mensagens truncadas e oportunidades perdidas de se conectar com os usuários.
7. Horários de Envio: Envie as notificações nos momentos ideais, quando a probabilidade de interação do usuário for maior. Isso, é claro, requer dados geográficos dos usuários para entender seu fuso horário.
8. Mídia Rica: Incorpore notificações push rich media para torná-las visualmente atraentes, o que pode ajudar a impulsionar um melhor engajamento.
9. Testes A/B: Realize testes A/B com variações de conteúdo, horários de envio e CTAs para identificar as notificações mais eficazes.
10. Monitoramento de Desempenho: Monitore e revise regularmente o desempenho de suas notificações usando métricas-chave, como taxas de cliques, taxas de conversão e taxas de cancelamento de inscrição, para fazer os ajustes necessários.

O Processo de Opt-In do Push Web Explicado

Um pré-requisito para o push web é que os usuários façam o opt-in para receber as notificações. Quando um usuário clica em “Permitir” para fornecer o consentimento, as informações de assinatura desse dispositivo são obtidas pelo site. Isso, porém, significa que, se o usuário trocar de dispositivo, precisará conceder acesso novamente.

Depois que o usuário fizer o opt-in para receber as notificações, ele continuará recebendo mensagens até fazer o opt-out ou bloquear a entrega das notificações.

Uma estratégia para manter os usuários engajados com as notificações push é fornecer a eles um painel útil para gerenciar suas preferências. O Slack, por exemplo, oferece uma central útil para gerenciar notificações push, tanto na web quanto no mobile. As preferências incluem os tipos de mensagens sobre as quais ser notificado, sons, se há uma prévia da mensagem, entre outros.

Suporte de Navegadores para Notificações Push Web

A CleverTap oferece suporte a push web para Chrome versão 50 para desktops e Android, Firefox e Safari (OS X v10.9 e posterior). É importante observar que as notificações do Chrome funcionam apenas em sites HTTPS.

Para aprender como configurar um canal de push web usando a CleverTap, leia nossa documentação sobre Web Push.

Notificações Push Web vs. Outros Canais de Comunicação

Notificações Push Web vs. Notificações Push de Aplicativos Mobile

É importante entender a distinção entre aplicativos web e mobile, pois isso pode representar oportunidades para sua estratégia de push.

As notificações push web são úteis para alcançar usuários que estão atualmente ativos no dispositivo, mas que podem não estar usando ativamente seu site ou aplicativo web. As notificações push mobile, por outro lado, são especialmente úteis para engajar usuários mesmo quando eles não estão usando ativamente o dispositivo, já que são entregues diretamente na tela de bloqueio do smartphone.

Embora o push web possa ser apresentado quando o usuário reengaja com o dispositivo, nesse momento os dados já podem estar desatualizados ou imprecisos.

Notificações Push Web vs. E-mails

Quando comparado com e-mails, o push web apresenta uma série de vantagens, incluindo uma taxa de entrega de 100%, ausência de filtro de spam e um processo de opt-in simples. Além disso, como o push web geralmente exibe tanto o título quanto a mensagem diretamente ao destinatário, a probabilidade de engajamento do usuário é maior.

Aprimore a Experiência do Usuário com Notificações Push Web

Seja qual for o tipo de negócio da sua empresa — aplicativo web, aplicativo mobile, progressive web app ou site padrão —, as notificações push web podem ser usadas para aprimorar a experiência do usuário.

A Plataforma de Notificações Push da CleverTap permite enviar notificações personalizadas e ricas em mídia para aprimorar seus esforços de engajamento e divulgação com os clientes. Sua tecnologia proprietária, RenderMax, ajuda a amplificar suas notificações push para dispositivos Android de difícil alcance e melhorar o ROI das campanhas.