Dans les applications e-commerce modernes, les emails transactionnels vont au-delà des confirmations de commande et des mises à jour d’expédition. Ils réagissent également au comportement des utilisatrices ; par exemple, si une utilisatrice ajoute des articles à son panier mais ne complète pas l’achat, vous pouvez envoyer un rappel, communément appelé notification de « panier abandonné ». Cela encourage non seulement la complétion, mais offre également un point de contact utile au cas où l’utilisatrice rencontrerait des problèmes lors du paiement.

Dans ce tutoriel, vous apprendrez à envoyer un email de panier abandonné aux utilisatrices à l’aide des API Mailgun.

Pour mettre en œuvre des scénarios d’emails transactionnels pour les notifications de paniers abandonnés, vous allez créer une interface utilisateur simple pour simuler un panier d’achat et un Flask backend pour suivre les paniers abandonnés et déclencher des emails transactionnels.

Avant de débuter, assurez-vous d’avoir ce qui suit :

• Un Compte Mailgun pour envoyer des emails via l’API de Mailgun ; si vous n’avez pas de compte, suivez les guide de démarrage rapide pour en configurer un gratuitement
• Python 3.8 ou supérieur installé sur votre machine
• Une certaine familiarité avec HTML et JavaScript pour comprendre le code de l’interface utilisateur

Tout d’abord, connectez-vous à votre compte Mailgun et notez votre domaine d’envoi dans le tableau de bord Mailgun. Si vous avez un abonnement gratuit, vous verrez un domaine sandbox, qui sera utilisé à la fois dans le point de terminaison d’API et dans l’adresse email "from" lors des envois d’emails. Le domaine sandbox suit ce format : sandbox.mailgun.org :

Remarque : Si vous souhaitez envoyer des emails à partir de votre propre domaine personnalisé, vous aurez besoin d’un abonnement Mailgun payant. L’abonnement gratuit ne supporte que le domaine sandbox et limite les envois à cinq destinataires autorisés.

Ensuite, vous devez générer une clé API à partir de la page Sécurité de l’API. Vous pouvez trouver cette option dans le menu déroulant sous votre prénom dans le coin supérieur droit du tableau de bord Mailgun :

Vous utiliserez cette clé API dans votre application Flask pour envoyer des notifications de paniers abandonnés via l’API Mailgun.

Pour configurer un nouveau projet, ouvrez un terminal dans votre répertoire de projet préféré et exécutez les commandes suivantes pour récupérer le code requis – à la fois l’interface utilisateur et le backend – sur votre machine :

git clone https://github.com/manishh/gifts-giveaways.git cd gifts-giveaways/python/mailgun-abandoned-cart-notifications

Ensuite, dans le répertoire mailgun-abandoned-cart-notifications, renommez .env.example en .env, et mettez-le à jour avec vos identifiants d’API Mailgun :
# Remplacez avec votre clé API de Mailgun et domaine MAILGUN_API_KEY="YOUR-API-KEY" MAILGUN_DOMAIN="YOUR-MAILGUN-DOMAIN"

Avant de continuer, il est recommandé de créer et d’activer un nouvel environnement virtuel pour isoler votre projet et éviter les conflits de dépendances.
Une fois votre environnement virtuel actif, installez les dépendances requises :
pip install -r requirements.txt
Cela installe toutes les formules nécessaires, y compris Flask, le framework web léger qui exécute le backend.
Une fois l’installation complète, lancez l’application Flask avec cette commande :
python app.py
L’interface utilisateur de l’application sera alors disponible à l’adresse http://localhost:5000/.

La capture d’écran ci-dessous montre une interface utilisateur e-commerce simple pour simuler des scénarios de paniers abandonnés. En haut, l’en-tête affiche le titre, ainsi qu’un profil d’utilisatrice (montrant le prénom et l’email) et une icône de panier d’achat indiquant le nombre d’articles dans le panier. Il y a quatre fiches produits présentant des images, des noms, des prix et des descriptions, et les utilisatrices peuvent sélectionner des quantités avant d’ajouter des articles avec le bouton Ajouter au panier. En bas à gauche, un panneau de paramètres vous permet de configurer le délai d’expiration du panier abandonné (en secondes) et de réinitialiser le panier si nécessaire. Dans la vraie vie, le délai d’expiration serait en heures, et il devrait être suivi par le backend.
Vous pouvez utiliser cette interface pour déclencher un événement lorsqu’une utilisatrice laisse des articles dans son panier sans compléter l’achat :

Vous pouvez trouver le code de cette interface de panier d’achat dans templates/shopping_cart.html. Ce fichier comporte deux sections importantes : la configuration de l’interface utilisateur et une fonction pour envoyer les données de panier abandonné au backend.

Pour la configuration de l’interface utilisateur, localisez et éditez USER_NAME et USER_EMAIL dans la balise  pour envoyer les données correctes à votre backend. Ces deux paramètres représentent l’utilisatrice connectée dans votre application e-commerce :

// Configuration : Remplacez ces valeurs par les vôtres const USER_NAME = "John Smith"; const USER_EMAIL = "john.smith@example.com"; // Email vérifié pour le compte sandbox Mailgun const BACKEND_URL = 'http://localhost:5000/abandoned-cart'; // Mettre à jour avec votre point de terminaison d'API Flask, si nécessaire let ABANDONED_CART_TIMEOUT = 60; // Délai d'attente par défaut en secondes

La fonction JavaScript suivante, sendToBackend(data), gère le processus d’envoi des détails du panier abandonné – tels que les informations de l’utilisatrice, les articles dans le panier et la valeur totale – au backend pour déclencher une notification :

// Envoyer des données au backend function sendToBackend(data) { console.log('Envoi des données du panier abandonné au backend...'); fetch(BACKEND_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }) .then(response => { // Vérifier si l'état du service de la réponse est 200 (OK) if (response.status === 200) { return response.json(); } else { // Lancer une erreur si l'état du service n'est pas 200 throw new Error(`Erreur HTTP ! État du service : ${response.status}`); } }) .then(result => { console.log('Réponse du backend :', result); alert('Notification de panier abandonné envoyée avec succès !'); resetCart(); }) .catch(error => { console.error('Erreur lors de l\'envoi de la notification de panier abandonné :', error); alert('Erreur lors de l\'envoi de la notification de panier abandonné. Vérifiez la console pour plus de détails.'); }); }

Cette fonction effectue d’abord une requête HTTP POST vers BACKEND_URL à l’aide de l’appel fetch, transformant les données du panier en une charge utile JSON.
Si le serveur répond avec succès (HTTP 200), la réponse est traitée et enregistrée dans la console, et une alerte confirme que la notification de panier abandonné a été envoyée. Le panier est ensuite réinitialisé.

Si la requête échoue – en raison de problèmes de réseau ou d’un problème côté serveur (comme des erreurs HTTP 5XX) – la fonction intercepte l’erreur, l’enregistre dans la console, et alerte l’utilisatrice qu’un problème est survenu. De cette façon, la fonction s’assure que les tentatives réussies et échouées de notification au backend sont gérées de manière élégante, gardant l’utilisatrice informée tout au long du processus.

Le code restant dans shopping_cart.html gère le style CSS pour une structure propre et visuellement attrayante, la logique JavaScript pour calculer la valeur totale du panier, et la direction du minuteur pour simuler l’abandon de panier.

Lorsque l’interface utilisateur publie (posts) les données de panier abandonné vers BACKEND_URL, l’application Flask (app.py) les traite en utilisant la fonction suivante :
@app.route('/abandoned-cart', methods=['POST']) def abandoned_cart(): """ Point de terminaison pour recevoir les données de panier abandonné, y compris les informations sur l'utilisatrice. Il envoie une notification par email à l'utilisatrice concernée. """ try: # Obtenir les données du panier à partir de la requête cart_data = request.json # Extraire les informations de l'utilisatrice user_info = cart_data.get('user', {}) user_email = user_info.get('email', 'unknown') # Enregistrer les données reçues logger.info(f"Panier abandonné reçu de {user_email} à {datetime.datetime.now()}, Nombre total d'articles : {len(cart_data.get('items', []))}") # Envoyer un email à propos du panier abandonné html_message = _generate_abandoned_cart_email(cart_data) _send_email(f"{user_info.get('name', user_email)} ", "Votre panier vous attend...", html_message) # Renvoyer une réponse de succès return jsonify({ "status": "success", "message": f"Notification de panier abandonné envoyée à : {user_info.get('email')}", "timestamp": datetime.datetime.now().isoformat(), }), 200 except Exception as e: logger.error(f"Erreur lors du traitement du panier abandonné : {str(e)}") return jsonify({"status": "error", "message": str(e)}), 500

Ce point de terminaison d’API (/abandoned-cart) écoute les requêtes POST lorsqu’une utilisatrice abandonne son panier. Il extrait les détails du panier de la charge utile JSON de la requête, récupère l’email et le prénom de l’utilisatrice, et enregistre l’événement avec l’horodatage et le nombre d’articles.

Ensuite, il génère un email en utilisant _generate_abandoned_cart_email(cart_data), qui transforme les détails du panier en un modèle d’email HTML soigné. L’email est ensuite envoyé à l’ user_email via _send_email(), en utilisant le sujet « Votre panier vous attend… » pour rappeler à l’utilisatrice à propos de son achat en attente.
En cas de succès, la fonction renvoie une réponse JSON confirmant que l’email a été envoyé. Si une erreur se produit, comme un problème avec la requête ou le service d’emailing, il enregistre l’erreur et renvoie une réponse HTTP 500 Internal Server Error, que l’interface utilisateur peut utiliser pour informer l’utilisatrice à propos de l’état du service de la notification.

Les emails de rappel de panier abandonné doivent non seulement être informatifs, mais aussi visuellement attrayants. Un email HTML bien conçu avec des images présente clairement les détails du panier et augmente les chances que l’utilisatrice revienne pour compléter son achat. La fonction _generate_abandoned_cart_email(...) s’en charge :

def _generate_abandoned_cart_email(cart_data: Dict[str, Any]) -> str: """ Générer un email HTML pour un panier abandonné en utilisant les données du panier fournies. Args: cart_data: Dictionnaire contenant les informations du panier y compris les détails de l'utilisatrice et les articles Returns: Chaîne HTML pour l'email """ try: # Extraire les données avec gestion des erreurs user_name = cart_data.get('user', {}).get('name', 'Client fidèle') first_name = user_name.split()[0] if ' ' in user_name else user_name items = cart_data.get('items', []) total_value = cart_data.get('totalValue', 0) # Formater l'horodatage si disponible timestamp_str = cart_data.get('timestamp', '') timezone_offset = cart_data.get('timezoneOffset', 0) # Représenter le fuseau horaire de l'utilisatrice if timestamp_str: try: timestamp = datetime.datetime.fromisoformat(timestamp_str.replace('Z', '+00:00')) - datetime.timedelta(minutes=timezone_offset) abandonment_time = f"le {timestamp.strftime('%d %B à %H:%M')}" except (ValueError, TypeError): abandonment_time = 'récemment' else: abandonment_time = 'récemment' # Générer le contenu HTML avec CSS minimal et combiné html = f""" /* Style CSS ici */

Votre panier vous attend !

Bonjour {first_name},

Nous avons remarqué que vous avez laissé des articles dans votre panier {abandonment_time}. Ne vous inquiétez pas, nous les avons sauvegardés pour vous !

Articles de votre panier :

""" # Ajouter chaque article à l'email for item in items: item_name = item.get('name', 'Produit') item_price = item.get('price', 0) item_quantity = item.get('quantity', 1) item_image = item.get('image', '') item_description = item.get('description', '') # Format image tag with fallback image_tag = f'' if item_image else item_name[0].upper() html += f"""

{image_tag}

{item_name}

{item_description}

Quantité : {item_quantity}

${item_price:.2f}

""" # Ajouter le total et l'appel à l'action html += f"""

Total : ${total_value:.2f}

Compléter votre achat

Si vous avez des questions à propos de votre commande, n'hésitez pas à contacter notre équipe du service clientèle.

Merci de faire vos achats chez nous !

© 2025 Nom de votre entreprise. Tous droits réservés.

Cette fonction construit un email HTML rappelant à une utilisatrice à propos de son panier abandonné. Elle extrait d’abord les détails clés des données fournies, y compris le prénom de l’utilisatrice, les articles du panier et le prix total. Si un horodatage est disponible, elle le transforme dans le fuseau horaire de l’utilisatrice (puisque les fuseaux horaires du serveur et du client seraient différents) et le formate en une chaîne de date-heure conviviale (telle que « le 25 mars à 15h49 »). Sinon, la valeur par défaut est « récemment ».

L’email informe l’utilisatrice que son panier a été sauvegardé et répertorie les articles qu’elle a laissés derrière elle, y compris le nom du produit, la quantité, le prix, la description et une image. La valeur totale du panier est affichée bien en évidence, suivie d’un bouton Compléter votre achat pour encourager l’utilisatrice à revenir et à finaliser le paiement.
Si une erreur survient, telle que des données manquantes ou des problèmes de formatage, la fonction utilise comme repli un email simple avec un message de base et un lien d’achat. Cela garantit que même si la version détaillée échoue, les utilisatrices reçoivent toujours un rappel pour compléter leur transaction.

Naviguez vers Mailgun Send > Envois > Modèles dans votre compte Mailgun pour créer le design de vos propres modèles d’emails :

Une fois le contenu d’email généré, il doit être livré de manière fiable. La fonction _send_email(...) gère les envois de notifications de paniers abandonnés à l’aide de l’API de Mailgun :

def _send_email(to_address: str, subject: str, html_message: str): """ Envoie un email unique à l'adresse email donnée à l'aide de l'API Mailgun. :param to_address: :param subject: :param message: """ api_key = os.getenv("MAILGUN_API_KEY") # Obtenir la clé API depuis le fichier `.env` resp = requests.post(MAILGUN_API_URL, auth=("api", api_key), data={"from": FROM_EMAIL_ADDRESS, "to": to_address, "subject": subject, "html": html_message}) if resp.status_code == 200: # Succès logging.info(f"Email envoyé avec succès à '{to_address}' via l'API Mailgun.") else: # Erreur raise RuntimeError(f"Impossible d'envoyer l'email, raison : {resp.text}")

Cette fonction lit MAILGUN_API_KEY puis envoie un email via l’API de Mailgun en utilisant une requête HTTP POST. La requête inclut les détails essentiels de l’email, y compris l’adresse d’expédition, l’adresse du destinataire, le sujet et le contenu HTML généré par la fonction _generate_abandoned_cart_email(...).
Si la requête réussit (resp.status_code == 200), il enregistre un message de succès. Sinon, il lève une exception avec les détails de la réponse.
Il est important de comprendre que _send_email(...) ne gère délibérément pas les erreurs, laissant cela à la fonction appelante (abandoned_cart(), qui dessert le point de terminaison /abandoned-cart), afin qu’elle puisse intercepter les exceptions et renvoyer une réponse HTTP appropriée. Si l’email est envoyé avec succès, abandoned_cart() renvoie une réponse HTTP 200 confirmant que la notification a été envoyée. Si une erreur se produit, comme une clé API invalide ou une défaillance du réseau, il renvoie une réponse HTTP 500, s’assurant que l’interface utilisateur est informée du problème.

Maintenant que vous avez exploré tous les composants clés, il est temps de tester le scénario d’email de panier abandonné de bout en bout.
Tout d’abord, assurez-vous que votre serveur Flask est en cours d’exécution et que l’interface utilisateur est accessible dans votre navigateur à l’adresse http://localhost:5000/. Vous pouvez ajuster le délai d’expiration du panier abandonné dans le panneau des paramètres en bas à gauche de la page selon vos besoins.

Ensuite, ajoutez quelques articles à votre panier. À chaque fois que vous ajoutez un article, le compte à rebours du panier est réinitialisé et recommence. Une fois que vous avez terminé, cliquez sur l’icône du panier pour afficher le panneau coulissant, qui affiche les produits sélectionnés, leurs prix et le bouton Passer à la caisse :

Au lieu de passer à la caisse, laissez le minuteur terminer son compte à rebours. Une fois le compte à rebours arrivé à zéro, une alerte devrait s’afficher sur l’interface utilisateur confirmant que la notification de panier abandonné a été envoyée. Le message d’alerte devrait indiquer :
Notification de panier abandonné envoyée avec succès !

En même temps, le terminal de votre application Flask devrait enregistrer des messages comme celui-ci :
INFO:__main__:Panier abandonné reçu de à 2025-03-24 14:02:00.077949, Nombre total d'articles : 3 INFO:root:Email envoyé avec succès à 'Prénom ' via l'API Mailgun.

Enfin, vérifiez votre boîte de réception pour l’email de panier abandonné. Si tout a fonctionné correctement, vous devriez recevoir ce message :

Remarque : Si vous utilisez l’abonnement gratuit de Mailgun, l’email pourrait finir dans le dossier spam.

Félicitations ! Vous avez mis en œuvre et testé avec succès le scénario de notification d’email de panier abandonné à l’aide de l’API de Mailgun.

Une fois vos emails de panier abandonné envoyés, il est important d’en surveiller la livraison, de suivre l’engagement et de gérer efficacement les échecs. Mailgun fournit des outils de tableau de bord statistique intégrés pour surveiller les emails envoyés, les taux d’ouvertures et les échecs.

Pour accéder à ces statistiques, naviguez vers Mailgun Send > Tableau de bord statistique > Statistiques dans votre tableau de bord Mailgun :

Ici, vous trouverez une répartition graphique des statistiques d’emailing clés, telles que :
Nombre d’envois : Nombre total de tentatives d’emails
Nombre de livrés : Emails reçus avec succès par les destinataires
Nombre d’ouverts : Nombre d’emails ouverts par les destinataires (si le suivi des ouvertures est activé)
Nombre d’échecs : Emails ayant échoué en raison de problèmes tels que des adresses invalides ou un filtre anti-spam

Pour une analyse plus approfondie, l’onglet Rapports fournit des enregistrements détaillés de l’état du service de chaque email, tandis que l’onglet Classification des rebonds aide à diagnostiquer les échecs.
Des taux d’erreurs élevés peuvent avoir un impact négatif sur la délivrabilité de vos emails. Pour réduire les erreurs, révisez régulièrement l’onglet Classification des rebonds dans Mailgun, retirez les emails invalides et utilisez des listes de suppression pour éviter de renvoyer à des adresses ayant rebondi.

Dans ce tutoriel, vous avez appris à mettre en œuvre un scénario d’email de panier abandonné à l’aide de Mailgun. Le processus a couvert la création d’une interface utilisateur simple pour simuler un site e-commerce, l’envoi des données du panier au backend, leur traitement avec Flask, la génération de modèles d’emails, l’envoi de notifications via l’API Mailgun et le suivi des statistiques de livraison. Les emails transactionnels comme ceux-ci aident à récupérer les ventes perdues et à améliorer l’engagement client.

Vous pouvez trouver le code complet de ce tutoriel dans ce dépôt GitHub.

Maintenant, vous pouvez mettre ces connaissances en pratique – intégrez Mailgun à vos projets et commencez à utiliser les emails transactionnels pour améliorer l’UX. Découvrir Des modèles d’emails transactionnels et essayez l’API Mailgun gratuitement dès aujourd’hui !

Author: Manish Hatwalne Manish, with over 20 years of diverse coding experience, wears two hats: coder by day, writer by night. His knack lies in demystifying complex concepts and translating "geek speak" into everyday language.