Comment coder un email de relance de panier abandonné ?

D’après une étude récente, 90 % des acheteurs en ligne interrompent anticipativement leur commande en ligne. Pourtant, il ne faut pas grand chose pour inciter ces « quasi-clients » à passer à l’action. Pour cela, un levier très efficace est le fait d’envoyer à ces consommateurs un email de rappel après qu’ils aient abandonné leur panier. Pour être encore plus convaincant(e), vous pouvez même leur offrir une réduction sur ces produits abandonnés.

Il faut savoir que 50 % des emails de relance de panier abandonné sont ouverts, et plus d’un tiers d’entre eux sont cliqués et redirigent le client vers le site Internet de l’entreprise. Et ces chiffres sont encore plus élevés lorsque la marque offre un avantage financier au consommateur. Ces bons résultats s’expliquent facilement : les clients abandonnent souvent leur panier parce qu’ils sont interrompus par un événement externe, ou simplement parce qu’ils avaient besoin de temps pour réfléchir. C’est pourquoi un email de relance de panier abandonné est un moyen efficace de réengager les clients et de les guider jusqu’à la dernière étape de votre processus d’achat.

Dans cet article, nous allons voir étape par étape comment créer un email de relance de panier abandonné en utilisant 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 !

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.

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 :

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.

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.

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.

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.

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 :

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.

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.

Auteur: Gabriela Gavrailova Ancienne rédactrice technique chez Sinch Mailjet