Nesta lição, você aprenderá e implementará o workflow 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 imediatamente 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 siga todos os passos e implemente esta estratégia do zero em sua conta, mas se precisar de um atalho, 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ê 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 workflow, através do 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.
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 em notificações push para os visitantes que não as tiverem ativadas. Para que funcione, você deve ter configurado o ServiceWorker em seu processo de integração com Connectif. Se ainda não o fez, no final deste artigo você encontrará documentação sobre como configurar o canal push.
Cada navegador mostrará a notificação de uma maneira diferente, então sua aparência não pode ser editada, como a 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. Clique em (Edição) e atribua o nome "Inscrição push usando notificação do navegador".
3. Clique em Aplicar para salvar o novo nome do seu workflow.
PASSO 1. Nó "Ao visitar página"
Como configurar o Nó "Ao visitar página" para esta estratégia
(Este nó irá garantir 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, conectando-o ao 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 acionamento".
11. Clique em Atualizar.
Neste passo, indicamos ao Connectif que, no momento em que um contato visitar qualquer página do site de qualquer dispositivo, avance 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á estejam ativadas).
12. No menu de seleção de nós, vá para "Condições > Sistema" e arraste o nó "Verificar valor" para o editor, conectando-o ao 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 push deve ser "Sim" no registro do contato.
17. Clique em Atualizar.
Neste passo, indicamos ao Connectif que verifique se os visitantes possuem o campo de inscrição em notificações push como "Sim". Caso não estejam inscritos, o fluxo continuará e será enviada 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 precisar modificar seu código ou alterar sua estrutura. Serve para mostrar conteúdos personalizados ou código HTML em qualquer lugar da web.
É projetado no Editor de conteúdo, então não são necessários conhecimentos de programação para criá-lo.
Um inline gera estatísticas relacionadas às suas visualizações, interações e participação no processo de compra.
Como configurar o conteúdo web do tipo inline para esta estratégia
(Neste passo, você criará o inline para captura de usuários para 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, conectando-o ao nó "Verificar valor".
19. Na união deste nó com o nó "Verificar valor", clique no círculo até que apareça "Não".
20. Clique em (Editar configuração de 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 o tipo Inline, atribua um nome, por exemplo "Notificação nativa push", e clique em Criar novo conteúdo.
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>
23. Clique em Salvar para manter as modificações no design e em Voltar ao seletor para retornar e concluir a configuração do nó.
Como configurar o nó "Enviar conteúdo web" para esta estratégia
(Este nó exibirá o inline de confirmação de recebimento das push para os contatos que não estiverem inscritos).
24. Após selecionar o conteúdo Inline, clique em Próximo .
25. Em Configuração, adicione o seletor adequado para exibir 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 lições futuras, será explicado como encontrar o seletor adequado para inserir qualquer inline.
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 Selecionar o tipo de limitação, escolha a opção "Desativar por um tempo" e escreva “1” no campo “Dia".
- Clique em Adicionar limitação externa para salvar sua configuração.
27. Clique em Finalizar .
Neste passo, indicamos ao Connectif que envie o inline de inscrição que acabamos de criar para os visitantes que chegam a esta parte do fluxo. Com as limitações, este inline só será enviado uma vez por dia no caso de os contatos não estarem inscritos.
PASSO 5. Nó "Ao se inscrever em push"
Como funciona o Nó "Ao se inscrever 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 possui configuração.
Como configurar o Nó "Ao se inscrever 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 estas comunicações).
28. No menu de seleção de nós, vá para "Disparadores > Web" e arraste o nó "Ao se inscrever 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 se inscrever em push”.
30. Em Limitações, desmarque a caixa "Desativar após disparar" e, em "Desativar temporariamente após evento, escreva “1” no campo “Dia".
31. Clique em Atualizar.
Neste passo, indicamos ao Connectif que, uma vez que o contato se inscreva nas notificações push, ative a próxima etapa do fluxo.
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 chegam a essa parte do fluxo. Na interface do nó, todos os aspectos sobre a notificação a ser mostrada são configurados, passo a passo:
- 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 é possível definir 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.
Como funcionam as notificações push
As notificações web push são mensagens instantâneas e completamente personalizáveis que os contatos recebem em seus dispositivos. Esta comunicação imediata e individualizada permite impactar os usuários no momento e nos lugares adequados para aumentar as taxas de conversão, mesmo quando não estão visitando o site.
Elas são criadas no Editor de notificações push, então não são necessários conhecimentos de programação para criá-las.
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 tenham aceitado 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 se conecte com o nó "Ao se inscrever em push".
33. Clique em (Editar configuração do nó) do nó "Mostrar push". Clique em Criar novo conteúdo ou (opcionalmente) em Editar para modificar uma notificação existente.
34. Ao criar uma nova notificação, no painel de Ferramentas, clique na aba Geral para editar os parâmetros da aparência geral da sua notificação.
35. Clique na aba Conteúdo para acessar as opções de elaboração e design do seu push.
- No Título da notificação, adicione o nome que aparecerá na parte superior da mensagem.
- No Mensagem da notificação, adicione o corpo do texto.
- Em Adicionar um 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 opção "fechar ao clicar" for marcada, a notificação será fechada quando o contato clicar nela.
- 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 em destaque. É 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 em que você receberá a notificação.
36. Na aba Versão Compacta, configure como essa 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 fazer isso:
- Clique em (Definir uma variável dinâmica) no local onde deseja incluir a variável. Neste exemplo, criaremos uma variável para o título da notificação.
- Atribua um nome à variável para distingui-la. Neste exemplo, atribuiremos o identificador "Name".
- Em Valor padrão, adicione o valor que você deseja que a variável assuma quando não houver nenhum dado armazenado no campo correspondente. Neste exemplo, atribuiremos o valor padrão "Olá".
- Clique em Salvar 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.
39. Clique em Salvar para manter as modificações no design e em Voltar para a lista de conteúdos para voltar e concluir a configuração do nó.
Como configurar o nó "Mostrar push"para esta estratégia
(Este nó vai enviar a notificação push de boas-vindas).
40. Selecione a web push criada no passo anterior e clique em Próximo .
41. (Opcional). Se você criou variáveis para seu conteúdo, vincule-as aos campos do Connectif selecionando da coluna esquerda o campo correspondente e atribuindo-o à variável. Neste exemplo, o campo "Nome" será o que atribuirá valor à variável "Name".
42. Clique em Finalizar .
Neste passo, indicamos ao Connectif para enviar uma notificação push de boas-vindas aos contatos assim que se inscreverem.
Resultado
Após concluir os passos, você terá criado sua estratégia de aquisição de push usando a notificação do navegador, e ela será enviada aos visitantes que não tiverem este canal ativado para convidá-los a se inscreverem em suas notificações push. Uma vez cadastrados, você enviará uma notificação de boas-vindas.
Continue sua jornada
Agora que você completou esta lição, continue com a seguinte, onde 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 neste link.
Leituras relacionadas
Se você quiser aprofundar em algum dos aprendizados adquiridos nesta lição, você pode acessar a documentação do guia:
- Conteúdo web tipo inline, para aprender como esse conteúdo funciona, que você pode editar no Editor de conteúdo web, que você aprendeu a usar na primeira lição.
- Configurar notificações web push, para garantir que você integrou no seu Connectif o envio de notificações push.
- Segmento estático, para aprender a criar um segmento de testes para testar seus fluxos de trabalho.