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.
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.
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. 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.
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.
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.
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.
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".
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.
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 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 .
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.
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.
27. Clique em Finalizar .
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.
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".
31. Clique em Atualizar.
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.
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.
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.
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.
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.
Em Mensagem da notificação, adicione o corpo do texto.
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.
-
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.
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.
- Atribua um nome à variável para distingui-la. Neste exemplo, atribuímos o identificador "Name".
- 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".
- 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.
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 .
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".
42. Clique em Finalizar .
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.
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.
Leituras relacionadas
Se quiser aprofundar algum dos aprendizados adquiridos nesta lição, você pode acessar a documentação do guia:
- Conteúdo web do tipo inline, para aprender como funciona esse conteúdo, que você pode editar no Editor de conteúdo web, que aprendeu a usar na primeira lição.
- Configurar notificações web push, para garantir que você integrou em seu Connectif o envio de notificações push.
- Segmento estático, para aprender a criar um segmento de testes com o qual testar seus workflows.