Utilizar Notificações Push no WordPress é uma forma impressionante de manter seus visitantes atualizados com seus posts e novidades. Enviando mensagens diretamente do seu site WordPress para os desktops e smartphones das pessoas você pode ter certeza que sua audiência está ciente que você tem algo novo para compartilhar.

Você já percebeu as notificações usadas em sites populares como Youtube e Facebook para exibir informações importantes? Quando você lê “Notificações Push” você deve se lembrar das notificações que você recebe todos os dias no seu celular dos aplicativos como Whatsapp, Facebook, Twitter e até mesmo quando recebe um e-mail.

Quando você passa horas (ou até dias) escrevendo um novo post você quer MUITO que a sua audiência leia e devore ele no momento que você pressionar o botão de publicar. No entanto, nem sempre acontece dessa forma. Com milhares de sites lá fora competindo pelo mesmo público, pode ser difícil ter certeza que o seu conteúdo vai estar na frente da sua audiência e na mente das pessoas.

Enquanto a maioria de nós estamos familiarizados com as notificações devido a utilização em aplicativos móveis, você pode não ter percebido que elas fizeram o pulo de smartphones para os browsers e agora podem ser entregues por qualquer site. Esses pequenos lembretes podem ajudar drasticamente a aumentar o seu trafego e melhorar as conversões dos seus objetivos (capturar e-mails, aumentar vendas, adquirir cadastros, etc).

Quando as notificações push são usadas com o browser, elas são chamadas de Web Push Notifications e eu tenho certeza que você já encontrou várias delas. Quando você visita um site que envia essas notificações, o seu browser vai exibir uma mensagem para permitir as notificações.

Notificacoes Push WordPress - Mensagem

Se você permiti-las, você será notificado todas as vezes que esse website disparar uma notificação.

Você provavelmente já usa as redes sociais e talvez até envie regularmente email em forma de newsletter. Será que você realmente precisa de Notificações Push? Bem, isso depende.

Seu site pública posts e informações com uma base regular? Você quer que seus visitantes retornem ao seu site numa base diária ou programada? Se é isso que você quer, sim, você realmente precisa de notificações push.

Notificações Push são usadas para encorajar visitas a retornarem regularmente. Elas são uma maneira particularmente efetiva de manter seus usuários atualizados com o seu conteúdo e receber informações que são sensitivas ao tempo na frente dos usuários o mais rápido possível.

Vamos ser mais práticos. Aqui estão três diferentes tipos de sites que podem se beneficiar por utilizar as notificações push:

  1. Blogs que publicam conteúdo útil ou com uma base de publicações regular podem usar notificações push para alcançar sua audiencia no momento em que é publicado.
  2. Sites que regularmente publicam informações que são sensitivas ao tempo, como informações de vendas com descontos, pode alcançar seus clientes de forma programática, estratégica e rápida, na frente dos seus clientes em tempo real.
  3. Sites de notícias ou jornais que precisam manter seus leitores atualizados com notícias importantes.

O que as notificações push não podem fazer é substituir completamente um sistema de marketing como campanhas de email ou um funil de vendas. Você pode usá-las em favor de um sistema de marketing, mas não substitui-lo.

Em adição, você deve ser extremamente cauteloso para não abusar das notificações push pois são muitofáceis de enviar e alcançam todo o seu público no clicar de um botão.

Com grandes poderes vêm grandes responsabilidades (Stan Lee)

Como resultado, é recomendável que as notificações push não sejam usadas para anúncios, exibir ofertas de afiliados ou utilizar como spam. (se o seu público está a procura de cupons e descontos, essa é uma situação diferente)

Configurando Notificações Push no WordPress

Existem vários plugins e serviços que oferecem Notificações Push para WordPress, mas nós queremos aquele que tem o melhor custo x benefício. Felizmente, nesse caso, nós vamos utilizar o melhor serviço para notificações push da web, OneSignal. Além de ter o melhor serviço sem interrupções e oferecer envios de notificações e cadastro de usuários ILIMITADOS, OneSignal também tem o melhor plano, gratuito.

Instalação do Plugin OneSignal

Para instalar o plugin OneSignal, vá em Plugins > Adicionar Novo. Na barra de pesquisa digite “OneSignal” (sem aspas), então instale e ative o plugin.

Notificacoes Push WordPress - Instalar OneSignal Plugin WordPress

Também pode baixar o plugin no github:

Baixar | Hospedagem

Crie sua Conta OneSignal

Para utilizarmos o plugin em nossa instalação WordPress vamos precisar criar uma conta no site da OneSignal:

OneSignal | Hospedagem

Role até o final da página e clique no botão que diz “SIGN UP FREE“:

Notificacoes Push WordPress - Registrando Conta OneSignal

Preencha o formulário com suas informações ou utilize um dos botões sociais para se registrar facilmente:

Notificacoes Push WordPress - Preenchendo Dados Registro OneSignal

Lembre-se de marcar a caixa onde você concorda com os termos de serviços e política de privacidade. (I agree to OneSignal’s Terms of Service and Privacy Policy)

Depois que você preencher todos os dados, você vai precisar confirmar sua conta clicando no link de confirmação enviado para o seu email:

Notificacoes Push WordPress - Confirmacao de Email

Quando você clicar no link de confirmação em seu email, você será redirecionado para o site da OneSignal com a mensagem que seu email foi confirmado. Agora você só precisa fazer o login com os dados que você registrou no formulário de cadastro.

Quando você acessar pela primeira vez, uma tela de instruções será exibida, nós não vamos precisar dela.

Clique no botão “SKIP” no lado inferior esquerdo ou no “X” no lado superior direito para seguir com o tutorial.

Notificacoes Push WordPress - Pule Instrucao Inical

Configurando OneSignal para WordPress

Agora você já está em seu painel de configurações da OneSignal.

Para começar clique em “Add a new app” no quadrado pontilhado:

Notificacoes Push WordPress - Adicionar Novo App OneSignal

Nome do Aplicativo

Adicione o nome do aplicativo. Normalmente é o nome do seu website ou blog, depois clique em “Create“:

Notificacoes Push WordPress - Nome do Aplicativo OneSignal

Website Push

No popup de configuração de plataformas, selecione Website Push e clique no botão Next:

Notificacoes Push WordPress - Configurar Aplicativo Web Push Onesignal

Google Chrome & Mozilla  Firefox

Para finalizar a seleção da plataforma, selecione Google Chrome & Mozilla Firefox e clique no botão Next:

Notificacoes Push WordPress - Plataforma do Aplicativo

Configurando Plataforma Google Chrome & Mozilla  Firefox

Nós vamos configurar a plataforma de acordo com o tipo de protocolo que você está usando em seu site.

Protocolo é aquele HTTP:// ou HTTPS:// que aparece antes da URL do seu domínio.

Sites com HTTPS (com SSL)

Notificacoes Push WordPress - Configurando Plataforma com HTTPS

  • Em Site URL, Coloque o endereço do seu site com o protocolo HTTPS://www.seudominio.com, como na imagem acima.
  • Em Default Notification Icon URL, adicione um link para a logo do seu site. Ela deve ter 192 x 192 de tamanho ou maior. Utilize uma URL com protocolo seguro (HTTPS) para a imagem da logo.
  • Clique no botão vermelho SAVE.

Sites com HTTP (Sem SSL, ou Sem SSL em todas as páginas)

Notificacoes Push WordPress - Configurando Plataforma com HTTP

  • Em Site URL, Coloque o endereço do seu site com o protocolo HTTP://www.seudominio.com, como na imagem acima.
  • Em Default Notification Icon URL, adicione um link para a logo do seu site. Ela deve ter 192 x 192 de tamanho ou maior. Todas as imagens devem ser servidas utilizando um protocolo seguro (HTTPS). Como seu site não tem HTTPS, você vai precisar utilizar um serviço de imagem que ofereça isso gratuitamente. Nós recomendamos o https://imgsafe.org/. Suba sua imagem, copie o link gerado e cole a URL.
  • Selecione a caixa que diz “My site is not fully HTTPS

Notificacoes Push WordPress - Configurando Plataforma com HTTP - Escolha o Subdominio

  • Escolha o subdomínio em que suas notificações serão enviadas, utilizando o domínio da OneSignal. Normalmente é o nome do seu website.
  • Clique no botão vermelho SAVE.

Configurando SDK Google Chrome & Mozilla Firefox

Agora nós somos levados até essa tela:

Notificacoes Push WordPress - Configurar SDK

Selecione WordPress e clique no botão vermelho NEXT onde vamos obter nossas:

  • Rest API Key
  • App ID

Notificacoes Push WordPress - Instalar SDK OneSignal

Copie a Rest API Key e App ID, deixe o popup do SDK aberto. Abra uma nova aba e vá até o seu painel WordPress e clique em “OneSignal Push“.

Notificacoes Push WordPress - Menu Plugin WordPress OneSignal

Na tab configuration, adicione sua Rest API Key, App ID e Subdomínio (se seu site usa HTTP), role até o final da página e salve as alterações.

Agora visite a página inicial do seu site e inscreva-se em suas notificações através do Sino de Notificação:

Notificacoes Push WordPress - Sino Notificacao

Retorne para o popup do SDK e clique no botão verde/azul claro que diz “Check subscribed Users“.

Notificacoes Push WordPress - Botao Verde

Você deve receber uma mensagem verde se der certo, e vermelha se der errado. Se der errado, tenha certeza de que você se inscreveu em suas notificações e verifique novamente.

Clique em “Done“.

Nota: Eu não consegui uma captura de imagem das mensagens de erro, se você puder me enviar a imagem das duas mensagens para que eu possa implementar neste artigo, eu agradeceria muito. Você pode utilizar o formulário na página de contato para me enviar os links das imagens, utilize o imgur.com para subir as imagens.

Apple Safari

Volte para o seu Painel da OneSignal e clique no Aplicativo que você criou:

Notificacoes Push WordPress - APP Criado

Nós estamos no painel de configuração e definições do seu Aplicativo. Clique em “App Settings“:

Notificacoes Push WordPress -APP Settings

Nas configurações do aplicativo, na tab Platforms em Apple Safari (macOS) clique no botão de configuração:

Notificacoes Push WordPress - Configurando Plataforma Apple Safari3

Configurando Plataforma Apple Safari

Notificacoes Push WordPress - Configurando Plataforma Apple Safari Definicoes

Agora vamos configurar a plataforma em cada uma das opções disponíveis:

  • Site Name – Coloque o nome do seu site, blog ou empresa.
  • Site URL – Coloque o endereço URL do seu site. Inclua o protocolo do seu site, seja ele http:// ou https://.
  • .p21 Certificate – Não marque essa opção, é apenas para desenvolvedores.
  • Notification Icons – Se você selecionar essa opção você vai precisar enviar a sua logo em vários formatos exigidos pelo Safari. Os tamanhos necessários são indicados quando você seleciona a opção. Se você selecionar essa opção e não adicionar a sua logo agora, e você obter qualquer inscrito em suas notificações eles jamais irão ver a sua logo mesmo que você faça o upload delas. Então se marcar essa opção, tenha certeza de preparar todos os tamanhos necessários e adicionar a URL com protocolo HTTPS nos campos indicados.

Após preencher e selecionar os campos corretamente, a configuração da plataforma Apple Safari está pronta e não há necessidade de configurar SDK pois vamos utilizar um certificado compartilhado disponibilizado pela OneSignal.

Agora clique no Botão vermelho “Save“.

Você será levado para a página de configuração do APP novamente. Mas agora nós vamos copiar o Web IDque está disponível para você em Apple Safari (macOS):

Notificacoes Push WordPress - Safari WEB ID2

Agora nós temos:

  • Web ID (Apple Safari)

Volte até o seu painel WordPress e clique no menu OneSignal Push:

Notificacoes Push WordPress - Menu Plugin WordPress OneSignal

Siga com a configuração de acordo com o protocolo do seu site, seja HTTP ou HTTPS. Elas são diferentes!

Tab Configuration | Sites HTTPS

Clique na Tab Configuration e preencha o campo com sua Rest API Key, App ID e Web ID:

Notificacoes Push WordPress - Tab Configuracao

Tab Configuration | Sites HTTP

Clique na Tab Configuration e preencha os campos com sua Rest API Key, App ID, Web ID e Subdomínio da OneSignal:

Notificacoes Push WordPress - Tab Configuracao http

Configurando as Definições de Notificação

Estamos praticamente com tudo pronto para você começar a usar as notificações push em seu site. Mas do que adianta poder mandar as notificações se você ainda não personalizou os detalhes, certo? Se você quer aprender como definir as configurações para deixar tudo ao seu gosto, siga com o tutorial.

Sent Notification Settings

Notificacoes Push WordPress - Configuracao Definicao de Envio

  • Use the post’s featured image.. – Se você quer que a imagem destacada do seu artigo seja usada nas notificações, ative essa opção.
  • Dismiss Notification – Se o usuário não clicar na notificação, você quer que ela desapareça após 20 segundos? Se não ativar essa opção, a notificação vai ser exibida até o usuário fechar ou clicar nela.
  • Notification Title – Você deve usar o nome da sua empresa/site/blog, se desejar pode adicionar uma descrição com um separador. Exemplo: CanalWP – Guias e Tutoriais WordPress. Quando você publicar um post e enviar uma notificação, além do título do post ele exibe esse título que identifica o site que está enviando a notificação para o usuário.
  • Send Notifications Additionally.. – Essa opção permite que você envie notificações para dispositivos móveis com Android e iOS, mas é preciso realizar a configuração dessas plataformas antes de ativar essa opção.

Prompt Settings & Notify Button

Notificacoes Push WordPress - Botao Notificacao

  • Automatically prompt.. – Permite que você exiba a notificação para o visitante no momento que ele visitar seu site.
  • Enable the notify button – Ativa e exibe o botão de notificação no seu site. (esse que você pode ver no lado esquerdo do CanalWP)
  • Show the notify button after.. – Continua exibindo o botão de notificação no seu site para o usuário que está registrado.
  • Show first-time site visitors.. – Exibe uma mensagem para os visitantes que acabaram de se registrar. Para personalizar essa mensagem você precisa ativar a opção Customize the notify bell text. Procure a mensagem que diz “First-time visitor message (on notify button hover)“, cobrimos a tradução dessa parte logo abaixo.
  • Show the OneSignal Logo.. – Exibe a logomarca da OneSignal no botão de notificação do seu site. Cabe a você escolher.
  • Customize notify bell text – Permite personalizar os textos exibidos para o usuário. Por padrão eles estão em inglês, então é bom você fazer a tradução e deixar essa opção ativada. Segue um exemplo para que você entenda o que significa cada parte:

Notificacoes Push WordPress - Texto Botao Notificacao

  • Customize notify bell offset – Permite que você compense o espaço entre o botão de notificação e as bordas do seu site. Aqui no CanalWP nós deixamos o Offset padrão pois gostamos dele. Bottom aumenta o espaço da parte de baixo do botão de notificação com a borda do seu siteLeft aumenta o espaço daparte esquerda do botão de notificação com a borda do seu site. Right aumenta o espaço da parte direita do botão de notificação com a borda do seu site.

Notificacoes Push WordPress - Botao Notificacao Offset

  • Customize notify bell theme colors – Permite modificar as cores do botão de notificação para ficarem igual ao seu site.

Notificacoes Push WordPress - Botao Notificacao Cores

  • Size – Tamanho do botão de notificação que você deseja para o seu site. Pequeno, Médio ou Grande. (small, medium, large)
  • Position – Escolha onde o botão de notificação deve ficar flutuando. Canto inferior direito ou canto inferior esquerdo. (bottom right e bottom left)
  • Theme – Ele vem com dois temas que você pode usar para mudar o design do botão. Vermelho e Branco. (red e white)

Popup Settings (apenas HTTP)

Notificacoes Push WordPress - Configuracao PopUp

Essa seção permite configurar o popup que aparece para o usuário em sites com protocolo HTTP. Para quem tem HTTPS essas configurações não fazem nenhum efeito, pois a OneSignal vai utilizar a notificação nativa do browser, a mesma que exibimos aqui no CanalWP.

  • Show the OneSignal Logo – Exibe a logo da OneSignal no popup. Fica a seu critério.
  • Customize the popup text – Permite editar os textos utilizados no popup.

Notificacoes Push WordPress - Configuracao PopUp Textos2

Welcome Notification Settings

Notificacoes Push WordPress - Configuracao Boas Vindas Notificacao

Se você ativar essa opção ele vai enviar uma notificação de boas vindas para o usuário quando ele se registrar.

  • Title – Título do seu site ou nome da sua empresa
  • Message – Mensagem que você quer enviar para o usuário. Fica abaixo do título, como na imagem.
  • URL – Se o usuário clicar na notificação você quer levar ele para uma página especifica? Se sim, adicione aqui.

Automatic Notification Settings

Notificacoes Push WordPress - Notificacoes Automaticas

  • Se você ativar a 1° opção da imagem acima a caixa de enviar notificações vai estar marcada por padrão. O plugin da OneSignal adiciona uma opção que permite você escolher se quer enviar notificações ao publicar um certo post no editor de posts.
  • Se você ativar a 2° opção ele vai enviar notificações quando você publicar um post utilizando um serviço ou plugin de terceiro.

UTM Tracking Settings

Notificacoes Push WordPress - Rastreamento UTM Google Analytics

Se você deseja rastrear os dados de cada notificação (note que a onesignal disponibiliza isso no painel dela) através do Google Analytics é só adicionar sua URL UTM nessa seção. Se você não sabe como configurar parâmetros UTM pode querer dar uma olhada nesse artigo do Neil Patel sobre como usar Parâmetros UTM do Google Analytics.

Advanced Settings

Notificacoes Push WordPress - Configuracoes Avancadas

As opções avançadas são para usuários que tem necessidades personalizadas e tem conhecimento sobre o assunto. Você não precisa configurar nada aqui.

  • Additional Custom Post Types – Permite que você adicione as notificações para tipos de posts personalizados. Basta adicionar a slug ou slugs separadas por virgulas.
  • Use my own Google Project Number – Se você quer usar seu próprio projeto do Google utilize essa opção.
  • Use my own manifest.json – Se você quer utilizar seu próprio manifesto, insira-o aqui.
  • Use my own SDK.. – Se você quer utilizar seu próprio SDK utilize essa opção.

Enviando as Notificações Push

Edição de Posts

Agora que já temos a plataforma e o plugin configurados, vamos ver como enviar as notificações.

Dentro da edição de posts, acima da seção “Publicar” nós temos uma opção para enviar as notificações quando o post for publicado:

Notificacoes Push WordPress - Opcao de Envio Notificacao

Se você marcar essa caixa e publicar ou agendar o seu post, todos os assinantes receberão a notificação automaticamente.

Mensagens personalizadas

Você também pode mandar mensagens personalizadas para sua audiência sem precisar ter relação com os seus posts.

Para mandar mensagens personalizadas acesse seu Painel OneSignal, selecione o seu Aplicativo e clique em New Message:

Notificacoes Push WordPress - Mensagem Personalizada Nova

Agora é só escrever um título e uma descrição para sua mensagem e definir as configurações da mensagem. Você pode escolher por agendar ou enviar imediatamente, filtrar por segmento e muito mais.

Notificacoes Push WordPress - Edicao de Mensagem

Conclusão

Notificações push são uma ferramenta poderosa que permite alcançar seu público em questão de segundos. Elas podem ajudar seu site a crescer e engajar com sua audiência na hora e no momento certo.

Otimizar a forma como nos comunicamos com nossa audiência com novas tecnologias é algo vital para sites e blogs hoje em dia. Se manter na frente dos seus concorrentes com ferramentas poderosas pode lhe dar uma grande vantagem.

Artigo por Gabriel Galvão do CanalWP.

Deixe um comentário