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

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

6 de fevereiro de 2017 0 Por Ramos de Souza Janones

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.

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.

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

Leia também: 7 E-Books Indispensáveis sobre Marketing Digital

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.

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.

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. 

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)

Leia também: 7 E-Books Indispensáveis sobre Marketing Digital

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: https://documentation.onesignal.com/docs/customize-permission-messages

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

Os cursos online de programação e tecnologia mais recomendados para 2019

Quer receber conteúdos sobre Startups e Marketing Digital?

* Campos requeridos




Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.
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