Back-End

26 set, 2017

Notificações push no WordPress com OneSignal

Publicidade

Hoje em dia é muito comum os sites oferecerem canais de notificações push para que o usuário siga engajado e melhore a taxa de retorno.

Para isso existem vários plugins, e hoje vamos falar sobre um deles, o OneSignal. Ele é um serviço gratuito de notificações push que você pode utilizar em diversos tipos de projetos, tanto mobile quanto web. Ele também possui um plugin WordPress que pode notificar seus visitantes a cada artigo novo e enviar notificações push manuais, que inclusive nós utilizamos aqui no site do iMasters.

O OneSignal não possui custo, independente do fluxo do seu site e também é o serviço de push mais disseminado atualmente, sendo utilizado por empresas como a Uber, Adobe, Zynga, entre outras. Assim como tudo que é bom, ele não é exatamente gratuito. Eles vendem dados de notificações push para anunciantes. Provavelmente quantos usuários inscritos você tem, estatísticas de quantas pessoas clicaram em notificações, etc.

Ele também possui SDK’s nativos para as plataformas mobile, e para soluções como Cordova, Xamarin, Unity, etc. Neste artigo, abordaremos somente a configuração em sites WordPress, mas você pode conferir a documentação e todas as plataformas disponíveis clicando aqui.

Iniciando com OneSignal no WordPress

Para instalar o plugin do OneSignal em seu site, você pode acessar a área de plugins do seu site e pesquisar por “OneSignal”, ou então baixar o plugin dele diretamente na página do WordPress.org, clicando aqui e fazendo o upload no FTP do seu site.

Após instalar e ativar o plugin, você deverá criar sua conta no OneSignal. Para isso, acesse o site clicando aqui, e clique em “LOG IN” no canto superior esquerdo, em seguida clique em “Sign up” no canto inferior da modal de login, e então você poderá se cadastrar utilizando sua conta do GitHub, Facebook, Google, ou preencher o formulário de login.

Após criar sua conta, clique em “Add a new app”, dê um nome ao aplicativo – pode ser o nome do seu site, por exemplo – e clique em Create. Depois disso, aparecerá uma tela de seleção da plataforma que você irá utilizar nesse aplicativo. Escolha Website Push e clique em Next.

Na próxima tela, você deverá escolher qual navegador irá receber as notificações. Escolha Google Chrome & Mozilla Firefox e então clique em Next. Na tela seguinte você deverá por o domínio do seu site e escolher uma imagem padrão para aparecer na notificações. O recomendado é utilizar uma imagem 192×192.

Caso o seu site não seja HTTPS, marque a opção “My site is not fully HTTPS”. Aparecerá uma caixa de texto na qual você pode escolher um subdomínio https do OneSignal para o usuário receber suas notificações, pois é um requisito dos navegadores que as notificações push sejam encriptadas. Caso você precise dessa opção, guarde o endereço inserido pois precisará colocar nas opções do plugin no seu site depois.

Após isso, clique em Save e aparecerá outra tela. Nessa, você precisa escolher qual SDK você irá utilizar. Escolha WordPress e aparecerá essa tela com sua Rest API Key e App ID:

Deixe essa guia aberta e volte para o seu site. Na barra lateral terá uma opção “OneSignal Push”, clique nela para ir para as configurações do plugin e então clique na aba Configuration e cole sua Rest API Key e App ID como na imagem a seguir. Note que na imagem acima o Rest API Key é o primeiro dado, porém nas configurações do plugin ele é o segundo:

Caso você tenha marcado a opção “My site is not fully HTTPS” anteriormente, desmarque a opção “My sites uses an HTTPS connection (SSL)”. Feito isso, irá aparecer uma caixa de texto com a legenda “OneSignal Subdomain”. Digite nela o subdomínio que você digitou anteriormente.

Caso você queira que o seu site mostre automaticamente o prompt, perguntando se ele deseja receber notificações do site, dê scroll até a opção “Prompt Settings & Notify Button” e habilite a opção “Automatically prompt new site visitors to subscribe to push notifications”. Acho legal também desativar a opção “Enable the notify button”, caso não queira que o botão vermelho de notificações apareça.

Depois disso é só salvar as configurações e pronto! Seu site já está habilitado para receber notificações push. Você pode visitá-lo e permitir que receba notificações. Isso funciona tanto no Chrome e no Firefox desktop quanto nas versões deles para Android (não funciona no iOS por culpa da Apple).

Para enviar uma notificação de post, basta deixar marcada a opção “Send notification on post publish” ao criar um novo post:

E então o visitante receberá um push como esse, que ao clicar, já leva direto ao link do seu artigo:

Você também pode enviar notificações manualmente no item “New Message” na barra lateral do painel do OneSignal, na qual você também pode customizar o ícone e link da notificação.