Résolution des problèmes liés aux e-mails HTML
Utilisez cette page pour résoudre les problèmes courants liés à l’éditeur d’e-mails HTML et aux envois de test. Pour Inbox Vision et la livrabilité, consultez Inbox Vision et Configuration des e-mails.
Commencez ici : identifiez votre symptôme
Identifiez votre symptôme dans le tableau pour accéder à la section correspondante.
| Symptôme | Aller à |
|---|---|
| Le HTML de l’e-mail de test s’affiche mal | Le HTML s’affiche incorrectement dans les e-mails de test |
| L’éditeur se comporte de manière inattendue dans Chrome | Conflits d’extensions |
| L’e-mail s’affiche différemment selon les clients | Rendu des e-mails |
| La prévisualisation Inbox Vision ne correspond pas à l’e-mail envoyé | Insertion CSS |
| Espaces blancs ou lignes après les images dans les e-mails de test | Espace blanc sous les images |
Parcours d’investigation standard
Utilisez ce flux de travail lorsque le rendu d’un e-mail HTML ou le comportement de l’éditeur ne correspond pas à vos attentes. Commencez à l’étape 1.
- Validez votre balisage HTML dans l’éditeur ou un validateur externe.
- Envoyez un e-mail de test et notez quels clients de messagerie ou navigateurs présentent le problème.
- Prévisualisez avec Inbox Vision pour comparer le rendu entre les différents clients.
- Éliminez les conflits d’extensions de navigateur si l’éditeur lui-même se comporte de manière inattendue.
- Si le problème persiste, ouvrez un ticket d’assistance avec des captures d’écran d’Inbox Vision et des clients concernés.
Le HTML s’affiche incorrectement dans les e-mails de test
Symptôme : Un e-mail de test ne correspond pas à ce que vous attendez de l’éditeur.
Vérifiez d’abord votre configuration HTML, puis consultez les sections Conflits d’extensions, Rendu des e-mails, Insertion CSS et Espace blanc sous les images.
Conflits d’extensions
Certaines extensions de navigateur peuvent causer des problèmes avec l’éditeur d’e-mails. C’est par exemple le cas de Grammarly utilisé avec Google Chrome. Si vous utilisez l’une de ces extensions, vous devriez soit :
- Modifier les e-mails Braze dans un navigateur qui ne dispose pas de Grammarly comme extension
- Contacter votre gestionnaire de compte Braze et demander à passer vos éditeurs d’e-mails en HTML uniquement ou en texte brut.
La vue en texte brut supprime votre éditeur WYSIWYG (what you see is what you get). Assurez-vous donc que tous les membres de l’équipe sont à l’aise avec le HTML avant de faire cette demande.
Rendu des e-mails
Les e-mails s’affichent différemment selon les navigateurs et les clients de messagerie. Prenez donc note des navigateurs et clients de messagerie avec lesquels vous rencontrez des problèmes.
- Prévisualisez vos e-mails en utilisant Inbox Vision pour voir à quoi ressemblent vos e-mails dans différents navigateurs et clients de messagerie.
- Une fois que vous avez identifié les navigateurs ou clients de messagerie à l’origine des problèmes, informez votre équipe de développement qu’elle devra modifier le HTML et apporter des ajustements pour prendre en charge ces navigateurs ou clients de messagerie.
Insertion CSS
Il arrive que les prévisualisations dans Inbox Vision ne correspondent toujours pas à ce qui est envoyé avec Braze. Cela peut être dû à la différence d’insertion CSS effectuée par Braze et par d’autres outils. Si vous pensez que c’est le cas, désactivez l’insertion CSS.
Espace blanc sous les images
Symptôme : Des espaces blancs ou des lignes apparaissent après les images dans les e-mails de test.
Si vous remarquez des espaces blancs ou des lignes après les images dans vos e-mails de test, cela est généralement dû à la façon dont les clients de messagerie affichent les éléments de type inline. Les images sont de type inline par défaut et sont alignées sur la ligne de base, ce qui permet aux navigateurs d’accommoder les jambages (la partie des lettres comme « g » ou « y » qui descend sous la ligne de base). Cela crée un petit écart qui apparaît sous forme d’espace blanc.
Pour corriger ce problème, ajoutez display: block; au CSS de vos images :
1
2
3
4
5
<style>
img {
display: block;
}
</style>
Vous pouvez également appliquer le style directement à des images spécifiques :
1
<img src="https://example.com/image.jpg" style="display: block;" alt="Image description" />