📧👨🏻‍💻
Hacker le preview text de ses emails

En tant que consommateurs, nous recevons de nombreux emails commerciaux chaque jour. Nous choisissons de les ouvrir ou de les ignorer en fonction de plusieurs facteurs :

1. L’expéditeur (sender name) : Le nom de l’expéditeur nous indique qui envoie l’email et influence notre décision d’ouvrir ou non l’email.

2. Le moment de l’envoi : Nous sommes plus enclins à ouvrir les emails au moment où nous avons du temps pour les lire.

3. L’objet de l’email (subject) : L’objet doit être accrocheur et susciter notre curiosité pour que nous ouvrions l’email.

4. Le texte d’aperçu (preview text) : Le texte d’aperçu complète l’objet et peut aussi nous inciter à ouvrir l’email.

Le texte d’aperçu est important pour augmenter les taux d’ouverture, mais il est souvent négligé. Lorsque vous examinez vos emails commerciaux, vous remarquerez que la plupart du temps, le texte d’aperçu est une série de mots qui n’ont pas de sens : une phrase suivie du lien miroir / lien de désabo puis encore les 1ers mots de votre contenu.

Cela est dû à la façon dont les emails sont conçus en HTML et interprétés par les services de messagerie, qui affichent automatiquement les premiers éléments textuels.

Heureusement, il existe un moyen simple (un « hack ») pour contrôler le texte d’aperçu 👇

Solution A

<div style="display: none; max-height: 0px; overflow: hidden;">
&nbsp;
</div>
   
<!-- Insert &#847;&zwnj;&nbsp; hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;">
&#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy;
</div>

Solution B

<div style="display: none; max-height: 0px; overflow: hidden;">
Insert hidden preheader text here.
</div>
   
<!-- Insert &#847;&zwnj;&nbsp; hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;">
&#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy;
</div>