Como adicionar notificações (Push notification) em seu site

Como adicionar notificações (Push notification) em seu site

6 de fevereiro de 2017 1 Por Ramos de Souza Janones
Como vender Software - Seja desktop, web ou MobilePowered by Rock Convert
Powered by Rock Convert

Que tal colocar um serviço de notificações (Push Notification) em seus sites e totalmente de graça? Com o One Signal você pode.

O que é Push Notification?

Push notification é uma tecnologia que tem origem nos aplicativos mobile. Se você tem um smartphone, com certeza já foi impactado por algum push antes.

Quando você está no seu smartphone e recebe um aviso de um novo email na sua inbox, ou quando um amigo seu comenta em uma foto sua no Facebook, você está sendo impactado pelo push notification daquele aplicativo.

Quando surgiu na web: O Chrome habilitou essa tecnologia em março do ano passado. Portanto, é um canal ainda muito novo, mas já consagrado no mobile. O Firefox foi outro grande navegador que habilitou essa funcionalidade ainda no começo de 2016.




As possibilidades de uso para web são várias – e tudo vai depender do contexto do seu negócio. Ao longo do post, vamos dar algumas dicas de uso para você que está interessado em implementar o push notification em seu site.

blank

Push vs email: o push notification tem um objetivo diferente do email, e o uso de um não substitui o do outro.

Não há muito segredo: com o push você envia notificações e avisos curtos para seus inscritos, enquanto que no email você pode realizar uma comunicação mais extensa e completa.

As notificações possuem uma grande restrição: suas mensagens devem conter no máximo 100 caracteres, o que faz com que elas precisem ser sempre objetivas e sucintas.

Frontend Do Zero Ao Profissional

Possibilidades de uso

As possibilidades de uso são várias, tudo depende da sua criatividade. Considerando que você já tenha um conhecimento básico sobre seu público-alvo, comece definindo um objetivo para você. O uso será para gerar mais conversão, tráfego ou awareness?

Aqui vai algumas dicas de como você pode usar o push o seu site:

  • Updates/novidades: você pode usar o push como um canal extra para distribuição dos conteúdos ricos produzidos por você. Avise os visitantes do seu site e redirecione eles para uma landing page;
  • Ecommerce: se você tem um ecommerce, crie uma segmentação que notifica os leads que abandonaram o carrinho antes da compra;
  • Novos produtos/promoções.
  • Atualizações em geral: aplicativos web também podem usar a tecnologia do push para notificar os usuários sobre alguma atualização ou oferta específica. 

Antes de continuar, assine as notificações de nosso site, clicando no site que aparece flutuando do lado esquerdo, como mostra a imagem a seguir:




Criando um Push Notification para seu site

  1. Acesse o site da One Signal e faça seu cadastro. Não há segredo.
  2. A primeira tela é de configuração de seu serviço:

Há diversas opções para os mais variados tipos de aplicativos. Como o objetivo deste artigo é para websites, vamos focar no tema. Selecione a opção Website Push e clique em Next.

VEJA TAMBÉM: Curso WordPress do Zero ao Profissional.

Na próxima tema você pode configurar para os principais navegadores do mercado. Neste tutorial vou fazer só no Chrome e Firefox, mas o Safari é igual. Clique em Next.

Em:

Site URL – Você vai inserir a RLD de seu site ou Blog. 

Default Notification Icon URL – Você pode personalizar o ícone de notificação. É opcional. Deixe padrão. Vamos todos seguir o padrão.

My site is not fully HTTPS – Caso seu site não tenha certificado (geralmente e-commerce que possui) ative esta opção. Se tiver o certificado desative. 

Powered by Rock Convert

Choose Subdomain – É o sub-dominio que será criado para administração e envio de suas web notifications. 

Salve este sub-dominio e clique em Save.

Aqui podemos escolher qual SDK queremos utilizar. Vamos focar no Website Push, WordPress e Server API ficam para novos artigos. Mas se utiliza do WordPress, instale o plugin OneSignal, é bem intuitivo sua instalação e configuração. Clique em Next.

Por fim será apresentada o ID de sua aplicação, o Your App ID (apaguei porque vou realmente utilizar no site)

Agora o código HTML. Se você estrutura bem o seu site, o faz em “blocos” e há o Header padrão para todas as página. Se não tem esta prática, é melhor começar a utilizar. 

O código é o seguinte:

<head>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "YOUR_APP_ID",
autoRegister: false, /* Set to true to automatically prompt visitors /
subdomainName: 'SUBDOMAIN_NAME_SEE_STEP_1.4',
/
subdomainName: Use the value you entered in step 1.4: https://imgur.com/a/f6hqN
/
httpPermissionRequest: {
enable: true
},
notifyButton: {
enable: true / Set to false to hide */
}
}]);
</script>
</head>




Observe que é um script em Javascript fácil de entender, comentei ele, e há a documentação, em inglês: https://documentation.onesignal.com/docs/web-push-sdk-setup-http  

Em meu site ficou assim:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "AQUI MEU CÓDIGO API, QUE POR SEGURANÇA NÃO COMPARTILHO",
autoRegister: false,
/* Set to true to automatically prompt visitors */
subdomainName: 'sucessocomsoftware-com.onesignal.com',
/*
subdomainName: Use the value you entered in step 1.4: https://imgur.com/a/f6hqN
*/
httpPermissionRequest: {
enable: true
},
notifyButton: {
enable: true /* Set to false to hide */
}
}]);

</script>

Traduzindo para o Português

Vou deixar para próximo artigo, mas que tal dar uma explorada antes? Acesse a documentação:

Dúvidas, escreva a baixo nos comentários! 😉

» Destaques em Tecnologia e Programação

 

 

Quer receber conteúdos sobre Startups e Marketing Digital?

* Campos requeridos




Powered by Rock Convert
Powered by Rock Convert
Siga os bons!
Últimos posts por Ramos de Souza Janones (exibir todos)
0 0 vote
Article Rating
Sumário
Como adicionar notificações (Push notification) em seu site
Nome do artigo
Como adicionar notificações (Push notification) em seu site
Descrição
Que tal colocar um serviço de notificações Web para Desktop em seu site, e totalmente de graça? Com o One Signal você pode.
Autor
Nome
Ramos da Informática
Logo