“On devrait notifier nos utilisateurs par email, cet email utiliserait la charte graphique de notre site.”
Cette phrase en apparence anodyne, cache une réalité bien sombre, le monde de l’emailing. Ce monde qui coexiste avec le nôtre est resté figé au siècle précédent :

“On devrait notifier nos utilisateurs par email, cet email utiliserait la charte graphique de notre site”

Cette phrase en apparence anodyne, cache une réalité bien sombre, le monde de l’emailing. Ce monde qui coexiste avec le nôtre est resté figé au siècle précédent :

• Styles “inlines”,
• Pas de scripts,
• Pas de formulaires,
• Utilisation des “table” pour la mise en page.

Tout ceci est notamment dû à la diversité de clients de messagerie, tous différents et plus ou moins anciens.

Pour illustrer cet article de blog, voici l’email que nous souhaitons envoyer :

Ce mail nous parait peut-être si simple, en revanche derrière son décor se cache un peu plus de complexité. Dans l’extrait de code présent ci-dessous, notons la quantité de code qu’il est nécessaire de rédiger pour s’assurer de la conformité sur l’ensemble des clients de messagerie et cela uniquement pour un simple bouton.

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;padding:10px 25px;background:#414141;" valign="middle">
<a href="https://blog.cellenza.com/" style="background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank">Accéder à l'article</a>
</td>
</tr>
</table>

Au-delà de la quantité de code à produire pour générer ce bouton, il faut aussi être vigilant aux robots anti-spam présents au travers de divers éléments comme par exemple l’aperçu du contenu avant l’ouverture, la limitation de l’HTML superflu, l’ajout d’une version texte, etc.

 

MJML, vers plus de compatibilité

Pour toutes ces raisons, MailJet a créé un framework open-source, il s’appelle “mjml”:

Ce framework permet de réduire le code à produire et s’assure de la bonne compatibilité avec la majorité des clients de messagerie.

 

 

Installation du framework

Pour initier le projet, il suffit d’avoir node.js d’installé et d’installer le package mjml via la commande suivante :

npm install mjml

 

Pour simplifier la création d’emails et uniformiser les styles, j’ai créé un composant  “header” qui sera inclut dans tous nos templates :

<mj-section css-class="header">
  <mj-column>
    <mj-text css-class="header-text">Cellenza</mj-text>
  </mj-column>
</mj-section>

 

Je créé ensuite un composant “footer” :

<mj-section css-class="footer">
  <mj-column>
    <mj-text>
      Ne loupez pas nos publications :
    </mj-text>
    <mj-social>
      <mj-social-element name="facebook" href="https://www.facebook.com/cellenzait">
        Facebook
      </mj-social-element>
    </mj-social>
</mj-section>

 

Ainsi qu’un composant “style”, contenant le CSS :

<mj-style>
  .body > div {
  font-family: Helvetica, Arial, sans-serif;
  background:#ffffff;
  }
</mj-style>

 

Après avoir crée les composants header, footer et style, mon arborescence ressemble finalement à ça :

 

Désormais, pour créer notre bouton, cet extrait de code nous suffira :

<mj-button href="https://blog.cellenza.com/" css-class="button">Accéder à l'article</mj-button>

 

Une fois satisfait, il suffit de générer le code HTML de l’email. Pour ce faire, j’ai créé un script pour exporter tous les templates à l’endroit désiré (paramètre exportDir) :

npm run mjml-export exportDir:export

 

Pour la partie des composants et de la mise en page, je vous invite à lire la documentation de mjml plutôt bien faite.

 

 

Utilisation de la plateforme Mailjet

Pour ce projet, je vais utiliser Mailjet comme plateforme d’emailing, j’apprécie le fait qu’elle offre différentes APIs, notamment pour envoyer des emails avec des templates prédéfinis. Dans l’extrait de code présent ci-dessous, vous pouvez constater que je fais appel à mon template.

POST https://api.mailjet.com/v3/send 
HEADERS : { 'Authorization': 'Basic Base64Encode(publickey:privatekey)} 
BODY : { 
"FromEmail": "noreply@cellenza.com", 
"FromName": "Le blog Cellenza", "Mj-TemplateID": 
"email-blog", 
"Subject": "Un nouvel article a été publié", 
"Mj-TemplateLanguage": true, 
"Recipients": [ { "Email": "user@domain.com" } ]
 }

 

Modification instantanée des templates mail

Mailjet permet aussi de de modifier ses templates à la volée, notamment grâce à son langage de templating et l’insertion de variables.
A titre d’exemple, nous allons l’utiliser pour insérer dynamiquement l’url de notre article dans le corps de l’email. Voici l’extrait de code de notre bouton :

<mj-button href="{{ var:articleUrl }}" css-class="button">Accéder à l'article</mj-button>

Il suffit alors ensuite d’ajouter la variable dans l’appel à l’API :

POST https://api.mailjet.com/v3/send 
HEADERS : { 'Authorization': 'Basic Base64Encode(publickey:privatekey)} 
BODY : { 
"FromEmail": "noreply@cellenza.com", 
"FromName": "Le blog Cellenza", "Mj-TemplateID": 
"email-blog", 
"Subject": "Un nouvel article a été publié", 
"Mj-TemplateLanguage": true, 
"Recipients": [ { "Email": "user@domain.com" } ], 
"Variables": { articleUrl: "https://blog.cellenza.com/developpement-specifique/web-developpement-specifique/mjml-simplifier-creation-template-emails/"}
 }

 

Gestion des templates avec l’API Mailjet

MailJet propose également une API permettant la gestion de ses templates, j’en ai profité pour développer un script afin d’industrialiser le déploiement de nos templates, le voici :

npm run mjml-deploy sourceDir:export publicKey:{mailjetPublicKey} privateKey:{mailjetPrivateKey}

 

Voici le fichier yaml de déploiement :

trigger:
- master
pool:
  vmImage: 'ubuntu-latest'

variables:
- group: 'blog-cellenza'
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'
- script: |
    npm install
    npm run mjml-export exportDir:export
    npm run mjml-deploy sourceDir:export publicKey:$(MailJetPublicKey) privateKey:$(MailJetPrivateKey)
  displayName: 'npm install, export, deploy'

 

Grâce à Mailjet et son framework open-source MJML, vous pouvez désormais gérer plus facilement vos templates d’email tout en vous assurant de leurs bonnes délivrabilité sur l’ensemble des clients de messagerie.

Si mon article vous a intéressé, vous pouvez aussi vous rendre sur mon github pour retrouver l’ensemble du code que je vous ai présenté.