Avant de commencer, veuillez vous assurer de lire nos lignes directrices.
Visual Content Editor (VCE), basé sur les blocs, a un moteur de validation de modèle d'email intégré et un générateur de code HTML d'email. Ces outils vous aident à identifier tout problème de formatage ou de contenu qui pourrait affecter vos objectifs marketing et de délivrabilité.
Comment fonctionne la validation de modèle ?
Le moteur de validation et le générateur d'email sont intégrés dans l'éditeur basé sur les blocs. Quand vous créez un nouveau modèle ou en modifiez un déjà existant, il compare votre code HTML à nos lignes directrices et vous avertit en temps réel via un message affiché dans le panneau d'aperçu live s'il détecte un problème quelconque.
Étendez les messages d'avertissement de validation pour obtenir une description plus détaillez des erreurs. Chaque description d'erreur individuelle contient un lien qui vous emmène à la trame ou au bloc dans lequel le problème a été trouvé, pour que vous puissiez le résoudre.
Tant qu'il y a des problèmes avec la syntaxe de votre modèle, vous ne pouvez pas l'utiliser pour la création de campagne. Sur la page modèles, la vignette d'un modèle erroné est marquée d'un point d'exclamation orange associé à un message d'erreur.
Le générateur d'email
Le générateur d'email est intégré à l'étape de création de contenu du flux de création mail. Le moteur de générateur d'email a les fonctionnalités améliorées suivantes :
- Compiler plus efficacement l'email à partir du code brut des blocs de contenu et le générer pour lancement.
- La correction d'erreur est améliorée et peut détecter et corriger la majorité des erreurs de syntaxe toute seule.
- Aligner le CSS pour faire apparaître l'email dans différentes boîtes de réception sans problèmes de compatibilité.
- Vous assurer d'avoir des codes HTML, CSS et ESL à la syntaxe valide générés par les blocs de contenu.
Il se peut que le générateur d'email traduise le HTML différemment, mais il le fait toujours de sorte à maximiser le conformité aux normes HTML actuelles.
Ces processus sont exécutés en arrière-plan. Vous pouvez consulter le résultat final dans le panneau d'aperçu live et dans l'email envoyé, par exemple au moment d'envoyer les emails test avant lancement.
Détecter des erreurs
L'aperçu d'email peut changer si le code HTML ou ESL contient des éléments qui ne sont pas entièrement valides. Dans ce cas, l'erreur doit être corrigée dans le code, par exemple dans le modèle ou dans le code ESL écrit pour la campagne.
Pour vous assurer que l'email est affiché correctement dans toutes les boîtes de réception, corrigez les erreurs survenues selon l'aperçu du générateur.
Avantages du générateur d'email
Comme le générateur d'email effectue des corrections et des ajustements automatiques au code HTML, CSS et ESL en arrière-plan, vous aurez des codes sans erreurs et valides dans le système.
Avantages
- Améliorer la délivrabilité
- S'assurer que votre campagne email s'affiche correctement dans toutes les boîtes de réception.
- Générer des codes valides.
Le générateur d'email n'affecte pas les campagnes déjà en cours d'exécution.
Le générateur d'email suit les cas suivants :
- Créer une nouvelle campagne email en utilisant un modèle d'email.
- Interpréter le code des blocs de contenu pour afficher dans l'aperçu en boîte de réception.
- Ajouter des tokens à vos campagnes :
- Token ESL
- Token de personnalisation (modifiables, codes facultatifs)
- L'aperçu d'email affiche quelque chose de suspect ou incorrect.
Résolution des problèmes
Utilisez l'éditeur VCE avec le générateur d'email allumé :
1. Vérifiez les éléments suivants dans votre campagne email :
a. Examinez chaque problème visible dans l'aperçu.
b. Vérifiez le bon fonctionnement de vos liens.
2. Envoyez un email test avant lancement, pour vérifier le résultat final.
Si vous rencontrez le moindre problème
1. Assurez-vous d'utiliser un code HTML/CSS valide dans votre modèle ou un code-ESL à la syntaxe valide. Par exemple, penchez-vous sur les problèmes indiqués dans Erreurs les plus fréquentes.
2. Corrigez les problèmes dans le modèle (ou dans l'ESL) et actualisez votre campagne avec les changements.
3. Testez la campagne dans l'aperçu live VCE, et aussi en envoyant un email test pour vous assurer qu'il rend bien comme dans l'aperçu.
Si vous rencontrez un problème quelconque mais n'arrivez pas à le résoudre seul, demandez assistance au Support Emarsys. Décrivez le problème en fournissant du contexte concernant l'aperçu.
Erreurs les plus fréquentes
Dans l'éditeur HTML basé sur les blocs, voici les problèmes de balise HTML les plus fréquents :
| Problème | Exemple |
|---|---|
| Balises de clôture manquantes, incorrectes ou invalides dans les éléments HTML. | </<td>, </<span |
| Absence d'attributs | href=https://bestrun.com/\" |
| Attributs vides. | <a href= > |
| Structures HTML invalides. |
Les balises <p> et <ul> sont dans une autre <p> <table> dans une <p> <table> dans un token ESL <div> dans une <p> |
Combinaisons de code de bloc valides
Dans l'éditeur de bloc, les erreurs le plus fréquentes sont attribuables à l'utilisation d'éléments racines invalides dans le code HTML.
Les blocs que vous ajoutez à votre modèle sont représentés par le token #body# dans le code de votre trame. Quand vous créez ou modifiez les blocs, vous devez penser à la manière dont le token #body# est imbriqué dans le HTML de la trame du modèle, étant donné que l'élément parent de #body# détermine quelles balises HTML peuvent être les éléments de niveau supérieur, ou des éléments racines, dans les blocs.
Pour éviter les erreurs de bloc liées à l'utilisation d'éléments racines invalides, suivez ces règles simples qui couvrent les structures de trame les plus fréquentes.
Règle 1
Si vous choisissez <body> comme élément parent du token #body# dans la trame, utilisez toujours <table> et/ou <div> comme élément racine dans vos blocs.
| Trame | Racines de bloc |
|---|---|
...<body> #body#</body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Règle 2
Si vous choisissez <center> comme élément parent du token #body# dans la trame, utilisez toujours <table> et/ou <div> comme élément racine dans vos blocs.
| Trame | Racines de bloc |
|---|---|
...<body>... <center> #body# </center>... </body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Règle 3
Si vous choisissez <div> comme élément parent du token #body# dans la trame, utilisez toujours <table> et/ou <div> comme élément racine dans vos blocs.
| Trame | Racines de bloc |
|---|---|
...<body>... <div> #body# </div>... </body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Règle 4
Si vous choisissez <table> comme élément parent du token #body# dans la trame, utilisez toujours <tr> comme élément racine dans vos blocs.
| Trame | Racines de bloc |
|---|---|
...<body>... <table> #body# </table>... </body>... |
<tr> <td width= 10 > </td></tr><tr> <td>Content1</td></tr><tr> <td width= 10 > </td></tr> |
Règle 5
Si vous choisissez td comme élément parent du caractère de remplissage #body# dans la trame, utilisez toujours <table> et/ou <div> comme élément racine dans vos blocs.
| Trame | Racines de bloc |
|---|---|
...<body>... <table> <tr> <td> #body# </td> </tr></table>... </body>... |
<table> <tr> <td>Content 1</td> <td>Content 2</td> </tr></table><div> Content3</div> |
Erreurs de trame
Quand vous modifiez la trame de votre modèle, vous pouvez rencontrer les problèmes et les messages de validation suivants :
| Problème | Message d'erreur |
|---|---|
| Tokens manquants. | Erreur dans la "trame" ; token de #body# ou #style# manquant. |
| Tokens en doublon. | Erreur dans la "trame" ; tokens de #body# ou #style# multiples. |
| Tokens mal placés. | Erreur dans la "trame" ; token de #body# ou #style# imprévu. |
| Trame vide. | Erreur dans la "trame"; la trame est vide. |
Le token #body# est imbriqué dans l'élément tbody.* |
Erreur dans la trame ; <tbody> imprévu. |
* Actuellement nous n'autorisons pas cette combinaison de code dans la trame du modèle :
...<tbody> #body# </tbody> ...
Erreurs de bloc
Quand vous modifiez les blocs de votre modèle, vous pouvez rencontrer les problèmes et les messages de validation suivants :
| Problème | Message d'erreur |
|---|---|
| Le modèle n'a aucun bloc. | Le modèle ne contient aucun bloc. |
| Le bloc de modèle est vide. | Erreur dans un nouveau bloc ; élément racine du bloc manquant. |
| Le modèle contient une erreur de codage. | Le modèle contient des blocs invalides. |