Capítulo 1: Passo a passo para configuração de Push (para lojas em HTTP)

Por Caique Dourado Quarta-feira, 06 de abril de 2016

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

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”

push notification para ecommerce 1

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

push notification para ecommerce 2

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

push notification para ecommerce 3

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.

push notification para ecommerce 4

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

push notification para ecommerce 5

7º Clique em “Ativar

push notification para ecommerce 6

8º Na coluna esquerda, clique em “Credenciais

push notification para ecommerce 7

9º Clique no botão azul “Criar credenciais

push notification para ecommerce 8

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

push notification para ecommerce 9

11º Clique no botão “Chave de Servidor

push notification para ecommerce 10

12º Clique no botão azul “Criar

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

push notification para ecommerce 11

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

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

push notification para ecommerce 12

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”

push notification para ecommerce 13

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

push notification para ecommerce 14

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

push notification para ecommerce 15

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

push notification para ecommerce 16

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.

push notification para ecommerce 17

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;

push notification para ecommerce 18

push notification para ecommerce 19

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.
  • Marque o campo “My site is not fully HTTPS
  • No campo “Choose Subdomain”, informe um nome subdomínio (Exemplo: lojaexemplo)
  • No campo “Google Project Number” informe o número do projeto no Google, que cadastramos no Google Console (você também anotou em algum lugar)

push notification para ecommerce 20

push notification para ecommerce 21

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

push notification para ecommerce 22

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

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

push notification para ecommerce 23

11º Faça o download dos arquivos do OneSignal

Link: https://github.com/one-signal/OneSignal-Website-SDK/releases/download/1.6.0/OneSignalSDKFiles.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):

{
  name: "Nome da Loja",
  short_name: "Nome da loja",
  start_url: "/",
  display: "standalone",
  gcm_sender_id: "ID-DO-GOOGLE-PROJECT",
  gcm_user_visible_only: true
}

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ê.

Nos campos abaixo em vermelho, você deverá informar o código que pegou no 10º passo, campo “Your App ID” (Ex: 7bacf3c4-bc80-4f79-9aa2-dbadba07bcb0), e o subdomínio que preencheu no 8º passo (campo “Choose Subdomain”).

<head>
  <link rel="manifest" href="/manifest.json">
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <script>
    var OneSignal = OneSignal || [];
    OneSignal.push(["init", {
      appId: "DIGITE AQUI SEU ONESIGNAL ID",
      subdomainName: 'DIGITE AQUI O SUBOMÍNIO',
      welcomeNotification: {
        disable: true
      },      
      notifyButton: {
        enable: true
      }
    }]);
  </script>
</head>

15º Acesse sua loja virtual usando o Google Chrome ou Firefox: www.lojaexemplo.com.br

16º Clique no botão vermelho que aparecerá no canto inferior direito

push notification para ecommerce 24

17º Clique no botão azul “Continue”

push notification para ecommerce 25

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

push notification para ecommerce 26

20º 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”

push notification para ecommerce 27

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

push notification para ecommerce 28

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

push notification para ecommerce 29

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

push notification para ecommerce 30

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

push notification para ecommerce 31

Agora está tudo pronto para o disparo!

Capítulo 1: passo a passo para configuração de Push (para lojas “totalmente” em HTTPS)

Capítulo 1: passo a passo para configuração de Push (para lojas em HTTP)

Capítulo 2: Enviar Push para todos os inscritos

Capítulo 3: Push para trazer de volta visitantes que não acessam o site a alguns dias

Capítulo 4: Enviar Push para Recuperar carrinhos abandonados

Capítulo 5: Enviar Push segmentado para quem visitou determinada categoria de produtos

Capítulo 6: Push para converter visitantes em clientes

Capítulo 7: Push para Divulgar Promoções relâmpago

Na próxima semana você ver  o Capítulo 2: Enviar mensagens para todos os inscritos. Aguarde!

Deixe seu comentário

7 comentários

Comments

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Commenting as Anonymous

  1. Muito bom artigo Caique,
    Não entendi como funciona o “Default Notification Icon URL”. Como crio essa URL? essa imagem deve ser como? Minha loja a plataforma é magento é possível fazer?

    Att.

    Responder
Hosted by: Dialhost Webinars transmission: Qualified Leads: Dialhost Recruitment & Selection: Dialhost Metrics & Analytics: MetricasBoss People Marketing: Dialhost