Solução de problemas de e-mails HTML

Use esta página para resolver problemas comuns do editor de e-mail HTML e de envios de teste. Para Inbox Vision e entregabilidade, consulte Inbox Vision e Configuração de e-mail.

Comece aqui: identifique seu sintoma

Identifique seu sintoma na tabela para navegar até a seção relevante.

Caminho de investigação padrão

Use este fluxo de trabalho quando a renderização do e-mail HTML ou o comportamento do editor não corresponder ao esperado. Comece pela etapa 1.

1. Valide sua marcação HTML no editor ou em um validador externo.
2. Envie um e-mail de teste e anote quais clientes de e-mail ou navegadores apresentam o problema.
3. Pré-visualize com o Inbox Vision para comparar a renderização entre clientes.
4. Descarte conflitos de extensões de navegador se o próprio editor estiver se comportando de forma estranha.
5. Se o problema persistir, abra um ticket de suporte com capturas de tela do Inbox Vision e dos clientes afetados.

HTML renderiza incorretamente em e-mails de teste

Sintoma: Um e-mail de teste não corresponde ao que você espera do editor.

Verifique primeiro a configuração do seu HTML e, em seguida, revise conflitos de extensões, renderização de e-mail, inlining de CSS e espaço em branco abaixo das imagens.

Conflitos de extensões

Certas extensões de navegador podem causar problemas com o editor de e-mail. Um exemplo é o Grammarly quando usado com o Google Chrome. Se você estiver usando uma dessas extensões, deve:

• Editar e-mails da Braze em um navegador que não tenha o Grammarly como extensão
• Entrar em contato com o gerente da sua conta na Braze e solicitar a troca dos editores de e-mail para somente HTML ou texto simples.

A visualização em texto simples remove o editor WYSIWYG (o que você vê é o que você obtém), então confirme primeiro que todos os membros da equipe estão confortáveis com HTML antes de fazer essa solicitação.

Renderização de e-mail

Os e-mails são renderizados de forma diferente dependendo dos navegadores e clientes de e-mail, então anote em quais navegadores e clientes de e-mail você está enfrentando problemas.

• Pré-visualize seus e-mails usando o Inbox Vision para ver como seus e-mails aparecem em diferentes navegadores e clientes de e-mail.
• Depois de identificar quais navegadores ou clientes de e-mail estão causando problemas, informe sua equipe de desenvolvimento que será necessário modificar o HTML e fazer ajustes para acomodar esses navegadores ou clientes de e-mail.

Inlining de CSS

Há momentos em que as prévias no Inbox Vision ainda não correspondem ao que é enviado pela Braze. Isso pode ser causado pela diferença no inlining de CSS realizado pela Braze e por outras ferramentas. Se você suspeitar que esse é o caso, desative o inlining de CSS.

Espaço em branco abaixo das imagens

Sintoma: Espaço em branco ou linhas aparecem após imagens em e-mails de teste.

Se você notar espaço em branco ou linhas aparecendo após imagens nos seus e-mails de teste, isso geralmente é causado pela forma como os clientes de e-mail renderizam elementos inline. As imagens são inline por padrão e são alinhadas à linha de base, o que permite que os navegadores acomodem descendentes (a parte de letras como “g” ou “y” que se estendem abaixo da linha de base). Isso cria um pequeno espaço que aparece como espaço em branco.

Para corrigir isso, adicione display: block; ao CSS da sua imagem:

1
2
3
4
5
<style>
  img {
    display: block;
  }
</style>

Alternativamente, aplique o estilo diretamente a imagens específicas:

1
<img src="https://example.com/image.jpg" style="display: block;" alt="Image description" />