Introduction
Que vous soyez un responsable marketing, un designer ou un développeur, travailler de manière collaborative pour créer des emails transactionnels attrayants n'a jamais été facile... jusqu'à aujourd'hui avec l'éditeur d’emails Mailjet :
Développeurs d'emails et responsables marketing peuvent maintenant concevoir des templates transactionnels soignés et percutants sans avoir à apprendre à coder :
- concevez votre email transactionnel par glisser-déposer ;
- prévisualisez-le en temps réel sur de nombreux appareils ;
- gérez vos templates dans la bibliothèque en ligne de votre entreprise.
Les développeurs disposent, quant à eux, de fonctions avancées pour créer des templates riches avec un contenu adapté aux destinataires :
- créez des sections conditionnelles grâce aux variables envoyées à Send API ;
- utilisez des blocs HTML ;
- ajoutez des boucles, des conditions, des arrays basés sur le langage de template de Mailjet ;
- convertissez les sections en langage de template d'un seul clic ;
- accédez à un échantillon de code (Curl, PHP, Ruby, Java, etc.) pour les tests et l'intégration ;
- téléchargez tous les templates en HTML.
Et n'oubliez pas, chaque template créé avec l'éditeur d’emails est adaptatif !
Créer un template transactionnel
À partir du menu principal, sélectionnez Transactionnel → Mes Modèles Transactionnels.
Cliquez sur le bouton « Créer un nouveau modèle » pour continuer.
Ensuite, choisissez un template de base qui vous servira de point de départ.
Saisissez un nouveau nom de template puis cliquez sur « Utiliser ce modèle ».
Nous arrivons maintenant à la partie amusante : la personnalisation du template dans l'éditeur d’emails ! Pour plus d'informations sur l'utilisation de toutes les fonctionnalités consultez notre guide.
Intéressons-nous maintenant aux fonctions avancées qui vous permettront de coder des emails transactionnels complexes…
Bloc HTML
Les blocs HTML sont un outil facile pour concevoir un bloc tel que vous le souhaitez et pour en visualiser un aperçu dans votre template d'email.
Vous pouvez ajouter des blocs HTML directement dans votre template.
Glissez le bloc HTML vers votre template. Cliquez dessus pour le sélectionner, puis cliquez sur le bouton 'HTML' dans la barre d'outils pour ouvrir la fenêtre de l'éditeur HTML et commencer à coder.
Langage de template
Le bloc langage de template vous permet d'utiliser des fonctionnalités de template avancées dans votre template transactionnel, notamment des boucles, des déclarations conditionnelles, des tableaux, etc.
Le langage de template de Mailjet est basé sur des syntaxes populaires (telles que Django et Twig), et il vous permet d'ajouter des éléments logiques à votre email afin d'y inclure des sections ou d'en retirer. (Développeurs : pour obtenir des informations détaillées sur la syntaxe, les variables et les fonctions, nous vous invitons à consulter notre Template Language Guide.)
Il vous suffit de cliquer sur le bloc langage de template et de le glisser vers votre template. Ensuite, double-cliquez dessus pour lancer l'éditeur de code langage de template.
Il ne vous reste plus qu'à coder !
Pour cet exemple, nous voulons envoyer un code de réduction à tous les clients ayant déjà passé au moins 5 commandes. La variable « totalorders », qui sera transmise à Send API, permet de rédiger la déclaration conditionnelle simple suivante :
{% if var:TotalCommande > "5" %}
Utilisez le code promo #1CUST pour profiter des 10% de reduction sur votre prochain achat !
{% endif %}
Lorsque vous avez terminé de coder, cliquez sur « Sauvgarder ».
Le bloc langage de template ne peut pas être visualisé directement dans l'éditeur d’emails, c'est pourquoi nous avons introduit le bouton « Masquer le code ».
Cette fonctionnalité vous donnera la possibilité de masquer le code dans le bloc Template Language et de le remplacer par du texte
ou même une image. Cela facilitera l'expérience d'édition globale, car le code ne sera pas affiché lors de la conception du modèle.
Pour tester votre code et voir à quoi il ressemblera, passez en mode Aperçu.
Sections conditionnelles
Grâce aux sections conditionnelles, vous pouvez afficher dans votre email des sections de contenu qui dépendront de la valeur de la variable envoyée à Send API.
Remarque : les sections conditionnelles sont disponibles uniquement pour les comptes Premium.
Par exemple, vous souhaitez envoyer une Offre spéciale exclusive aux clients habitant à New York avec l'email de confirmation de commande. Plus simplement : si la ville (la variable envoyée à Send API) est égale à New York (la valeur définie dans votre template transactionnel), alors afficher la section Offre spéciale exclusive lors de l'envoi de l'email.
Passez votre souris sur une section pour afficher sa condition actuelle. Par défaut, aucune section n'a de condition : « Toujours afficher cette section ».
Pour créer une condition : Cliquez à l'intérieur de la section pour la sélectionner, puis cliquez sur « ajouter une condition ».
Puis, complétez simplement les champs :
1) Cliquez Seulement si
2) Nom de la variable : nom du paramètre qui sera envoyé à Send API
3) Sélectionnez un opérateur dans la liste déroulante (est égal à, différent, etc.)
4) Saisissez une valeur (vrai, faux, valeur alphanumérique, etc.)
En reprenant notre exemple, voici la section conditionnelle « Offre spéciale exclusive » pour les clients résidant à New York :
Remarque : même si vous êtes limité(e) à une condition « if » simple, vous pouvez imiter une déclaration « if else » en créant une autre condition ayant la valeur opposée.
Passez la souris sur la section ou cliquez dedans pour afficher la condition.
Pour supprimer une condition : Sélectionnez la section en cliquant dessus, puis cliquez sur « éditer »...
Sélectionnez ensuite l'option « Toujours ».
Mode d'aperçu
Pour prévisualiser votre template, cliquez sur Aperçu & Test → Aperçu de l'email.
Le mode d'aperçu avancé vous permet de définir les valeurs de vos variables pour un aperçu réel de votre email transactionnel sur différents appareils (mobile, ordinateur).
Dans la fenêtre Aperçu des variables, l'éditeur d’emails a identifié les variables présentes dans votre email, y compris toutes celles définies dans les sections conditionnelles et dans les blocs de langage de template.
Il vous suffit d'ajouter des valeurs de balise dans la Liste des variables puis de cliquer sur « Mettre à jour les variables ».
Remarque : les sections conditionnelles ne peuvent pas être exécutées dans le mode d'aperçu. Vous devez vous envoyer un message test pour visualiser votre email transactionnel.
Envoyer un test
Avant d’envoyer un email test, veuillez renseigner l’objet de l’email et les informations sur l’expéditeur, si ce n’est pas déjà fait. Les informations saisies ici servent à générer l'échantillon de code à la fin du processus de création du template. Elles ne sont pas enregistrées avec celui-ci. Remarque : Vous devrez les saisir de nouveau à chaque fois que vous utiliserez le template dans Send API.
Puis cliquez sur « Aperçu & Test ».
Il existe deux options de test possibles :
-
Envoyer un email de test (identique à l'envoi d'une campagne de test)
Avant d'envoyer un email test, allez dans ‘Aperçu de l’email’ et entrez des valeurs de substitution pour toutes les variables que vous pourriez avoir. -
Utiliser Send API
Si vous sélectionnez le test avec Send API, une modale apparaîtra montrant les caractéristiques de la version du modèle que vous devez ajouter à votre appel API, ainsi qu'un exemple de code que vous pouvez facilement copier.
Résolution des problèmes liés aux emails de test
En utilisant des fonctionnalités de Templating Language dans l'éditeur d’emails, vous pouvez entrer par inadvertance une erreur de syntaxe. Si une erreur de syntaxe est détectée dans vos emails de test, Mailjet n'enverra pas votre message.
Voici quelques erreurs typiques de syntaxe :
- Une variable n'a aucune valeur par défaut dans le modèle, mais est utilisée dans un appel d'API
- Une variable manque à la requête Send API
Il est crucial de pouvoir résoudre les problèmes de votre modèle d’email transactionnel avant de le mettre en production. Avec l'éditeur d’emails Mailjet, vous recevez un message d'erreur lorsque votre modèle contient une erreur de syntaxe.
En cas d'erreur de syntaxe, le système d’analyse du Templating Language identifie le problème. Un email de templating-language-error@mailjet.com sera envoyé à l'adresse indiquée, comprenant le message d'erreur en corps de texte et la source du message original en pièce-jointe.
Voici des erreurs de templating courantes :
expression parsing error ## Unknown identifier: var:day ## near ## {{var:day ##
Variable manquante dans Vars : cette erreur est levée si votre template contient une variable sans valeur par défaut et que cette variable n’est pas intialisée lors de votre requête Send API. Le système ne pouvant substituer la variable par une valeur par défaut, il génère une erreurnot valid template ## near ## y}} ##
Fin manquante d’une balise de templating language. Ex : condition {% if var:day %}{{var:day}} sans la balise fermante {% endif %}"var:day" is not an array value
Tentative de boucle sur une variable, qui n'est pas un objet de type ‘array’
Une fois l'erreur de syntaxe trouvée et corrigée, il vous suffit d'envoyer un autre message de test.
Vous pouvez utiliser ce système de rapport d'erreur pour vos propres envois de messages transactionnels avec la Send API ou le SMTP. Ajoutez simplement les en-têtes suivants à votre requête d'envoi d'API :
-
MJ-TemplateErrorReporting : Adresse email à laquelle une copie conforme du message d'erreur est envoyée en cas d’erreur ; le message contiendra alors les en-têtes expliquant les erreurs identifiées dans le template
- MJ-TemplateErrorDeliver : Paramètre définissant si le message est envoyé au destinataire, même en cas d'erreur dans le modèle.
Par défaut, l'envoi de messages contenant les en-têtes d’erreurs est désactivé.
Consultez notre guide Transactional Templating Guide pour plus d'informations.
Publication et utilisation de votre template
Cliquez sur « Sauvegarder et publier ».
Félicitations pour la création de votre nouveau template transactionnel ! Pour vous aider à l'intégrer rapidement à vos environnements, nous vous proposons plusieurs échantillons de code : Curl, PHP, Node, Ruby, Python, Go, Java, C#
Remarque : vous devez définir les valeurs des variables dans l'échantillon de code. Nous vous recommandons donc de tester votre template en environnement de préproduction pour les définir et pour visualiser les données finales de vos emails transactionnels.
Et voilà – vous êtes prêt(e) à utiliser votre template en production !
Lectures complémentaires
- Transactional Templating (pour les développeurs)
- Getting Started with API (pour les développeurs)
- Créer vos campagne avec l'éditeur d’emails Mailjet
Pour toute question sur l'utilisation de l'éditeur d’emails Transactional, veuillez ouvrir un ticket auprès de notre équipe support !