Nesta lição, você aprenderá e implementará o fluxo de trabalho para mostrar um recomendador inline nas páginas de produto para aumentar a retenção e as vendas.
Recomendar produtos personalizados durante a navegação do contato pelo seu eCommerce ajudará a aumentar as chances de compra e o valor das mesmas. Com o Connectif, você pode facilmente adicionar um conteúdo recomendador criado com conteúdo web do tipo inline.
Objetivo: Retenção e conversão.
Elementos utilizados: Inline.
Tempo de implementação: 2 horas.
Recomendamos que você siga todos os passos e implemente esta estratégia do zero em sua conta, mas se precisar de um caminho rápido, no Diretório de Templates de Workflows você tem disponível o template Recomendador na página de produto, com o qual pode trabalhar.
Resumo da lição
Nesta lição você vai aprender:
- O nó "Ao visitar um produto" para detectar as visitas dos contatos a uma página de produto.
- O nó "Obter produtos" para obter os produtos que serão exibidos posteriormente em algum tipo de conteúdo.
- Como criar e inserir na página um conteúdo inline, neste caso, de recomendação.
Ao terminar a lição, você terá criado em sua conta:
A estratégia que contém este fluxo de trabalho, através da qual você mostrará um inline após a página de produto no momento em que um contato estiver visitando esse produto. Dependendo dos produtos relacionados obtidos, será exibido um inline mais preciso ou tentará obter outros itens recomendados.
Configuração da estratégia
PASSO 0. Criação do workflow
Como criar o workflow para esta estratégia
1. Na 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 "Recomendador na página de produto".
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ó estabelece o público-alvo a que o workflow será dirigido).
4. Clique em (Editar configuração do nó) do nó “Início”.
5. Em Selecionar uma restrição, marque "Toda a minha lista" e selecione no menu suspenso a opção “Toda a minha lista”.
6. Em Selecionar a fonte de dados, marque "Todos os existentes e os novos".
7. Clique em Atualizar.
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 um produto"
Como funciona o Nó "Ao visitar um produto"
Este nó é usado para reagir no momento em que um contato visita uma página de produto.
Na interface do nó, são configuradas as características específicas dos produtos que irão dispará-lo.
Como configurar o Nó "Ao visitar um produto" 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 notificações push, seja ativada quando um contato visitar seu site).
8. No menu de seleção de nós, vá para "Disparadores > Comércio eletrônico" e arraste o nó "Ao visitar um produto" para o editor, conectando-o ao nó "Início".
9. Clique em (Editar configuração do nó) do nó “Ao visitar um produto”.
10. Clique em Limitações e desative a caixa "Desativar após disparar".
11. Clique em Atualizar.
Neste passo indicamos ao Connectif que, no momento em que um contato visitar qualquer página de produto de qualquer dispositivo, passe para a próxima ação.
PASSO 3. Primeiro Nó "Obter produtos"
Como funciona o Nó "Obter produtos"
Este nó é um dos mais úteis de toda a plataforma. É usado para filtrar os produtos que serão exibidos posteriormente em algum tipo de conteúdo. Nele são configurados, em diferentes telas, quais produtos e como serão obtidos:
Selecionar os casos de uso. Para escolher grupos de produtos que o nó obterá. Podem ser selecionados até 2, sendo o primeiro o de prioridade.
Configuração dos casos de uso. Para definir, em cada caso, os produtos a obter, a origem dos produtos, as condições ou filtros que eles devem cumprir e a ordem em que queremos que sejam exibidos.
Resumo. Para definir a quantidade total de produtos a obter no nó, se há limite para o número total de produtos a retornar e se deseja excluir produtos obtidos em nós anteriores.
Como configurar o Nó "Obter produtos" para esta estratégia
(Este nó vai obter automaticamente os produtos relacionados ao produto visitado, da mesma categoria e marca).
12. No menu de seleção de nós, vá para "Ações > Comércio eletrônico" e arraste o nó "Obter produtos" para o editor, conectando-o ao nó "Ao visitar um produto".
13. Clique em (Editar configuração do nó) do nó “Obter produtos”.
14. Para selecionar os casos de uso, arraste Automaticamente relacionados a um produto para o bloco da direita e clique em Próximo. Assim, serão obtidos os produtos que se relacionam automaticamente ao visitado pelo contato.
15. Em Configuração do caso principal, indique "12" em Quantidade de produtos a obter, para que o Connectif obtenha até 12 itens relacionados ao visitado.
16. Em Selecionar a fonte dos produtos, selecione Todos os produtos, para que o Connectif busque em todo o seu catálogo.
17. Em Selecionar o produto relacionado, selecione “Produto (Ao visitar um produto)”, para que o dado que o Connectif importe venha da página visitada pelo contato.
18. Em Configurar as condições para definir um conjunto específico de produtos:
Clique em Adicionar outra condição e selecione no menu suspenso “Categorias”. À direita, selecione “Dados importados” e, após clicar em “Selecionar um dado importado”, escolha “Ao visitar um produto > Categorias”. Assim, o Connectif obterá produtos da mesma categoria do visitado.
- Clique em Adicionar outra condição e selecione no menu suspenso “Marca”. À direita, selecione “Está incluído em” e, após clicar em “Selecionar um dado importado”, escolha “Ao visitar um produto > Marca”. Assim, o Connectif obterá produtos da mesma marca do visitado.
19. Em Selecionar uma ordenação, escolha "Ordenar por avaliação decrescente" e ative a caixa "Reordenar aleatoriamente os produtos obtidos". Assim, o Connectif selecionará os 12 produtos com maior avaliação, mas o conteúdo será exibido em ordem aleatória.
20. Clique em Próximo.
21. No último passo da configuração do nó, Resumo, localize a seção Quantidade de produtos a obter e indique “12” para que esta seja a quantidade máxima de produtos exibidos.
22. Desative a caixa “Preencher produtos até o limite selecionado”, para que, caso não existam 12 produtos que cumpram essas condições, o Connectif não adicione conteúdo adicional.
23. Ative a caixa “Excluir os produtos exportados por nós anteriores” para garantir que o produto visitado não seja exibido.
24. Clique em Finalizar.
Neste passo indicamos ao Connectif que obtenha, para exibir no inline, produtos automaticamente relacionados ao que o contato visitou. Com a configuração do nó, serão exibidos até 12 produtos da mesma marca e categoria, selecionados com base em suas avaliações.
PASSO 4. Nó "Verificar valor"
Como configurar o Nó "Verificar valor" para esta estratégia
(Este nó verifica se o tamanho da lista obtida de produtos recomendados é maior que 4).
25. 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ó "Obter produtos".
26. Clique em (Editar configuração do nó) do nó “Verificar valor”.
27. Arraste o campo "Tamanho da lista" de "Obter produtos" para o bloco da esquerda.
28. Na coluna "Operador" selecione "É maior que".
29. Arraste o campo Literal para o bloco da direita e defina o valor "4".
30. Clique em Atualizar.
Neste passo indicamos ao Connectif que verifique se, no nó "Obter produtos", foram obtidos mais de 4 produtos relacionados ao item visitado, para continuar pelo fluxo exibindo os produtos obtidos. Se o número de produtos não for superior a 4, continuará por outro ramo para obter mais produtos através de um segundo nó "Obter produtos".
PASSO 5. Primeiro nó "Enviar conteúdo web"
Como criar o inline para esta estratégia
(Neste passo você vai criar o inline que conterá os produtos relacionados, que será exibido pelo nó quando o contato visitar a página do produto).
31. 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".
32. Na conexão deste nó com o anterior, clique no círculo até aparecer "Sim". Assim, você indicará ao Connectif que o inline será exibido se aparecerem mais de 4 produtos relacionados diferentes.
33. Clique em (Editar configuração do nó) do nó “Enviar conteúdo web” e Criar novo conteúdo para gerar um novo conteúdo.
34. Ao criar um novo conteúdo, selecione o tipo Inline, dê um nome e clique em Criar conteúdo web.
35. No painel de Ferramentas, clique na aba Geral para editar os parâmetros do aspecto geral do seu inline. Você também pode acessar clicando em Propriedades gerais no painel de design.
36. Clique na aba Componentes para acessar as opções de elaboração e design do seu inline.
- Em Disposição, escolha a estrutura de uma coluna.
- Em Elementos, adicione um elemento do tipo "Texto" para inserir no conteúdo e edite como desejar.
- Em Elementos, adicione um elemento do tipo "Produtos" para mostrar os produtos recomendados e clique no botão (Editar elemento):
- Dê um nome, um tipo (neste caso, Carrossel) e um template (neste caso, Produto com marca).
- Em estrutura, escolha quantos elementos serão exibidos simultaneamente, tanto em desktop quanto em móvel. No exemplo foram escolhidos 4 no desktop e 1 no móvel.
- Escolha, opcionalmente, um tempo de rotação. Se indicar 0, a rotação automática estará desativada.
37. 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
38. Selecione o conteúdo Inline correspondente e clique em Próximo.
39. Localize em seu site o seletor adequado para mostrar o conteúdo. Você pode seguir os passos deste exemplo:
Acesse a página do seu site onde deseja adicionar o conteúdo embutido.
Visualize o bloco que deseja usar como referência.
Abra o console de ferramentas de desenvolvimento (DevTools) do navegador.
Selecione a aba Elements no console para visualizar a estrutura HTML.
- Clique no ícone Inspecionar, o primeiro da esquerda no menu superior.
- Posicione o cursor do mouse sobre a área do conteúdo que planeja usar como referência. Clique quando a seleção estiver adequada para que a tag fique destacada no console.
- Clique sobre o conteúdo da aba Elements do console e use o atalho de teclado Control + F para buscar o nome da tag ou atributo. Se houver apenas uma correspondência (como neste exemplo), é adequado e você poderá usá-lo. Nesse caso, copie o nome e feche o console de desenvolvimento. Se houver mais de uma correspondência, deverá localizar outro seletor único.
40. Uma vez localizado e copiado o seletor, volte à configuração do nó "Enviar conteúdo web" no Connectif, adicione-o em Configuração para mostrar o conteúdo e clique em Próximo. (Na captura seguimos com o exemplo anterior, você deverá indicar o nome do seletor que escolheu).
41. Associe as variáveis do produto do nó "Obter produtos", neste caso, os produtos recomendados, para personalizar o inline com os itens obtidos nesse nó e suas informações. Para isso, vincule os campos do Connectif (coluna esquerda) com as variáveis do seu email (coluna direita):
Arraste o campo Nome para associá-lo à variável {{name}}. Assim, essa variável incluirá o nome do produto que aparecer no seu catálogo.
- Arraste o campo Url de detalhe para associá-lo à variável {{buttonUrl}}. Assim, essa variável incluirá o endereço da página do produto no seu catálogo.
- Arraste o campo Url da imagem para associá-lo à variável {{imageUrl}}. Assim, essa variável incluirá a imagem do produto.
- Arraste o campo Preço unitário para associá-lo à variável {{unitPrice}}. Assim, essa variável incluirá o preço unitário atual desse produto.
- Arraste o campo Literal para associá-lo à variável {{buttonText}} e insira nele o texto que deseja que o botão exiba. Assim, essa variável incluirá o texto do botão que você definiu.
42. Clique em Finalizar.
Neste passo indicamos ao Connectif que exiba o inline com a recomendação de produtos que acabamos de criar para os visitantes que chegam a esta parte do fluxo. Nesta estratégia, não adicionamos limitações ao inline para que ele seja exibido sempre que as condições forem cumpridas.
PASSO 6. Segundo nó “Obter produtos”
(Este nó vai obter os produtos mais visitados no último mês, da categoria e marca do produto visitado).
43. No menu de seleção de nós, vá para "Ações > Comércio eletrônico" e arraste o nó "Obter produtos" para o editor, conectando-o ao nó "Verificar valor".
44. Na conexão deste nó com o anterior, clique no círculo até aparecer "Não".
45. Clique em (Editar configuração do nó) do nó “Obter produtos”.
46. Para selecionar os casos de uso, arraste "Produtos mais visitados" para o bloco da direita e "Produtos mais vendidos" para o caso de uso adicional. Assim, serão obtidos os produtos mais visitados e, se estes não forem suficientes, os mais vendidos. Clique em Próximo.
47. Em Configuração do caso principal, complete a seguinte configuração:
Indique "12" em Quantidade de produtos a obter, para que o Connectif obtenha até 12 itens.
Em Selecionar a origem dos produtos, selecione Todos os produtos, para que o Connectif busque em todo o seu catálogo os produtos a exibir.
-
Em Configurar as condições para definir um conjunto específico de produtos:
Clique em Adicionar outra condição e selecione no menu suspenso “Categorias”. À direita, selecione “Dados importados” e, após clicar em “Selecionar um dado importado”, escolha “Ao visitar um produto > Categorias”. Assim, o Connectif obterá produtos da mesma categoria do visitado.
Clique em Adicionar outra condição e selecione no menu suspenso “Marca”. À direita, selecione “Está incluído em” e, após clicar em “Selecionar um dado importado”, escolha “Ao visitar um produto > Marca”. Assim, o Connectif obterá produtos da mesma marca do visitado.
Em Selecionar o período de tempo das visitas, escolha Mais visitados no último mês, para que o Connectif obtenha os produtos mais visitados do último mês.
Ative a caixa "Reordenar aleatoriamente os produtos obtidos", para que a ordem em que os produtos são exibidos sempre varie.
48. Clique em Próximo.
49. Em Configuração do caso adicional, complete a seguinte configuração:
Selecione "12" em Quantidade de produtos a obter.
Clique em Adicionar outra condição e selecione no menu suspenso “Categorias”. À direita, selecione “Dados importados” e, após clicar em “Selecionar um dado importado”, escolha “Ao visitar um produto > Categorias”.
Em Selecionar o período de tempo das visitas, escolha "Mais vendidos no último mês" e ative a caixa "Reordenar aleatoriamente os produtos obtidos".
50. Clique em Próximo e, já em Resumo, localize a seção Quantidade de produtos a obter e indique “12”. Em seguida, ative "Preencher com produtos até o limite selecionado" e "Excluir os produtos exportados por nós anteriores a este".
51. Clique em Finalizar.
Neste passo indicamos ao Connectif que obtenha, para exibir no conteúdo, os produtos mais visitados e mais vendidos do último mês. Com a configuração do nó, serão exibidos até 12 produtos da mesma marca e categoria, selecionados com base em suas avaliações. Caso não existam 12 produtos com essas condições, o algoritmo do Connectif buscará produtos complementares.
PASSO 7. Segundo nó "Enviar conteúdo web"
Como criar o inline para esta estratégia
(Neste passo você enviará o mesmo inline que criamos no Passo 5, mas neste caso conterá os produtos obtidos no segundo nó "Obter produtos").
52. 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 segundo nó "Obter produtos".
53. Clique em (Editar configuração do nó) do nó “Enviar conteúdo web” e selecione o inline que você criou no Passo 5.
54. Clique em Próximo.
55. Em Configuração, adicione o seletor adequado para mostrar o conteúdo e clique em Próximo. Se precisar de mais informações sobre como localizá-lo, pode voltar ao Passo 5 para encontrar como fazer.
56. Associe as variáveis do produto do segundo nó "Obter produtos", neste caso, os produtos mais visitados, para que o inline mostre os itens obtidos nesse nó e suas informações. Você pode usar esta imagem como referência:
57. Clique em Finalizar.
Neste passo indicamos ao Connectif que exiba o inline com o recomendador de produtos que acabamos de criar para os visitantes que chegam a esta parte do fluxo. Nesta estratégia, não adicionamos limitações ao inline para que ele seja exibido sempre que as condições forem cumpridas.
Resultado
Após completar os passos, você terá criado sua estratégia para exibir um recomendador inline que aparecerá após a página do produto no momento em que um contato estiver visitando o produto.
Continue seu percurso
Agora que você completou esta lição, continue com a próxima, na qual você criará em sua conta uma estratégia de remarketing.
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, pode acessar a documentação do guia:
- Nó "Obter produtos", para compreender em profundidade o funcionamento deste nó que você utilizou nesta estratégia e como aproveitá-lo em outros workflows.
- Inserir um inline no seu eCommerce, caso tenha ficado alguma dúvida sobre como localizar e inserir o ID. E, se você usa VTEX IO, siga os passos de este artigo para adicionar conteúdos web.
- Mostrar percentual de desconto somente quando houver desconto, para aprender como destacar os produtos quando estiverem com desconto em relação a outros que não estão.