2. Crie uma estratégia de inscrição para notificações push

Nesta lição, você aprenderá e implementará o fluxo de trabalho que contém uma estratégia de captação push para que seus visitantes se inscrevam neste canal de comunicação.

Aproveite o canal push para impactar de forma imediata um maior volume de contatos através das notificações do navegador.

Objetivo: Captação.
Elementos utilizados: Notificação push, inline.
Tempo de implementação: 1,5 horas.

Recomendamos que você siga todos os passos e implemente essa estratégia do zero em sua conta, mas se precisar de um caminho rápido, no Diretório de Modelos de Workflows você tem disponível o modelo Inscrição push usando notificação do navegador, com o qual pode trabalhar.

 

Resumo da lição

Nesta lição você vai aprender:

  • Como criar um conteúdo inline e inseri-lo em seu site.
  • Como criar uma notificação push com o Editor de notificações push.
  • Como usar o nó "Mostrar push" para utilizar este canal de comunicação.
     

Ao terminar a lição, você terá criado em sua conta:

A estratégia de captação push que contém este fluxo de trabalho, através da qual enviará aos seus visitantes um inline nativo do navegador para que se inscrevam neste canal de comunicação, que poderá aproveitar em futuras campanhas.

2. Crea una estrategia de suscripción a notificaciones push - 1.png

 

Considerações prévias

Nesta lição é criado um conteúdo inline invisível, que fará com que seja ativada uma solicitação de inscrição para notificações push àqueles visitantes que não as tenham ativadas. Para que funcione, você deverá ter configurado o ServiceWorker no seu processo de integração com o Connectif. Se ainda não fez isso, ao final deste artigo encontrará documentação sobre como configurar o canal push.

Cada navegador exibirá a notificação de uma forma, portanto seu aspecto não pode ser editado, como o de outros conteúdos web do tipo inline.

 

Configuração da estratégia

PASSO 0. Criação do workflow

Como criar o workflow para esta estratégia

1. Em sua conta Connectif, clique em "Workflows > Criar novo Workflow" e, em seguida, em Criar Workflow em branco.

2. Crea una estrategia de suscripción a notificaciones push - 2.png

 

2. Clique em (Edição) e dê o nome "Inscrição push utilizando notificação do navegador".

3. Clique em Aplicar para salvar o novo nome do seu workflow.

 

PASSO 1. Nó "Início"

Como configurar o Nó "Início" para esta estratégia

(Este nó define o público ao qual o workflow será direcionado).

4. Clique em (Editar configuração do nó) do nó “Início”.

5. Em Selecione uma restrição, marque "Toda minha lista".

6. Em Selecione a fonte de dados, marque "Todos os existentes e os novos".

7. Clique em Atualizar.

2. Crea una estrategia de suscripción a notificaciones push - 3.png

Neste passo indicamos ao Connectif que o workflow seja ativado para todos os contatos que visitarem o site, tanto novos quanto existentes.

PASSO 2. Nó "Ao visitar página"

Como configurar o Nó "Ao visitar página" para esta estratégia

(Este nó fará com que a próxima ação do workflow, neste caso enviar o inline de inscrição para as notificações push, seja ativada quando um contato visitar seu site).

8. No menu de seleção de nós, vá para "Disparadores > Web" e arraste o nó "Ao visitar página" para o editor, de forma que conecte com o nó "Início".

9. Clique em (Editar configuração do nó) do nó “Ao visitar página”.

10. Clique em Limitações e desmarque a caixa "Desativar após disparar".

11. Clique em Atualizar.

2. Crea una estrategia de suscripción a notificaciones push - 4.png

Neste passo indicamos ao Connectif que, no momento em que um contato visitar qualquer página do site a partir de qualquer dispositivo, passe para a próxima ação.

PASSO 3. Nó "Verificar valor"

Como configurar o Nó "Verificar valor" para esta estratégia

(Este nó verificará se seus visitantes estão inscritos em suas notificações push, para não enviar o inline caso já as tenham ativadas).

12. No menu de seleção de nós, vá para "Condições > Sistema" e arraste o nó "Verificar valor" para o editor, de forma que conecte com o nó "Ao visitar página".

13. Clique em (Editar configuração do nó) do nó “Verificar valor”.

14. Arraste o campo "Tem inscrições push" de "Contato" para o bloco da esquerda.

15. Em Operador, selecione "É igual a".

16. Arraste o campo "Literal" para o bloco da direita e deixe a caixa em "Sim", para indicar ao Connectif que o estado de inscrição para push deve ser "Sim" na ficha do contato.

17. Clique em Atualizar.

2. Crea una estrategia de suscripción a notificaciones push - 5.png

Neste passo indicamos ao Connectif que verifique se os visitantes têm o campo de inscrição para notificações push como "Sim". Caso não estejam inscritos, o fluxo continuará e eles receberão a notificação de inscrição. Se o contato estiver inscrito, a estratégia será interrompida.

PASSO 4. Nó "Enviar conteúdo web"

Como funciona o conteúdo web do tipo inline

O conteúdo web do tipo "Inline" é inserido dentro da página, sem necessidade de modificar seu código nem alterar sua estrutura. Serve para mostrar conteúdos personalizados ou código HTML em qualquer lugar do site.

Ele é formatado no Editor de conteúdo, portanto não são necessários conhecimentos em programação para criá-lo.

Um inline gera estatísticas relacionadas às suas visualizações, interações e participação no processo de compra.

Crea_una_estrategia_de_suscripcio_n_a_notificaciones_push_-_6.png

 

Como configurar o conteúdo web do tipo inline para esta estratégia

(Neste passo você vai criar o inline de captação de usuários para as notificações push).

18. No menu de seleção de nós, vá para "Ações > Web" e arraste o nó "Enviar conteúdo web" para o editor, de forma que conecte com o nó "Verificar valor".

19. Na conexão deste nó com o nó "Verificar valor", clique no círculo até aparecer "Não".

2. Crea una estrategia de suscripción a notificaciones push - 6.png

 

20. Clique em (Editar configuração do nó) do nó “Enviar conteúdo web” e Criar novo conteúdo para gerar um novo conteúdo.

21. Ao criar um novo conteúdo, selecione como tipo Inline, dê um nome, por exemplo "Notificação nativa push", e clique em Criar novo conteúdo.

2. Crea una estrategia de suscripción a notificaciones push - 7.png

 

22. Adicione um componente do tipo HTML e edite-o, copiando e colando o seguinte trecho de código:

<script>
connectif.subscribeToPushNotifications(function (error){
if (!error){ 
connectif.managed.sendEvents([]); 
} 
});
</script>

2. Crea una estrategia de suscripción a notificaciones push - 8.png

23. Clique em Salvar para conservar as modificações no design e em Voltar ao seletor para retornar e finalizar a configuração do nó.

 

Como configurar o Nó "Enviar conteúdo web" para esta estratégia

(Este nó mostrará o inline de confirmação de recebimento das push para aqueles contatos que não estiverem inscritos).

24. Uma vez selecionado o conteúdo Inline, clique em Próximo .

2. Crea una estrategia de suscripción a notificaciones push - 9.png

 

25. Em Configuração, adicione o seletor adequado para mostrar o conteúdo. Neste caso, é recomendável incluir o conteúdo em um elemento que seja exibido em todas as páginas, por exemplo no rodapé. Em futuras lições será explicado como encontrar o seletor adequado para inserir qualquer inline.

2. Crea una estrategia de suscripción a notificaciones push - 10.png

 

26. Em Limitações, crie uma limitação externa em Limitação a outros nós, para isso:

  • No menu suspenso Selecionar nó, escolha a opção "Ao visitar página" para limitar este nó.

  • Em Selecione o tipo de limitação, escolha a opção "Desativar por um tempo" e digite “1” no campo “Dia".

  • Clique em Adicionar limitação externa para salvar a configuração.

2. Crea una estrategia de suscripción a notificaciones push - 11.png

 

27. Clique em Finalizar .

Neste passo indicamos ao Connectif que envie o inline de inscrição que acabamos de criar aos visitantes que chegarem a essa parte do fluxo. Com as limitações, este inline só será enviado uma vez por dia caso os contatos não estejam inscritos.

PASSO 5. Nó "Ao inscrever-se em push"

Como funciona o Nó "Ao inscrever-se em push"

Este nó é usado para reagir no momento em que um contato se inscreve nas notificações push. A interface do nó não dispõe de configuração.

2. Crea una estrategia de suscripción a notificaciones push - 12.png

 

Como configurar o Nó "Ao inscrever-se em push" para esta estratégia

(Este nó fará com que a próxima ação do workflow, neste caso enviar uma notificação push de boas-vindas, seja ativada quando um contato aceitar receber essas comunicações).

28. No menu de seleção de nós, vá para "Disparadores > Web" e arraste o nó "Ao inscrever-se em push" para o editor, de forma que conecte com o nó "Enviar conteúdo web".

29. Clique em (Editar configuração do nó) do nó “Ao inscrever-se em push”.

30. Em Limitações, desmarque a caixa "Desativar após disparar" e, em "Desativar temporariamente após evento", digite “1” no campo “Dia".

2. Crea una estrategia de suscripción a notificaciones push - 13.png

 

31. Clique em Atualizar.

Neste passo indicamos ao Connectif que, uma vez que o contato se inscreva nas notificações push, o próximo passo do workflow seja ativado.

PASSO 6. Nó "Mostrar push"

Como funciona o nó "Mostrar push"

Este nó é usado para mostrar uma notificação push específica aos contatos que chegarem a essa parte do workflow. Na interface do nó são configurados, por etapas, todos os aspectos sobre a notificação a ser exibida:

  • Configuração da notificação. Para selecionar uma notificação push previamente criada ou configurar uma nova no editor de notificações web push. Neste passo também pode ser definida uma data de expiração para a notificação.
  • Configuração de campos e valores. Para atribuir ou modificar os valores das variáveis incluídas na notificação push.

2. Crea una estrategia de suscripción a notificaciones push - 14.png

 

Como funcionam as notificações push

As notificações web push são mensagens instantâneas e totalmente personalizáveis que os contatos recebem em seus dispositivos. Esta comunicação imediata e individualizada permite impactar os usuários nos momentos e locais adequados para aumentar as taxas de conversão, mesmo quando não visitam o site.

São formatadas no Editor de notificações push, portanto não são necessários conhecimentos em programação para criá-las.

2. Crea una estrategia de suscripción a notificaciones push - 15.png

 

Como configurar a notificação push para esta estratégia

(Neste passo você vai criar a notificação push de boas-vindas para os contatos que aceitaram a inscrição).

32. No menu de seleção de nós, vá para "Ações > Web" e arraste o nó "Mostrar push" para o editor, de forma que conecte com o nó "Ao inscrever-se em push".

33. Clique em (Editar configuração do nó) do nó “Mostrar push”. Clique em Criar novo conteúdo ou (opcional) em Editar para modificar uma notificação existente.

2. Crea una estrategia de suscripción a notificaciones push - 16.png

 

34. Ao criar uma nova notificação, no painel de Ferramentas, clique na aba Geral para editar os parâmetros do aspecto geral da sua notificação.

2. Crea una estrategia de suscripción a notificaciones push - 17.png

 

35. Em Geral, edite as opções de elaboração e design da sua push.

  • Em Título da notificação, adicione o nome que aparecerá na parte superior da mensagem.

2. Crea una estrategia de suscripción a notificaciones push - 18.png

 

  • Em Mensagem da notificação, adicione o corpo do texto.

2. Crea una estrategia de suscripción a notificaciones push - 19.png

 

  • Em Adicione uma URL para redirecionar, configure a página para a qual os contatos serão enviados quando clicarem na notificação. Deve ser um link absoluto. Se a aba "fechar ao clicar" estiver marcada, a notificação será fechada quando o contato clicar nela.

2. Crea una estrategia de suscripción a notificaciones push - 20.png

 

  • Em URLs de imagens, configure os três tipos de imagem que o editor permite

    • URL do ícone: é a imagem que aparece no canto superior esquerdo, como um ícone.

    • URL da imagem: é a imagem destacada. É exibida no modelo ocupando a metade inferior da notificação.

    • URL do ícone da bandeja de notificações: é a imagem que aparecerá na bandeja de notificações do dispositivo onde a push for recebida.

2. Crea una estrategia de suscripción a notificaciones push - 21.png

 

36. Na seção Versão Compacta, configure como esta notificação será exibida no canto da tela do navegador.

  • Em Mensagem compacta, adicione o corpo do texto que aparecerá na janela pop-up.
  • Em URL do ícone compacto, adicione a imagem que aparecerá no canto superior esquerdo como um ícone.

37. (Opcional). Adicione variáveis a qualquer um dos campos, tanto na versão completa quanto na compacta. Para isso:

  • Clique em (Definir uma variável dinâmica) no local onde desejar incluir a variável. Neste exemplo, criaremos uma variável para o título da notificação.

2. Crea una estrategia de suscripción a notificaciones push - 22.png

 

  • Atribua um nome à variável para distingui-la. Neste exemplo, atribuímos o identificador "Name".

2. Crea una estrategia de suscripción a notificaciones push - 23.png

 

  • Em Valor padrão, adicione o valor que deseja que a variável tenha quando não houver nenhum dado armazenado no campo correspondente. Neste exemplo, atribuímos o valor padrão "Hello".

2. Crea una estrategia de suscripción a notificaciones push - 24.png

 

  • Clique em Aceitar para salvar as alterações na variável.

38. Clique em Visualizar para revisar o resultado final da sua notificação, e/ou em Visualizar compacta para revisar o resultado na versão compacta.

2. Crea una estrategia de suscripción a notificaciones push - 25.png

 

39. Clique em Salvar para conservar as modificações no design e em Voltar à lista de conteúdos para retornar e finalizar a configuração do nó.

 

Como configurar o nó "Mostrar push" para esta estratégia

(Este nó enviará a notificação push de boas-vindas).

40. Selecione a web push criada no passo anterior e clique em Próximo .

2. Crea una estrategia de suscripción a notificaciones push - 26.png

 

41. (Opcional). Se você criou variáveis para seu conteúdo, vincule-as com os campos do Connectif selecionando da coluna da esquerda o campo correspondente e atribuindo-o à variável. Neste exemplo, o campo "Nome" será o que dará valor à variável "Name".

2. Crea una estrategia de suscripción a notificaciones push - 27.png

 

42. Clique em Finalizar .

Neste passo indicamos ao Connectif que envie uma notificação push de boas-vindas aos contatos assim que se inscreverem.

Resultado

Após completar os passos, você terá criado sua estratégia de captação push usando a notificação do navegador, que será enviada aos visitantes que não tiverem este canal ativado para convidá-los a se inscreverem nas suas notificações push. Uma vez inscritos, você enviará uma notificação de boas-vindas.

2. Crea una estrategia de suscripción a notificaciones push - 28.png

 

Continue seu percurso

Agora que você completou esta lição, continue com a próxima, na qual criará em sua conta um Funil de carrinho abandonado.

 

Parabéns!
Você chegou ao final da lição.

Volte ao curso
Acesse o índice completo do curso e a explicação de cada lição em este link.


Leituras relacionadas

Se quiser aprofundar algum dos aprendizados adquiridos nesta lição, você pode acessar a documentação do guia: