Os blocos de produtos dinâmicos servem para mostrar recomendações personalizadas de produtos aos seus contatos. Isso permite que o conteúdo dos seus emails se adapte ao comportamento e ao ciclo de vida de cada usuário, mantendo-se atualizado e relevante, o que melhora as conversões.
Neste artigo, você aprenderá como criar um bloco de produtos personalizados em um email.
Tempo de implementação: 15 minutos.
Dificuldade: Baixa
Quando usar: Quando precisar mostrar produtos personalizados em seus emails.
Antes de ler este artigo, recomendamos dar uma olhada no Editor de email.
PASSO 1. Crie um design de email com um bloco de produtos dinâmico
1. Acesse "Conteúdos > Emails" e clique em Criar novo email.
2. Adicione um componente do tipo "Produtos", arrastando o bloco da aba Componentes para o editor.
PASSO 2. Personalize seu bloco de produtos
Você pode visualizar qualquer alteração durante o processo de criação e personalização de um bloco de produtos. Sempre que necessário, siga as instruções do PASSO 3 para validar suas mudanças antes de continuar com o próximo ponto.
2.1. Configuração básica
(Nesta seção serão definidos os dados identificadores e o estilo geral do bloco de produtos).
3. Clique em (Editar elemento) no menu contextual que aparece ao passar o mouse sobre o bloco inserido.
4. (Opcional) Em Nome do bloco de produtos, defina um título para identificar o bloco.
Se você utilizar mais de um bloco de Produtos, recomendamos dar um nome a cada um deles. Isso facilitará a atribuição de variáveis no workflow em que o conteúdo web for utilizado.
2.2. Configuração do modelo
(Nesta seção será definido o conteúdo do bloco de produtos).
5. Em Modelos, escolha entre as três opções padrão.
Os modelos incluem espaços designados para mostrar as informações essenciais de um produto: seu nome, imagem ou um botão para ir à sua ficha no eCommerce, entre outros dados do produto.
As principais características que os diferenciam são:
— Produto básico (tipo 1): inclui um espaço reservado para a descrição do produto.
— Produto com marca (tipo 2): inclui um espaço reservado para mostrar a marca do produto e outro para o seu preço.
— Produto com preço (tipo 3): inclui um espaço reservado para mostrar a descrição do produto e outro para o seu preço.
6. Use o editor para personalizar os estilos do modelo selecionado.
O editor do modelo permite tanto estilizar quanto adicionar elementos ao componente. Você poderá modificar, por exemplo, a tipografia, tamanho ou cores dos textos, além de adicionar imagens.
7. (Opcional) Clique em HTML para personalizar seu componente por meio de código, se necessário para seu design.
2.3. (Opcional) Criação de novas variáveis dinâmicas
(Nesta seção, serão definidas novas variáveis a serem utilizadas no bloco de produtos, caso deseje adicionar dados adicionais).
Quando o design do email for incluído em um workflow, será estabelecida a ligação entre os dados do fluxo e as variáveis do email por meio de um nó "Enviar email". Se quiser saber mais sobre esse tipo de nó, clique aqui.
8. No editor, clique no local do conteúdo onde deseja adicionar a variável.
9. Clique no botão Variáveis.
10. Em Identificador da variável, digite um nome para sua variável.
O identificador da variável não pode conter espaços e só pode incluir letras, números e os símbolos hífen ( - ) e sublinhado ( _ ). Também não pode conter acentos, pois são caracteres não permitidos.
No nosso exemplo, a variável foi chamada de "description".
11. Clique em Aceitar.
Ao criar a variável, o editor adicionará automaticamente as chaves duplas que a identificam.
12. Repita os passos 8 a 11 para cada variável que deseja adicionar.
Para excluir uma variável, selecione-a no editor, incluindo as chaves que a rodeiam, e pressione a tecla delete do seu teclado.
2.4. Configuração da estrutura
(Nesta seção será definida a quantidade de produtos a serem exibidos).
13. Em Estrutura, defina a quantidade de produtos que você deseja exibir no conteúdo.
A quantidade de produtos visíveis dependerá das linhas e colunas que você configurar, podendo ser diferente caso o contato acesse por computador ("Linhas em desktop" e "Colunas em desktop") ou por dispositivo móvel ("Linhas em celular" e "Colunas em celular").
No nosso exemplo, foram selecionadas 1 linha e 3 colunas em desktop, portanto serão exibidos 3 produtos quando o contato visualizar o email em um computador.
Se o usuário abrir o email no celular, o bloco também mostrará 3 produtos, porém cada um em uma linha separada.
14. (Opcional) Desmarque a caixa "Exibir linhas incompletas" para que os produtos sejam exibidos somente quando houver quantidade suficiente para preencher todas as colunas de uma linha.
No nosso exemplo, se desmarcarmos a opção "Exibir linhas incompletas", o conteúdo só será mostrado se houver dados de pelo menos 3 produtos.
PASSO 3. Visualize o design do seu bloco de produtos personalizado
Tenha em mente que tanto as novas variáveis criadas quanto as incluídas no modelo ainda não estão vinculadas a nenhum dado dos produtos, portanto, serão exibidas como texto fictício (placeholder).
A atribuição de dados às variáveis, que permite que o contato visualize o conteúdo, é feita a partir de um workflow.
15. Clique em (Visualizar).
16. Clique em (Visualização em desktop) e verifique se o design para computador está adequado à sua estratégia.
A visualização padrão do editor corresponde à de desktop.
17. Clique em Visualização em celular e verifique se o design em dispositivos móveis está adequado à sua estratégia.
18. (Opcional) Clique em (Enviar email de visualização) para avaliar a estrutura no seu cliente de email. Para isso, preencha os parâmetros de envio e clique no botão Enviar teste.
19. (Opcional) No seu cliente de email, verifique o email de visualização que você enviou.
O email de visualização serve para verificar a estrutura. Como não é enviado a partir de um workflow, esse email não contém o contexto do contato nem da navegação, por isso as variáveis do bloco de conteúdo não estarão vinculadas a produtos e os links especiais não funcionarão.
20. Clique em Cancelar, caso não tenha enviado um email de visualização.
21. (Opcional) Faça as alterações necessárias, repetindo os passos e pontos anteriores correspondentes, para que o design esteja de acordo com sua estratégia.
22. No editor, clique em Salvar.
Sucesso!
Seu bloco de produtos personalizado em um email está pronto.
Continue aprendendo!
Para aproveitar todo o potencial da sua conta na Connectif, recomendamos continuar com os seguintes artigos:
- Criar bloco de produtos personalizados em um conteúdo web, para criar e personalizar um bloco de conteúdo dinâmico em uma página da web.
- Mostrar produtos personalizados em um conteúdo, para vincular os dados coletados em um workflow com as variáveis de um conteúdo web.
- Mostrar percentual de desconto apenas quando existir desconto no email, para personalizar o comportamento do conteúdo dinâmico conforme o produto tenha ou não desconto.
- Carrinho abandonado + recomendações, para enviar um email aos contatos com os produtos deixados no carrinho e produtos relacionados.