Comment coder un email de relance de panier abandonné ?

Pour commencer : qu’est-ce que MJML et le templating language ?

Si vous ne le savez pas encore, MJML est un langage open source utilisé pour le développement d’emails en responsive design. Ce langage permet de générer un HTML propre qui s’affiche correctement dans toutes les boîtes de réception. Il faut savoir qu’aujourd’hui, MJML est le framework d’email responsive le plus utilisé dans le monde entier, notamment par des grandes entreprises telles que The New York Times ou Ryanair.

Le templating language, quant à lui, vous permettra de donner vie à ces emails développés en MJML. Grâce au templating language, vous pouvez créer un seul modèle pour vos différents emails transactionnels, en insérant simplement des boucles conditionnelles et des variables. Le templating language est disponible dans plusieurs langages : PHP, Ruby, NodeJS, Python, C#, Java et Go, etc. Donc rien de plus facile pour l’utiliser !

Qu’est-ce qu’un bon email de relance de panier abandonné ?

L’idée de l’email de relance de panier abandonné est vraiment d’encourager les utilisateurs à passer à l’action, c’est-à-dire à aller au bout de l’acte d’achat. Un bon email de relance de panier abandonné doit inclure les éléments suivants :

• Un rappel des produits laissés dans le panier. Pour être efficace, votre modèle d'email doit afficher le panier abandonné tel qu'il apparaît sur votre site web, tant en termes de design qu'en termes d'articles laissés dans le panier. Facile à dire quand vous utilisez [ici le nom n'importe quel framework JS à la mode], mais comment faire cela dans un email ? La solution : utilisez les boucles et les variables du templating language directement dans votre email pour.

• Un incentive efficace, tel qu’une réduction sur les produits abandonnés ou d’autres avantages comme la livraison offerte. L’objectif est de donner un coup de pouce qui va motiver les utilisateurs à passer à l’acte.

• Des suggestions de produits que le consommateur pourrait également aimer ou qui pourraient venir compléter sa commande. Ainsi, profitez de vos emails de relance pour mettre en avant d’autres articles qui pourraient être intéressants pour le consommateur.

Voici ci-dessous un bon exemple d’email de relance de panier abandonné :

Voyons cela de plus près.

Les étapes pour coder un email de relance de panier abandonné

Coder la section du panier abandonné

Commençons par le haut du modèle d’email. Nous allons utiliser mj-navbar comme container. Nous choisirons ce container car il est mieux adapté à nos besoins et il est déjà formé par deux mj-column. Le premier contiendra mj-image et l'autre le composant mj-inline-links, qui créera vos liens basés sur une liste de mj-link children.

Bien sûr, nous allons ajouter du code CSS pour rendre notre modèle plus joli. Voici ce que nous avons :

Coder le corps du modèle d’email de relance du panier abandonné

Voyons maintenant comment coder le corps du modèle d’email. Pour être le plus efficace possible, nous vous recommandons de coller au plus près au design du panier tel qu’il apparaît sur votre site Internet. Cela aidera à remettre l’utilisateur dans l’état d’esprit dans lequel il était lors de sa commande. Voici notre code :

Comme vous pouvez le voir, nous utilisons deux mj-section imbriquées. Nous le faisons parce que l'API MJML que nous utilisons pour ce tutoriel ne supporte pas encore le composant.

Définir les produits du panier abandonné

Ensuite, nous allons configurer tout ce qui concerne les articles dans le panier. Pour ce faire, nous allons configurer cette boucle {% for single_element in array_variable %}, en utilisant le pattern suivant : {{ var:property_key:default_value }}. Dans la boucle, une nouvelle variable single_element est créée et mise à jour pour chaque itération, prête à être utilisée.

Voici le code MJML pour l'affichage :

Si vous voulez savoir comment configurer votre appel API, vous pouvez consulter notre documentation.

Coder la section avec la réduction

Nous avons presque fini. Il est maintenant temps d’annoncer la bonne nouvelle aux clients : les articles qu'ils ont laissés derrière eux sont maintenant à prix réduit ! Ici encore, nous allons utiliser une mj-table pour afficher deux sous-colonnes :

Pour reconquérir les utilisateurs, le meilleur moyen est de leur accorder une remise ou de leur offrir la livraison gratuite, sous la forme d'une offre qui semble avoir été conçue spécialement pour eux. Pour ce faire, ajoutez à votre modèle des blocs qui n'apparaissent que dans des conditions spécifiques. Dans cet article, les blocs conditionnels viennent à la rescousse.

Coder la section avec les suggestions d’articles

Les emails de relance de panier abandonné représentent une opportunité exceptionnelle pour pousser à vos utilisateurs d'autres produits. Vous avez sûrement un bel algorithme pour les recommandations - utilisez-le pour générer des données JSON et, avec le templating language, affichez de beaux blocs personnalisés directement dans votre email.

Coder le bouton call-to-action

C'est la partie la plus simple. Pour ajouter le call-to-action (bouton incitant les utilisateurs à passer à l’action), utilisez simplement le code ci-dessous pour le mj-bouton :

Il est temps de passer sur Github

Bon, nous vous avons donné une vue d'ensemble et quelques exemples de code pour créer un email de panier abandonné performant. Maintenant, il est temps de créer le vôtre avec votre propre design. Vous trouverez tout ce dont vous avez besoin dans notre tutoriel détaillé sur Github, avec des exemples et des samples de code.

Nous avons également créé un outil facile à exécuter, écrit avec NodeJS, pour tester les emails dans des conditions réelles. Pour l'utiliser, il vous suffit d'avoir des identifiants valides pour l'API MJML et la Send API transactionnelle de Mailjet. Ne vous inquiétez pas si vous êtes un nouveau venu : vous pouvez gratuitement vous inscrire à la bêta de l'API MJML et créer un compte Mailjet.

Découvrez le templating language de Mailjet

Chez Mailjet, nous connaissons la valeur d'un templating language entièrement intégré. C'est pourquoi nous avons créé notre propre templating langage en gardant à l'esprit notre Send API transactionnelle. Nous sommes là pour vous aider à tout gérer dans un seul modèle, pour vous faire économiser du temps et des efforts.

Alors, récapitulons : MJML pour produire des emails HTML responsives sans effort, plus un templating language pour leur donner vie avec des blocs conditionnels et des variables. Cette combinaison peut changer votre vie en tant que développeur.

Testez le templating language de MailjetNous avons développé notre propre templating langage en gardant à l'esprit notre Send API transactionnelle. Nous sommes là pour vous aider à tout gérer dans un seul modèle, pour vous faire économiser du temps et des efforts.

Vous voulez être informé(e) des prochains articles que nous publions ? Inscrivez-vous à notre newsletter ou suivez-nous sur Twitter et Facebook.