Smart Elements_Cover Image
20 julho 2021

Automação da Produção de Email, ou Como Utilizar Elementos Inteligentes em Email Marketing

Crie e-mails profissionais
Índice
  1. O que são Elementos Inteligentes, ou como eles funcionam?
  2. Criando um cartão de produto
  3. Configurando os Elementos Inteligentes
  4. Salvando este cartão de produto para reutilizar em futuras campanhas de e-mail
  5. Considerações finais
1.
O que são Elementos Inteligentes, ou como eles funcionam?

Imagine criarum cartão de produto com o design que você realmente gosta, gastando apenas alguns cliques!

Tudo que você tem a fazer é colar um link em seu site, e a Stripo trará a imagem, a descrição e o nome do produto para seus e-mails promocionais.

Não há necessidade de salvar e carregar imagens, não há necessidade de copiar e colar descrições de produtos, adicionar as URLs necessárias aos botões - nós cuidadomos disso.

Parece um sonho virando realidade?

Bem, agora vamos lhe mostrar como começar a usar esta mágica em e-mails

Automatize a produção de e-mails com Stripo
Junte-se a nós

O que são Elementos Inteligentes, ou como eles funcionam?

Elementos Inteligentes são uma funcionalidade criadas pela Stripo. Ela permite automatizar a produção de e-mails. É uma verdadeira economia de tempo para aqueles que constroem vários cartões de produtos e emails de compilações. Você os configura uma vez e os utiliza em inúmeras campanhas promocionais.

Em um dos posts anteriores, nós já mostramos como trabalhar com nossos Smart Elements.

Você precisava definir regras internas e externas para que o sistema recuperasse e puxasse as informações de correção para os respectivos elementos de seus e-mails.

Mas desta vez é muito mais fácil começar a usar os Elementos Inteligentes.

Se seu site contém tags OG, basta colar o link ao produto e especificar para onde exatamente no e-mail certas informações sobre o produto devem ir. Você levará menos de 5 minutos - apenas uma vez. Da próxima vez, ao usar os Smart Elements novamente, você só precisará colar o link para o produto sem necessidade de configuração.

Nossos Elementos Inteligentes atualizados são totalmente compatíveis com os seguintes websites:

  1. Ebay.com.

  2. Aliexpress.com.

  3. Walmart.com.

  4. Etsy.com.

  5. Medium.com.

  6. Pocket.com.

  7. Vk.com.

  8. Reddit.com.

  9. Linkedin.com.

Como você verifica se seu site contém elementos inteligentes

If your website is not on the list given above, you need to check if it supports the OG — Open Graph — tags:

  • Clique com o botão direito sobre seu website;

  • Clique Ctrl+F no Windows, ou CMD+F no macOS;

  • entre “og:”;

  • se você localizar algum dentro do código, então seu site o suporta.

Tag OG

Caso seu site não suporte as tags OG, por favor, consulte nossa postagem  “Elementos Inteligentes reduzem o tempo gasto na criação de e-mails semelhantes” no blog para o manual sobre como trabalhar com os Elementos Inteligentes neste caso.

Para aqueles, cujo website suporta as tags OG, preparamos um breve manual sobre como configurar os elementos inteligentes em menos de 10 minutos.

Vamos começar?

Criando um cartão de produto

A primeira coisa que você precisa fazer é montar um cartão de produto com todos os campos que você precisa. 

Lembre-se que se você quiser o nome e a descrição de um produto, você precisa arrastar duas vezes o bloco básico "Texto" em seu cartão de produto (um para o nome e outro para a descrição).

Em seguida, você cria cada elemento da do bloco de produto da maneira que quiser - você define o tamanho da fonte para cada elemento individualmente, trabalhando na cor e forma de seu botão, etc.

Para fazer isso, você precisa adicionar uma imagem "placeholder" e um texto "lorem ipsum" em cada respectivo elemento.

É importante que todos os blocos estejam localizados dentro de um mesmo container! 

Elementos inteligentes_Criação de um cartão de produto

Ou em uma estrutura, caso queira que seu cartão/postal de blog use toda a linha de e-mail.

Estruturas como cartões de produto

Configurando os Elementos Inteligentes

Assim que terminar com o protótipo do cartão do produto, você pode prosseguir para a configuração dos elementos inteligentes.

Passo 1. Ativando esta opção

  • clique sobre o ícone “Container” / ”Estrutura” no template;

  • no painel Configurações, entre na guia “Dados”;

  • e clique no botão “Começar”.

Ativando a opção de elementos inteligentes

Passo 2. Configuração de Elementos Inteligentes

Na guia “Configuração”,você deve:

  • adicionar as variáveis ​​necessárias clicando no ícone “Mais”;

Configuração de Elementos Inteligentes_Adicionando Variáveis

  • o sistema adicionará as variáveis ​​necessárias automaticamente. 

Informamos que a integração atual com Amazon, eBay, Etsy, etc. recupera os dados da seguinte forma: nome do produto, descrição e imagem. Os preços, adicionaremos manualmente. Ainda assim, você pode adicionar o campo "Preço" ao cartão do produto - mostraremos mais tarde como editá-lo.

Etapa 3. Definindo as Regras de Correspondência

Boas notícias! Stripo cuida das regras externas. Sendo assim você terá que definir manualmente apenas as internas.

URL para uma página de produtos

Se feito corretamente, o link para a página do seu produto será adicionado à imagem do produto e no botão CTA em seu cartão de produto. Ao clicar neles, os usuários serão direcionados para a página respectiva em seu site.

Portanto, para definir regras internas para o URL, você precisa:

  • abrir as configurações necessárias acessando a guia “URL”;
  • no campo de entrada “Seletor de CSS”, inserir “a”;
  • no campo de entrada “Atributo”, inserir “href”.

Trabalhando no Regulamento Interno para Links

Nome do Produto

Se feito da maneira certa, o nome do produto será automaticamente trazido para o e-mail do seu site.

  • abrir a guia “p_name”;
  • rolar para baixo para inserir a variável “.p_name” no campo de entrada “Seletor CSS”. É importante que você o adicione com o ponto (.) No início;
  • agora clique no nome do produto no modelo de e-mail para abrir o código HTML;
  • cole class = "p_name" na tag de abertura <p>.

Adicionando classe para o nome do produto

Você pode dar a essa classe qualquer outro nome. Deve ser único e coincidir com a variável que você definiu no campo de entrada Seletor CSS.

Existe outra maneira de conectar e-mails ao seu site para recuperar nomes de produtos.

Se você aplicou qualquer título ao nome do seu produto, assim como eu usei o Título 2, basta inserir “h2” (ou h3, h4, h5) no campo de entrada Seletor CSS. E NÃO adicione nada ao código.

Trabalho em variáveis para o nome do seletor CSS

Descrição do Produto
Se feito corretamente, a descrição do produto necessária será trazida para o e-mail do seu site.
  • vá para a guia “p_description”;

  • insira a variável “.p_description” no campo de entrada “seletor CSS”. Importante que você o adicione com o ponto (.) no início;

  • agora clique na área de descrição do produto no modelo de e-mail para abrir seu código HTML;

  • cole class = "p_description" na tag de abertura <p>.

Adicionando as tags de descrição no código de e-mail

Assim como no parágrafo anterior, gostaria de dizer que você pode usar qualquer nome para a classe. É com você. Apenas certifique-se de que o mesmo nome foi usado no campo de entrada Seletor CSS.

O mesmo se aplica ao parágrafo abaixo.

Imagem do produto

Se feito corretamente, a imagem do produto será trazida para o e-mail do seu site.

  • vá para a guia “p_image”;
  • insira a variável “.p_image” no campo de entrada “seletor CSS”. Importante que você o adicione com o ponto (.) No início;
  • insira “src” no campo Atributo;
  • agora clique na imagem no modelo de e-mail para abrir seu código HTML;
  • cole class = "p_image" na tag de abertura <img> antes de src.

Adicionando atributos para imagens

Passo 4. Colando sua URL

Agora que você configurou seu Smart Element, você pode colar o link para o produto no campo de entrada “Link”. Você pode escolher as guias “Configuração” ou “Aparência” - o campo de entrada é mútuo para ambas as guias.

Colando URL para o Produto no Campo de Entrada de Link

Veja a mágica em ação.

Passo 5. Editando preços

Como mencionamos anteriormente, a integração atual com Amazon, Etsy, eBay, Walmart e AliExpress não permite a recuperação de preços por meio de Smart Elements.

Mas se você adicionar este campo ao seu cartão de produto com os Smart Elements, pode ser um pouco mais fácil para você editar o preço.

Depois de colar o link n página do produto, na guia Aparência, você edita o preço no campo em destaque. Os estilos de design que você definiu anteriormente serão aplicados imediatamente.

Editando preços para elementos inteligentes

Salvando este cartão de produto para reutilizar em futuras campanhas de e-mail

  • primeiro, você precisa duplicar o “cartão do produto” se quiser ter dois ou mais cartões por linha;

  • em seguida, destaque toda a estrutura e clique no botão “Salvar como um módulo”;

  • dê um nome a este módulo;

  • quando for iniciar uma nova campanha, basta apenas puxar este Módulo de seu armazenamento de Módulos pessoal para o template;

Usando módulos com elementos inteligentes em campanhas futuras

  • cole o link nos produtos. 

Pronto!

Considerações finais

A opção Smart Elements acelera a produção de e-mail, especialmente para empresas de comércio eletrônico que enviam e-mails promocionais com bastante frequência.

Caso precise de ajuda com a configuração do Smart Elements para seus e-mails, deixe um comentário abaixo ou envie um e-mail para contact@stripo.email.

Economize seu precioso tempo com Stripo
Este artigo foi útil?
Tell us your thoughts
Obrigado pelo seu feedback!
2 comentários
Karina há 3 anos
Цікава стаття
Hanna Kuznietsova há 3 anos
Дякую ?
Tipo
Indústria
Estações
Integração
Editor da Stripo
Simplifique o processo de produção de e-mail.
Plug-in da Stripo
Integre o editor arrastar e soltar da Stripo ao seu aplicativo da web.
Solicite um modelo personalizado
Nossa equipe pode criá-lo e programá-lo para você. Basta preencher o briefing, e entraremos em contato com você em breve.

Editor da Stripo

Para equipes de marketing por e-mail e criadores solo.

Plug-in da Stripo

Para produtos que poderiam se beneficiar de um desenvolvedor de e-mails integrado de white-label.