Aller au contenu principal

Comprendre les règles importantes

Afin de garantir le bon fonctionnement de votre e-mail, certains bonnes pratiques et recommandations doivent être prises en compte.

Editeur Actito​

Certaines bonnes pratiques sont strictement enforcées par l'éditeur HTML Actito.

De ce fait, il ne sera pas possible d'importer un fichier HTML ou de le coder directement si les contraintes suivantes ne sont pas respectées.

Ces contraintes s'appliquent également lors de la réalisation d'un template personnalisé par nos équipes.

Contraintes business​

Pas de liens relatifs​

Les liens définis par l'attribut href d'une balise HTML <a> ne peuvent pas être insérés sous forme de liens relatifs.

Tous les liens doivent être des URLs absolues, commençant par http(s)://, ou une personnalisation syntaxiquement correcte (${variable}).

Il est possible de combiner une personnalisation avec un chemin relatif, par ex. : "${variable}/fe/actito-documentation-client/campaign/en/ACTITO_Documentation.html" (voir Mettre en place les liens dans vos e-mails pour plus d'infos), mais les liens purement relatifs ne sont pas autorisés, pas plus que les URLs sans http(s):// (par ex. : "www.actito.com").

images/download/attachments/650477689/image2021-5-5_16-20-44.png

Exemple de code erroné

<a href="www.actito.com">Bad link</a>

Maximum 255 caractères dans le titre des liens​

L'attribut HTML title d'un lien (balise <a>) ne peut contenir que maximum 255 caractères.

L'attribut title a pour rôle d'apporter une information supplémentaire à l’intitulé du lien. Il s'agit pas d'une description exhaustive. Il se doit donc d'être concis, sans quoi il empêchera l'import d'un fichier HTML.

images/download/attachments/650477689/image2021-5-5_16-20-10.png

Exemple de code erroné

<a
  title="Zijdezacht satijn, borduurwerk met mysterieuze bloemen: ontdek onze nieuwe lingeriecollectie ge&#239;nspireerd op de verrukkingen van de Tuin van Eden. Trek deze weelderig bedrukte neglig&#233; aan en laat de delicate visnetten uw rondingen sublimeren. Bij ons draait alles rond orde en schoonheid, luxe, rust en wellust."
  href="https://www.actito.be/nl_BE/bh-s-hot-now-essentials-1"
  target="_blank"
></a>

Pièce jointe manquante​

Comme expliqué dans la fenêtre de l'import HTML, les images utilisées dans les e-mails peuvent être référencées :

  • Soit via des liens absolus (images hébergées sur un serveur tiers) et dans ce cas il suffit de charger un fichier HTML seul

  • Soit en incluant un dossier contenant les images dans un fichier zippé contenant également le fichier HTML (un par langue)

Dans le deuxième cas, les images peuvent être référencées de manière relative (ex. src="nom_Dossier/nom_Image.jpg").

Les images doivent être référencées directement pour être hébergées dans l'e-mail. Elles ne peuvent pas être encodées en base64.

Si l'HTML fait référence à une image qui n'est pas dans le dossier image (ou dans un autre dossier, ou nom de l'image/du dossier incorrect), vous rencontrerez une erreur de type "pièce jointe manquante" avec la référence de l'image manquante.

images/download/attachments/650477689/image2021-8-18_16-32-55.png

Exemple de code erroné

<img
  src="img/640x125.png"
  width="640"
  border="0"
  style="width: 640px; display: block; border: 0;"
  data-actito-img=""
  class="act-img"
/>

Contraintes CSS​

Pas de liens relatifs​

Les feuilles de style externes référencées dans les balises HTML <link> ne peuvent pas être définies sous forme de liens relatifs.

Tous les liens doivent être des URLs absolues, sans quoi la ressource sera considérée comme absente.

images/download/attachments/650477689/image2021-5-5_16-21-11.png

Exemple de code erroné

<link rel="stylesheet" href="/build/actito-style.aaae10e3.css" />
Astuce

Les images utilisées dans l'e-mail peuvent bien être référencées sous forme de lien relatif et stockées dans un dossier du fichier zippé contenant l'HTML (voir règle précédente).

En revanche, il s'agit bien ici des feuilles de style dans les règles CSS, où seuls les liens absolus sont autorisés.

Erreur de format d'une règle CSS​

Les règles CSS présentes dans les balises <style> doivent être formattée correctement. Une règle CSS consiste en un sélecteur et une déclaration. Le sélecteur pointe vers un élément HTML, la déclaration contient le nom de la propriété et la valeur associée (ex.: property: value;).

Si une règle CSS n'est pas valide, le token erroné sera signalé par le validateur Actito, et les possibilités de notation valides seront présentées.

A savoir

Le numéro de ligne en erreur signalé se rapporte à la balise <style> dans laquelle se trouve la règle erronée, pas à l'ensemble de l'HTML.

S'il y a plusieurs balises <style> dans le <head> de l'HTML, les lignes sont comptées séparément pour chacun d'entre eux.

Dans l'exemple suivant, le td à la ligne 21 (ce cette balise <style> spécifique) .root.one-cols>tbody>tr>td>{width:660px} ne doit pas être fermé et provoque une erreur.

La syntaxe correcte est .root.one-cols>tbody>tr>td{width:660px} .

images/download/attachments/650477689/image2021-5-5_18-50-51.png

Exemple de code erroné

<style type="text/css" id="editor_required_emailwidth" ee-render="inline">
  .email-full-width {
    width: 100%;
  }
  .email-body {
    min-width: 100%;
  }
  .email-width {
    max-width: 660px;
  }
  .row {
    max-width: 660px;
  }
  .row.one-cols {
    max-width: auto;
  }
  .row .row {
    max-width: 100%;
  }
  .row .row .row-inner {
    border-width: 0;
    padding: 0 0;
  }
  .row .row .row-inner.ee_basketcontent,
  .row .row .row-inner.ee_productcontent {
    padding: 10px;
  }
  .ee_dynamic .row-inner.element-pad {
    padding: 0 10px;
  }
  .col-inner {
    border-width: 0;
    padding: 0;
  }
  .sub-sub-col-inner {
    border-width: 0;
    padding: 0;
  }
  .element-pad {
    padding: 10px;
  }
  .element-pad.root-element-pad {
    padding: 10px 20px;
  }
  .el-pad {
    padding: 10px;
  }
  .el-pad.root-el-pad {
    padding: 10px 20px;
  }
  .row-inner {
    border-width: 0;
    padding: 0 10px;
  }
  .row-inner.ee_basketcontent,
  .row-inner.ee_productcontent {
    padding: 10px;
  }
  .element-bord {
    border-width: 0;
  }
  .el-bord {
    border-width: 0;
  }
  .one-cols > tbody > tr > td > .no-stack-column,
  .one-cols > tbody > tr > td > .stack-column {
    width: 100%;
    min-width: 100%;
    max-width: 640px;
  }
  .root.one-cols > tbody > tr > td > {
    width: 660px;
  }
  .two-cols > tbody > tr > td > .stack-column {
    max-width: 50%;
    min-width: 100%;
    width: 50%;
  }
  .two-cols > tbody > tr > td > .no-stack-column {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
  }
  .three-cols > tbody > tr > td > .stack-column {
    max-width: 33.333%;
    min-width: 100%;
    width: 33.333%;
  }
  .three-cols > tbody > tr > td > .no-stack-column {
    min-width: 33.333%;
    max-width: 33.333%;
    width: 33.333%;
  }
  .four-cols > tbody > tr > td > .stack-column {
    max-width: 25%;
    min-width: 100%;
    width: 25%;
  }
  .banner-padding {
    padding: 0 0;
  }
  .hero-image-padding {
    padding: 0 0;
  }
  .background-image-txt-mso {
    width: 680px;
    height: 175px;
    background-position: center center !important;
  }
  .bg-img-txt-width {
    max-width: 500px;
  }
  .bg-img-txt-text {
    padding: 0 0;
  }
  .col-font-reset,
  .ee_element,
  .font-reset {
    min-width: 100%;
  }
  .button-wrapper {
    min-width: auto;
  }
</style>

Contraintes de parsing​

Erreur de type "caractère inattendu"​

Un caractère inattendu au milieu des balises HTML peut bloquer le rendu de l'email.

Un caractère inattendu peut-être compris à la fois comme :

  • un caractère en trop dans le code. Par exemple, 2 doubles guillemets l'un à la suite de l'autre peuvent décaler le parsing de l'email.

  • à l'inverse, des guillemets manquants vont également décaler le parsing de l'e-mail.

  • ou un caractère manquant dans le code. Si dans le fragment href="https://www.actito.com", le signe "=" est manquant, le guillemet situé juste après le href sera considéré comme inattendu.

images/download/attachments/650477689/image2021-8-18_15-44-51.png

Cet exemple indique une erreur suite à un caractère erroné à la ligne 243. La colonne indique la position du caractère en question dans la ligne.

On remarque que le signe "=" est manquant après le href, ce qui fait que la notation du lien n'est pas valide.

Exemple de code erroné

<h2
  align="center"
  style="color: #000000;font-family: Arial;font-size: 20px;mso-line-height-rule: exactly;line-height: 114%;font-weight: bold;font-style: normal;text-transform: none;margin-top: 0.5em;margin-left: 0;margin-right: 0;margin-bottom: 0.5em;text-align: center;"
>
  <font color="#ffffff">
    <a
      data-order-id="28"
      target="_blank"
      style="color: #FFFFFF;font-family: Arial;font-size: 18px;font-weight: bold;font-style: normal;text-transform: none;text-decoration: none;"
      href="https://actitoservices.krxd.net/click_tracker/track?kxconfid=spqyu44mp&kxcampaignid=cliente&clk=${URL1}"
    >
      CALCULA TU PRECIO
    </a>
  </font>
</h2>

Attribut en doublon​

Un attribut en double dans une balise HTML peut bloquer le rendu de l'e-mail.

images/download/attachments/650477689/image2021-8-18_16-0-42.png

Dans l'exemple suivant, on constate que la balise img comporte deux fois l'attribut title, ce qui provoque une erreur.

Exemple de code erroné

<a href="https://actito.com/go/171365e3a997376117" target="_blank">
  <img
    align="center"
    border="0"
    class="center autowidth fullwidth"
    src="https://img.actito.com/repo-images/product/345846/01.jpg"
    alt="Actito Easy, le vitrage facile à nettoyer"
    title="Actito Easy, le vitrage facile à nettoyer"
    style="outline: none; -ms-interpolation-mode: bicubic; clear:both;height: 100%; float: none; width: 100%;max-width: 1100px; display: block;border-radius: 6px;"
    title="Image"
    width="168"
    height="137"
  />
</a>

Contraintes de sécurité​

L'utilisation de JavaScript dans un e-mail est hautement déconseillé et considéré une mauvaise pratique.

En effet, les scripts sont considérés comme une vulnérabilité de sécurité dans un e-mail, car les profils ne peuvent pas savoir quel type de script est déclenché quand ils ouvrent un e-mail. C'est très différent par rapport à l'utilisation de JavaScript dans un site web, car les profils peuvent choisir sur quels sites web ils naviguent et éviter les plus risqués. Au contraire, avec les e-mails, l'expéditeur a le plus de contrôle sur son contenu, et ouvrir un e-mail est vu comme une action sans risque par les profils... Si nous savons bien sûr que vous n'avez pas de mauvaises intentions envers vos profils, les webmails ne sont pas aussi confiants et veulent protéger leurs utilisateurs.

Par conséquence, l'utilisation de JavaScript dans un e-mail est un risque majeur pour la délivrabilité. Dans le meilleur des cas, le script sera bloqué par la politique de sécurité des webmails.

Mais le plus probable est que l'e-mail sera classifié comme spam, ou que le domaine d'envoi/l'adresse IP sera signalée pour tentative de hacking !

Pour ces raisons, le JavaScript n'est pas autorisé dans les e-mails Actito.

Balises de script​

Les balises utilisées pour ajouter un script en tant que tel ne sont pas autorisées (à la fois dans le CSS et le corps) : script, embed, iframe, object

images/download/attachments/650477689/image2022-8-4_14-48-18.png

Exemple de code erroné

<script type="text/javascript">
  (function(e, t, o, n, p, r, i) {
    e.visitorGlobalObjectAlias = n;
    e[e.visitorGlobalObjectAlias] =
      e[e.visitorGlobalObjectAlias] ||
      function() {
        (e[e.visitorGlobalObjectAlias].q =
          e[e.visitorGlobalObjectAlias].q || []).push(arguments);
      };
    e[e.visitorGlobalObjectAlias].l = new Date().getTime();
    r = t.createElement("script");
    r.src = o;
    r.async = true;
    i = t.getElementsByTagName("script")[0];
    i.parentNode.insertBefore(r, i);
  })(
    window,
    document,
    "https://diffuser-cdn.app-us1.com/diffuser/diffuser.js",
    "vgo"
  );
  vgo("setAccount", "90387794");
  vgo("setTrackByDefault", true);
  vgo("process");
</script>

Attributs d'événements​

Les attributs d'événements (event attributes) sont des attributs ajoutés à une autre balise (tel que des éléments de media ou de formulaire) qui ont la capacité de déclencher un script quand l'utilisateur fait une action dans l'e-mail.

Les attributs d'événements suivantes ne sont pas autorisés :

onafterprint, onbeforeprint, onbeforeunload, onhashchange, onload, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onresize, onstorage, onunload, onblur, onchange, oncontextmenu, onfocus, oninput, oninvalid, onreset, onsearch, onselect, onsubmit, onkeydown, onkeypress, onkeyup, onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onwheel, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onscroll, oncopy, oncut, onpaste, onabort, oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting, ontoggle

images/download/attachments/650477689/image2022-8-4_14-45-24.png

Exemple de code erroné

<a
  href="https://www.actito.be/actito-portal/images/logo"
  onerror="this.onerror=null;this.src='Images/logo/carousel_no_image.png';"
  target="_blank"
  data-actito-link-id="link_8"
>
  <img
    src="https://www.actito.be/actito-portal/images/logo.png"
    width="560"
    height="315"
    mc:edit="560_imges"
    class="full_img"
    alt="img_560X315"
    style="display:block; max-width:560px;"
    border="0"
  />
</a>

Expressions ajoutés à une balise​

Les scripts peuvent également être ajoutés aux attributs de certaines balises.

Il n'est pas permis d'utiliser une balise qui ont un attribut avec une valeur contenant l'un des éléments suivants : javascript:, eval( , expression(

images/download/attachments/650477689/image2022-8-4_14-54-17.png

Exemple de code erroné

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script type="text/javascript">
    window.onload = function() {
      // ww w . j ava2s . c om
      var x = document.getElementById("myP").textContent;
      eval("var e = " + x + ";");
      document.body.innerHTML = e();
    };
  </script>
</head>

Images SVG​

Etant donné que le format SVG est implémenté en XML, il peut contenir du CSS et du Javascript, ce qui autorise des attaques XSS si un script malicieux est inséré.

Il n'est dès lors pas possible d'utiliser des images SVG dans les e-mails.

images/download/attachments/650477689/image2022-10-21_16-2-24.png

Exemple de code erronné

<img
  src="happy.svg"
  alt="logo"
  width="165"
  style="font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:13px;display:block;border:none"
  class="t_w100p m_w100p"
/>

Compatibilité e-mail​

Certaines pratiques sont à proscrire de vos HTMLs car elles ne sont pas compatibles avec une partie ou tous les clients e-mail utilisables par vos profils. Ainsi, les éléments suivants ne sont pas supportés.

Liste des interdits car non supportés par tous les clients mails​

  • L’utilisation de feuilles de style externes

  • L’utilisation de formulaires

  • Les images au format bmp, tiff, pjpg

  • L’utilisation de Flash

  • L’utilisation de sons

  • L’utilisation des Map Area

Liste des éléments supportés par certains clients mails​

  • L’attribut ‘Rowspan’ sur les ‘td’

  • Les images de fond (‘background-image’)

  • Le tag ‘style’ dans le head