Capitulo 1: Passo a passo para configuração de Push (para lojas “totalmente” em HTTPS)

Esse é o Capítulo 1 do Guia: Como disparar notificações Push em seu E-commerce

Nota: Siga os passos abaixo caso o seu site seja executado totalmente em HTTP’s.
Se o seu site executar parte em HTTPS (exemplo: Carrinho de compras) e parte em HTTP (demais páginas do site), siga os passos descritos na página: Capitulo 1: Passo a passo para configuração de Push (para sites em HTTP)

A instalação do Push é bastante simples, envolve os passos abaixo:

  1. Criar uma chave de API no Google Console
  2. Criar uma conta no OneSignal (ferramenta que usaremos para o envio de Push)
  3. Enviar alguns arquivos para FTP
  4. Enviar uma notificação de teste pelo OneSignal, clicar nela para validar, e pronto.

 

1º Passo: Crie uma chave de API no Google Console https://console.developers.google.com/project

É necessário ter uma conta do Google para tal

1º Acesse https://console.developers.google.com/project

2º Clique em “Criar Projeto”

Clique em Criar Projeto

 

3º Informe o “Nome do projeto” e clique no botão “Criar

3º Informe o “Nome do projeto” e clique no botão “Criar”

 

4º Clique no ícone de “…” (canto superior direito), e depois em “Informações sobre o projeto

4º Clique no ícone de "..." (canto superior direito), e depois em "Informações sobre o projeto"

5º Localize o campo “Número do projeto” e anote-o em algum lugar.

Anote-o em algum lugar, pois precisaremos dele mais a frente.

 

5º Localize o campo “Número do projeto” e anote-o em algum lugar.

6º Localize a área “APIs para dispositivos móveis”, e clique no item “Google Cloud Messaging

7º Localize a área “APIs para dispositivos móveis”, e clique no item “Google Cloud Messaging”

7º Clique em “Ativar

8º Clique em “Ativar”

8º Na coluna esquerda, clique em “Credenciais

9º Na coluna esquerda, clique em “Credenciais”

9º Clique no botão azul “Criar credenciais

10º Clique no botão azul “Criar credenciais”

10º Selecione a opção “Chave de API

11º Selecione a opção “Chave de API”

11º Clique no botão “Chave de Servidor

12º Clique no botão “Chave de Servidor”

12º Clique no botão azul “Criar

Não precisa preencher nada, apenas clique em “Criar”

13º Clique no botão azul “Criar”

13º Será exibida a “Chave de API”, anote-a em algum lugar.

Anote-a em algum lugar, pois precisaremos dela mais a frente.

14º Será exibida a “Chave de API”, anote-a em algum lugar.

2º Passo: Crie uma conta no site https://onesignal.com

O OneSignal é uma ferramenta gratuita para envio de Push. Existem muitas outras no mercado, como: PushCrew GoRoost, Pushbullet. TargetGenius, Aimtell, e as nacionais SocialMiner e Jeenga, porém, nenhuma delas é totalmente gratuita como a OneSignal.

1º Acesse https://onesignal.com

2º Clique no botão vermelho “SIGN UP FREE”

2º Clique no botão vermelho “SIGN UP FREE”

3º Informe um e-mail e senha, e clique em “Create Account”

3º Informe um e-mail e senha, e clique em “Create Account”

4º Clique no botão verde “Add a new app”

4º Clique no botão verde “Add a new app”

 

5º Informe o nome do site e clique em “Create”

5º Informe o nome do site e clique em “Create”

 

6º Selecione a opção “Website Push” e clique em “Next”

O OneSignal permite também envia notificações para App’s Android, iOS, Windows Phone e Amazon Fire, porém, nosso objetivo agora é enviar notificações via site para o Chrome e Firefox.

6º Selecione a opção “Website Push” e clique em “Next”

7º Selecione a opção “Google Chrome & Mozilla Firefox” e clique em “Next”

Iremos habilitar o Push apenas para o Google Chrome e Firefox. É possível habilitar também para o Safari, porém, a documentação do OneSignal informa que atualmente o iOS não suporta Push Web, desse modo, deixaremos o Safari de fora;

OneSignal Safari Support

7º Selecione a opção “Google Chrome & Mozilla Firefox” e clique em “Next”

8º Preencha os campos e clique em “Save”

  • No campo “Site URL” insira a URL do seu site, incluindo o protocolo http: (exemplo: https://www.lojaexemplo.com.br)
  • No campo “Google Server API Key” insira a chave de API do Google Cloud Messaging, que cadastramos no Google Console (você anotou em algum lugar, lembra?)
  • No campo “Default Notification Icon URL” insira a URL do ícone de notificação. Você deve criar uma imagem e 80 pixels de largura por 80 pixels de altura.
  • Deixe desmarcado o campo “My site is not fully HTTPS

8º Preencha os campos e clique em “Save”

9º Selecione a opção “Website Push” e clique em “Next”

9º Selecione a opção “Website Push” e clique em “Next”

10º Será exibido o “Your App ID”, anote-o em algum lugar

Anote-o em algum lugar, pois precisaremos dele no próximo passo

10º Será exibido o “Your App ID”, anote-o em algum lugar

11º Faça o download dos arquivos do OneSignal

Link: https://github.com/OneSignal/OneSignal-Website-SDK/releases/download/https-integration-files/OneSignal-Web-SDK-HTTPS-Integration-Files.zip

12º Abra o arquivo “manifest.json” e altere os campos “name” e “short_name” para o nome da sua loja, e o campo “gcm_sender_id” para o ID do projeto no Google Console ( que você anotou anteriormente):

13º Salve, e envie os  3 arquivos  para o FTP da sua loja, na pasta principal

Caso não tenha acesso ao FTP, solicite ao suporte da sua loja que coloque os arquivos lá

Deverão ficar nesses locais:

  • https://lojaexemplo.com/manifest.json
  • https://lojaexemplo.com/OneSignalSDKWorker.js
  • https://lojaexemplo.com/OneSignalSDKUpdaterWorker.js

14º Inclua o código abaixo no cabeçalho do HTML da página principal da sua loja (na seção <head>)

A maioria das plataformas e-commerce permite que você inclua tags no cabeçalho <head> da loja.  Caso não consiga adicionar, solicite ao suporte que inclua para você.

No campo abaixo em vermelho, você deverá informar o código que pegou no 10º passo, campo “Your App ID” (Ex: 7bacf3c4-bc80-4f79-9aa2-dbadba07bcb0).

 

15º Acesse sua loja virtual usando o Google Chrome ou Firefox: www.lojaexemplo.com.br, o navegador irá perguntar se você deseja permitir notificações Push, clique em “Permitir”

16º O navegador irá perguntar se você deseja permitir notificações Push, clique em "Permitir"

16º Volte no OneSignal e clique no botão verde “Check Subscribed Users”

Clique em Check Subscribed Users

17º Se tudo estiver ok até aqui, será exibido um box verde, informando que um usuário (você) se inscreveu para receber as notificações. Clique no botão vermelho “next”

Será exibido um box verde, informando que um usuário (você) se inscreveu para receber as notificações

18º Clique no botão verde “Send Test Notification”

21º Clique no botão verde "Send Test Notification"

19º Será disparada uma notificação Push para você. Clique nela ao receber

19º Será disparada uma notificação Push para você. Clique nela ao receber

 

20º Ao clicar, você será direcionado para uma página informando que o Push foi configurado com sucesso 🙂

23º Ao clicar, você será direcionado para uma página informando que o Push foi configurado com sucesso :)

21º Retorne ao OneSignal e clique no botão verde “Check Notification Status”

24º Retorne ao OneSignal e clique no botão verde "Check Notification Status"

22º Será exibido um box verde, informando que o Push foi configurado corretamente. Clique no botão vermelho “Done”

25º Será exibido um box verde, informando que o Push foi configurado corretamente. Clique no botão vermelho "Done"

Agora está tudo pronto para o disparo!

Vamos direto para o Capítulo 2: Enviar mensagens para todos os inscritos


Conteúdo do Guia: Como disparar notificações Push em seu E-commerce


Você conhece alguém que adoraria receber essas dicas?

Então faça um favor para ela (e para mim) e compartilhe este guia.

Você pode compartilhá-lo no Facebook, Twitter, ou até mesmo copiar a URL desse artigo e enviar para quem precisa dele.

E, para finalizar, eu adoraria saber a sua opinião sobre o guia.

Deixe um comentário logo abaixo sobre o que você mais gostou, ou sobre alguma dica extra que você deseja compartilhar conosco ou até mesmo alguma crítica sobre este guia.