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.
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 mostrados 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 do qual você mostrará um inline após a página do produto no momento em que um contato estiver visitando esse produto. Dependendo dos produtos obtidos relacionados ao mesmo, será mostrado um inline mais preciso ou será tentado obter outros itens recomendados.
Configuração da estratégia
PASSO 0. Criação do fluxo de trabalho
Como criar o fluxo de trabalho para esta estratégia
1. Em sua conta do Connectif, clique em "Workflows > Criar novo Workflow" e, em seguida, em Criar Workflow em branco.
2. Clique em (Edição) e atribua o nome "Recomendador na página do produto".
3. Clique em Aplicar para salvar o novo nome do seu fluxo de trabalho.
PASSO 1. Nó "Início"
Como configurar o nó "Início" para esta estratégia
(Este nó define o público-alvo para o qual o fluxo de trabalho será direcionado).
4. Clique em (Editar configurações do nó) do nó “Início”.
5. Em Selecione uma restrição, marque "Toda minha lista" e selecione no menu suspenso a opção “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 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 o acionarão.
Como configurar o nó "Ao visitar um produto" para esta estratégia
(Este nó ativará a próxima ação do fluxo de trabalho, neste caso enviar o inline de inscrição para notificações push, quando um contato visitar o seu site).
8. No menu de seleção de nós, vá para "Acionadores > Comércio eletrônico" e arraste o nó "Ao visitar um produto" para o editor, de modo que se conecte ao nó "Início".
9. Clique em (Editar configurações do nó) do nó “Ao visitar um produto”.
10. Clique em Restrições e desmarque a caixa "Desativar após acionado".
11. Clique em Atualizar.
PASSO 3. Primeiro Nó "Obter produtos"
Como funciona o Nó "Obter produtos"
Este nó é um dos mais úteis de toda a plataforma. Ele é usado para filtrar os produtos que serão mostrados posteriormente em algum tipo de conteúdo. Nele são configurados, em diferentes telas, quais produtos e como eles serão obtidos:
- Selecione os casos de uso. Para escolher grupos de produtos que o nó obterá. Podem ser selecionados até 2, sendo o primeiro o que tem prioridade.
- Configuração dos casos de uso. Para definir, em cada caso, os produtos a serem obtidos, a origem dos produtos, as condições ou filtros que eles devem atender e a ordem em que queremos que sejam mostrados.
- Resumo. Para definir a quantidade total de produtos a serem obtidos no nó, se o número total de produtos a serem retornados é limitado e se deseja excluir produtos obtidos em nós anteriores.
Como configurar o Nó "Obter produtos" para esta estratégia
(Este nó irá obter automaticamente os produtos relacionados ao produto que está sendo 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, de modo que se conecte ao nó "Ao visitar um produto".
13. Clique em (Editar configurações 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 . Desta forma, os produtos relacionados ao visitado pelo contato serão obtidos.
15. Em Configuração do caso principal, insira "12" em Quantidade de produtos a obter, para que o Connectif obtenha até 12 itens relacionados ao visitado.
16. Em Selecione a fonte dos produtos, selecione Todos os produtos, para que o Connectif procure em todo o seu catálogo.
17. Em Selecione o produto relacionado, selecione “Produto (Ao visitar um produto)”, para que os dados importados pelo Connectif venham da página visitada pelo contato.
18. Em Configurar condições para definir um conjunto específico de produtos:
- Clique em Adicionar outra condição e selecione no menu suspenso “Categorias”. Na direita, selecione “Dados importados” e, após clicar em “Selecionar dado importado”, escolha “Ao visitar um produto > Categorias”. Dessa forma, o Connectif obterá produtos da mesma categoria que o visitado.
- Clique em Adicionar outra condição e selecione no menu suspenso “Marca”. Na direita, selecione “Está incluído em” e, após clicar em “Selecionar dado importado”, escolha “Ao visitar um produto > Marca”. Dessa forma, o Connectif obterá produtos da mesma marca que o visitado.
19. Em Selecione uma ordem, escolha "Ordenar por avaliação descendente" e marque a caixa "Reordenar aleatoriamente os produtos obtidos". Dessa forma, o Connectif selecionará os 12 produtos com a maior avaliação, mas no conteúdo eles serão exibidos aleatoriamente.
20. Clique em Próximo .
21. Na última etapa da configuração do nó, Resumo, localize a seção Quantidade de produtos a obter e insira “12” para que este seja o número máximo de produtos a serem exibidos.
22. Desmarque a caixa “Preencher produtos até o limite selecionado”, para que, caso não haja 12 produtos que atendam a essas condições, o Connectif não adicione conteúdo adicional.
23. Marque a caixa “Excluir os produtos exportados por nós anteriores” para garantir que o produto visitado não seja exibido.
24. Clique em Concluir .
PASO 4. Nodo "Comprobar valor"
Cómo configurar el Nodo "Comprobar valor" para esta estrategia
(Este nodo comprueba si el tamaño de la lista obtenida de productos recomendados es mayor que 4).
25. En el menú de selección de nodos, dirígete a "Condiciones > Sistema" y arrastra el nodo "Comprobar valor" al editor, de forma que conecte con el nodo "Obtener productos".
26. Haz clic en (Editar configuración del nodo) del nodo “Comprobar valor”.
27. Arrastra el campo "Tamaño del listado" de "Obtener productos" hacia el bloque de la izquierda.
28. En la columna del "Operador" selecciona "Es mayor que".
29. Arrastra el campo Literal al bloque de la derecha y establece un valor de "4".
30. Haz clic en Actualizar.
PASO 5. Primer nodo "Enviar contenido web"
Cómo crear el inline para esta estrategia
(En este paso vas a crear el inline que contendrá los productos relacionados, que será el que muestre el nodo cuando el contacto visite la página de producto).
31. En el menú de selección de nodos, dirígete a "Acciones > Web" y arrastra el nodo "Enviar contenido web" al editor, de forma que conecte con el nodo "Comprobar valor".
32. En la unión de este nodo con el anterior, haz clic en el círculo hasta que aparezca "Sí". De este modo, estarás indicando a Connectif que el inline se muestre si aparecen más de 4 productos relacionados diferentes.
33. Haz clic en (Editar configuración del nodo) del nodo “Enviar contenido web” y Crear nuevo contenido para generar un nuevo contenido.
34. Al crear un nuevo contenido, selecciona como tipo Inline, asígnale un nombre y haz clic en Crear contenido web.
35. En el panel de Herramientas, haz clic en la pestaña General para editar los parámetros del aspecto general de tu inline. También puedes acceder haciendo clic en Propiedades generales del panel de diseño.
36. Haz clic en la pestaña Componentes para acceder a las opciones de elaboración y diseño de tu inline.
- En Disposición, escoge la estructura de una columna.
- En Elementos, añade un elemento de tipo "Texto" para introducir en el contenido y edítalo a tu gusto.
- En Elementos, añade un elemento de tipo "Productos" para mostrar los productos recomendados y haz clic en el botón (Editar elemento) :
- Asígnale un nombre, un tipo (en este caso, Carrusel), y una plantilla (en este caso, Producto con marca).
- En estructura, escoge cuántos elementos se mostrarán a la vez, tanto en escritorio como en móvil. En el ejemplo se han seleccionado 4 en escritorio y 1 en móvil.
- Escoge, de forma opcional, un tiempo de rotación. En caso de indicar 0, la rotación automática estará desactivada.
37. 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
38. Selecione o conteúdo Inline correspondente e clique em Próximo .
39. Localize em seu site o seletor apropriado para exibir o conteúdo. Você pode seguir os passos deste exemplo:
-
Acesse a página do seu site onde deseja adicionar o conteúdo incorporado.
-
Visualize o bloco que deseja usar como referência.
-
Abra a ferramenta de desenvolvimento do navegador (DevTools).
-
Selecione a aba Elements na ferramenta para visualizar a estrutura HTML.
- Clique no ícone Inspect, o primeiro à esquerda no menu superior.
- Passe o mouse sobre a área do conteúdo que planeja usar como referência. Clique quando a seleção estiver correta para que a etiqueta seja destacada na ferramenta.
- Clique no conteúdo da aba Elements da ferramenta e use o atalho de teclado Control + F para pesquisar o nome da etiqueta ou atributo. Se houver apenas uma correspondência (como neste exemplo), você pode usar. Nesse caso, copie o nome e feche a ferramenta de desenvolvimento. Se houver mais de uma correspondência, você precisará encontrar outro seletor exclusivo.
40. Depois de localizar e copiar o seletor, volte para a configuração do nó "Enviar conteúdo web" no Connectif, adicione-o em Configuração para exibir o conteúdo e clique em Próximo . (Na captura, continuamos com o exemplo anterior; você deve fornecer o nome do seletor escolhido).
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 e-mail (coluna direita):
- Arraste o campo Nome para corresponder à variável {{name}}. Dessa forma, essa variável conterá o nome do produto que aparece em seu catálogo.
- Arraste o campo URL do detalhe para corresponder à variável {{buttonUrl}}. Dessa forma, essa variável conterá o link para a página do produto em seu catálogo.
- Arraste o campo URL da imagem para corresponder à variável {{imageUrl}}. Dessa forma, essa variável conterá a imagem do produto.
- Arraste o campo Preço unitário para corresponder à variável {{unitPrice}}. Dessa forma, essa variável conterá o preço unitário atual desse produto.
- Arraste o campo Literal para corresponder à variável {{buttonText}} e insira nele o texto que deseja que o botão exiba. Dessa forma, essa variável conterá o texto do botão que você definiu.
42. Clique em Concluir .
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, de forma que se conecte com o nó "Verificar valor".
44. Na união deste nó com o anterior, clique no círculo até que apareça "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 à direita e "Produtos mais vendidos" para o caso de uso adicional. Dessa forma, os produtos mais visitados serão obtidos e, se estes não forem suficientes, os mais vendidos serão obtidos. Clique em Próximo .
47. Em Configuração do caso principal, complete a seguinte configuração:
- Indique "12" em Quantidade de produtos a serem obtidos, para que o Connectif obtenha até 12 itens.
- Em Selecione a origem dos produtos, selecione Todos os produtos, para que o Connectif procure em todo o seu catálogo os produtos a serem exibidos.
- Em Configure 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 “Selecione um dado importado”, escolha “Ao visitar um produto > Categorias”. Dessa forma, o Connectif obterá produtos da mesma categoria que o visitado.
- Clique em Adicionar outra condição e selecione no menu suspenso “Marca”. À direita, selecione “Está incluído em” e, após clicar em “Selecione um dado importado”, escolha “Ao visitar um produto > Marca”. Dessa forma, o Connectif obterá produtos da mesma marca que o visitado.
- Em Selecione 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 dos produtos exibidos varie sempre.
48. Clique em Próximo .
49. Em Configuração do caso adicional, complete a seguinte configuração:
- Selecione "12" em Quantidade de produtos a serem obtidos.
- Clique em Adicionar outra condição e selecione no menu suspenso “Categorias”. À direita, selecione “Dados importados” e, após clicar em “Selecione um dado importado”, escolha “Ao visitar um produto > Categorias”.
- Em Selecione 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, em Resumo, localize a seção Quantidade de produtos a serem obtidos 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 .
PASSO 7. Segundo nó "Enviar conteúdo web"
Como criar o inline para esta estratégia
(Neste passo, você enviará o mesmo inline que criou 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 apropriado para mostrar o conteúdo e clique em Próximo . Se precisar de mais informações sobre como localizá-lo, você pode voltar para Passo 5 para encontrar como fazer isso.
56. Associe as variáveis de 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 .
Resultado
Após completar os passos, você terá criado sua estratégia para mostrar um inline recomendador que aparecerá após o ficha 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, onde você criará em sua conta uma estratégia de remarketing.
Leituras relacionadas
Se você quiser se aprofundar em algum dos aprendizados adquiridos nesta lição, você 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 em sua loja virtual, caso você tenha alguma dúvida sobre como localizar e inserir o ID. E, se você tiver VTEX IO, siga os passos deste artigo para adicionar conteúdos web.
- Mostrar porcentagem de desconto apenas quando houver desconto, para aprender como destacar os produtos quando estiverem com desconto em relação a outros que não estão.