Introdução
Para profissionais de marketing, designers ou programadores, nunca foi fácil trabalhar colaborativamente para criar e-mails transacionais que gerem engajamento... até que chegou o Editor de E-mails do Mailjet:
Os designers e profissionais de marketing que trabalham com e-mails agora podem criar modelos transacionais bonitos e impactantes sem precisar mexer em códigos:
- Crie seu e-mail transacional com uma interface de arrastar e soltar
- Pré-visualize seus e-mails instantaneamente em vários dispositivos
- Gerencie seus modelos na biblioteca on-line da sua empresa
Desenvolvedores também verão vantagens nos recursos avançados, podendo criar modelos detalhados que adaptam o conteúdo dependendo das características do destinatário:
- Crie seções condicionais usando variáveis enviadas para a Send API
- Use blocos de código HTML
- Adicione loops, condicionais e matrizes usando a linguagem de modelo do Mailjet
- Converta as seções elaboradas em linguagem de modelo com um só clique
- Acesse códigos de amostra (Curl, PHP, Ruby, Java, etc.) para testes e integração
- Baixe qualquer modelo como HTML
E lembre-se: os modelos criados com o Editor de E-mails têm um design nativo e responsivo!
Criar um modelo transacional
No menu principal, selecione Transacional → Meus modelos transacionais.
Clique no botão “Criar um novo modelo” para continuar.
A próxima etapa é selecionar um modelo de base.
Digite o nome do novo modelo e clique em “Usar este modelo”.
Agora a parte divertida... personalizar o modelo com o Editor de E-mails. Para detalhes de como usar todos os recursos, leia o nosso guia.
Vamos dar uma olhada nos recursos poderosos que permitem codificar e-mails transacionais avançados...
Bloco HTML
O bloco HTML é uma maneira fácil de elaborar seu modelo da forma que quiser e ver o resultado dinamicamente. Arraste o bloco HTML para seu modelo.
Clique no bloco para selecioná-lo e então clique no botão “HTML” na barra de ferramentas para abrir a janela do editor de HTML e começar a codificar.
Linguagem do modelo
O bloco de linguagem de modelo permite que você insira recursos avançados dentro do seu modelo transacional, incluindo loops, instruções condicionais, matrizes e muito mais.
A linguagem de modelo do Mailjet é baseada em sintaxes populares de modelos (como Django e Twig) e permite adicionar lógica ao seu e-mail para incluir ou remover seções do e-mail entregue. (Desenvolvedores: Para informações detalhadas sobre sintaxe, variáveis e funções, consulte nosso guia de linguagem de modelo.)
Basta clicar e arrastar o bloco de linguagem de modelo para o seu modelo. Então, clique duas vezes no bloco para abrir o editor de códigos da linguagem de modelo.
Agora, é só codificar!
Neste exemplo, vamos exibir um código de desconto para qualquer cliente que tenha feito pelo menos 5 pedidos anteriores. Usar a variável “totalorders”, que será enviada para a Send API, nos permite fazer esta declaração condicional simples:
{% if var:totalorders > "5" %}
Use este código de desconto #1CUST para ter 10% de desconto na sua próxima compra!
{% endif %}
Quando terminar a codificação, clique em “Salvar”.
Como não é possível visualizar dinamicamente o bloco “Linguagem de modelo” dentro do Editor de E-mails, introduzimos o botão “Ocultar código”.
Com essa funcionalidade, você terá a opção de ocultar o código no bloco “Linguagem de modelo” e de substituí-lo por um texto
ou até mesmo uma imagem. Isso facilitará a experiência geral de edição, pois o código não será exibido durante a criação do modelo.
Para testar o seu código e saber como ele ficará, passe para o modo de pré-visualização.
Seções condicionais
Com seções condicionais, você pode exibir seções de conteúdo no seu e-mail com base no valor da variável enviada com a Send API.
Observação: as seções condicionais estão disponíveis apenas para contas do Plano Premium.
Digamos que você queira exibir um Especial Exclusivo para clientes que moram em Nova York ao enviar o e-mail de confirmação de pedido. Simplificando, se a cidade (variável enviada para a Send API) for igual a New York (valor definido no seu modelo transacional), a seção Especial Exclusivo será exibida ao enviar o e-mail.
Passe o mouse sobre uma seção para ver a condição atual dela.
Por padrão, nenhuma seção tem condições: “Sempre mostrar esta seção”.
Para criar uma condição: clique dentro da seção para selecioná-la e então clique em “Adicionar condição”.
Em seguida, basta preencher os campos:
1) Clique em Apenas se
2) Nome da variável: o nome do parâmetro que será enviado para a Send API
3) Selecione um operador na lista suspensa (é igual a, não é igual a, etc.)
4) Insira um valor (verdadeiro, falso, alfanumérico, etc.)
Usando o exemplo mencionado acima, aqui está a seção condicional “Especial Exclusivo” para clientes que moram em Nova York:
Observação: embora você esteja limitado a uma simples condição “se”, você pode imitar uma instrução “senão” criando uma condição numa seção diferente com o valor oposto.
Veja a condição passando o mouse ou clicando na seção.
Para remover uma condição: clique na seção para selecioná-la e então clique em “Editar”...
Em seguida, selecione a opção “Sempre”.
Modo de pré-visualização dinâmica
Para pré-visualizar seu modelo, clique em “Pré-visualizar e testar → Pré-visualizar e-mail”.
O modo de pré-visualização avançada permite definir os valores das suas variáveis para uma pré-visualização dinâmica real do seu e-mail transacional em diferentes dispositivos (dispositivos móveis, desktop).
Na janela “Variables Preview” (Pré-visualização de variáveis), o Editor de E-mails identificou as variáveis presentes em seu e-mail, incluindo variáveis definidas nas seções condicionais e nos blocos de linguagem de modelo. Basta adicionar valores de espaço reservado na lista de variáveis e clicar em “Update variables” (Atualizar variáveis).
Observe que não é possível executar as seções condicionais no modo de pré-visualização. Para ver a versão final do e-mail transacional, você pode enviar uma mensagem de teste para o seu próprio e-mail.
Enviar um teste
Antes de enviar um e-mail de teste, digite o assunto e as informações do remetente, caso ainda não o tenha feito. Essas informações são utilizadas apenas para gerar o código de amostra e não são armazenadas com o modelo. (Observação: é necessário inserir essas informações sempre que o modelo for utilizado na Send API).
Agora clique em “Pré-visualizar e testar”.
Há duas opções de teste possíveis:
-
Enviar um e-mail de teste (o mesmo que enviar uma campanha de teste)
Antes de enviar um e-mail de teste, vá para “Pré-visualizar e-mail” e digite os valores de espaço reservado para todas as variáveis. -
Usar a Send API
Se você selecionar o teste da Send API, será exibido um modal indicando o atributo da versão do modelo que deve ser adicionado à sua chamada de API, além do código de amostra que você pode copiar facilmente.
Solucionar problemas nos seus e-mails de teste
Ao usar os recursos de linguagem de modelo no Editor de E-mails, você pode inserir um erro de sintaxe sem querer. Se for identificado um erro de sintaxe em seus e-mails de teste, a mensagem não será enviada pelo Mailjet.
Estes são alguns dos erros de sintaxe mais comuns:
- A variável não tem valor-padrão no modelo, mas é usada na chamada de API
- Está faltando uma variável na solicitação da Send API
É essencial conseguir solucionar os problemas do seu modelo transacional antes de utilizá-lo efetivamente. Com o Editor de E-mail, você receberá mensagens de erro quando seu modelo contiver erro de sintaxe.
Na verdade, quando ocorre um erro de sintaxe, o mecanismo de processamento da linguagem de modelo consegue identificar o problema. Será enviada uma mensagem de templating-language-error@mailjet.com para o endereço indicado, contendo a mensagem de erro no corpo e um anexo com a fonte da mensagem original.
Estes são alguns erros comuns de modelos:
expression parsing error ## Unknown identifier: var:day ## near ## {{var:day ##
Há uma variável que não foi definida em “Vars”. Esse erro pode ser corrigido adicionando um valor-padrão para a variável.
not valid template ## near ## y}} ##
Este erro ocorre quando falta um {% end if %}
"var:day" is not an array value
Este erro ocorre quando você está tentando fazer um loop em um valor que não é matriz.
Encontrado e corrigido o problema de sintaxe, basta enviar outra mensagem de teste.
Você pode usar o sistema de relatório de erros com suas próprias mensagens transacionais enviadas com a Send API ou SMTP API. Basta adicionar os seguintes cabeçalhos no seu pedido de envio de API:
- MJ-TemplateErrorReporting: endereço de e-mail para o qual é enviada uma cópia com mensagem de erro.
- MJ-TemplateErrorDeliver: define se a mensagem é entregue ao destinatário mesmo que seja descoberto um erro na linguagem de modelo.
Por padrão, fica desativada a entrega de uma mensagem por engano ao destinatário.
Confira nosso guia de modelos transacionais para mais informações.
Publicar e usar o seu modelo
Clique em “Salvar e publicar” na página principal de design.
Parabéns, seu novo modelo transacional está publicado e pronto para uso. Para ajudar você a integrar rapidamente seu modelo em seus ambientes, fornecemos vários exemplos de código: Curl, PHP, Node, Ruby, Python, Go, Java, C#.
Você precisa definir os valores das variáveis no código de amostra. É recomendado testar seu modelo em um ambiente de teste para que você possa definir os valores das variáveis e visualizar os dados finais nos seus e-mails transacionais.
Pronto. Você já pode usar seu modelo!
Leituras relacionadas
- Modelos transacionais (para desenvolvedores)
- Noções básicas de APIs (para desenvolvedores)
- Criar suas campanhas usando o Editor de E-mails do Mailjet
Se você tiver alguma dúvida sobre como usar o Editor de E-mails do Mailjet para e-mails transacionais, abra um chamado para a equipe de suporte.
Bons envios!