![\"Dominio](\"https:\/\/i.imgur.com\/7IYAFRf.png\")
Si deseas enviar emails desde tu propio dominio personalizado, necesitar\u00e1s un plan de pago de Mailgun. El plan gratuito solo admite el dominio sandbox y limita el env\u00edo a\u00a0cinco destinatarios autorizados.<\/a><\/p><\/div>\r\n <\/div>\r\n\n\n\n A continuaci\u00f3n, debes generar una clave de API desde la p\u00e1gina de\u00a0seguridad de la API<\/strong>. Puedes encontrar esta opci\u00f3n en el men\u00fa desplegable debajo de tu nombre en la esquina superior derecha del panel de control de Mailgun: Utilizar\u00e1s esta clave de API en tu aplicaci\u00f3n Flask para enviar notificaciones de carritos abandonados a trav\u00e9s de la API de Mailgun. Para configurar un nuevo proyecto, abre un terminal dentro del directorio de proyecto que prefieras y ejecuta los siguientes comandos para obtener el c\u00f3digo requerido (tanto la interfaz de usuario como el backend) en tu m\u00e1quina:<\/p>\n\n\n\n A continuaci\u00f3n, dentro del directorio\u00a0 Antes de continuar, es recomendable que crees y actives un nuevo\u00a0entorno virtual<\/a>\u00a0para aislar tu proyecto y evitar conflictos de dependencias. La captura de pantalla siguiente muestra una sencilla interfaz de usuario de comercio electr\u00f3nico para simular escenarios de carritos abandonados. En la parte superior, el encabezado muestra el t\u00edtulo, junto con un perfil de usuario (mostrando el nombre y el email) y un icono de carrito de la compra que indica el n\u00famero de art\u00edculos en el carrito. Hay cuatro tarjetas de productos que muestran im\u00e1genes, nombres, precios y descripciones, y los usuarios pueden seleccionar cantidades antes de a\u00f1adir art\u00edculos con el bot\u00f3n de\u00a0A\u00f1adir al carrito<\/strong>. En la parte inferior izquierda, un panel de ajustes te permite configurar el tiempo de espera del carrito abandonado (en segundos) y restablecer el carrito si es necesario. En la vida real, el tiempo de espera ser\u00eda en horas, y el backend deber\u00eda hacer un seguimiento de este. Puedes encontrar el c\u00f3digo para esta interfaz de carrito de la compra en\u00a0 Nota:\u00a0Si utilizas el plan gratuito de Mailgun, aseg\u00farate de que\u00a0USER_EMAIL\u00a0sea una de las direcciones verificadas en tu cuenta de Mailgun. Puedes dejar los dos par\u00e1metros restantes sin cambios.<\/p><\/div>\r\n <\/div>\r\n\n\n\n Los emails de recordatorio de carrito abandonado no solo deben ser informativos, sino tambi\u00e9n visualmente atractivos. Un email HTML bien dise\u00f1ado con im\u00e1genes presenta los detalles del carrito de forma clara y aumenta las posibilidades de que el usuario regrese para completar su compra. La funci\u00f3n\u00a0 Esta funci\u00f3n elabora un email HTML que recuerda a un usuario su carrito abandonado. En primer lugar, extrae detalles clave de los datos proporcionados, incluyendo el nombre del usuario, los art\u00edculos del carrito y el precio total. Si hay una marca de tiempo disponible, la convierte a la zona horaria del usuario (ya que las zonas horarias del servidor y del cliente ser\u00edan diferentes) y la formatea en una cadena de fecha y hora f\u00e1cil de leer (como \"el 25 de marzo a las 15:49\"). En caso contrario, el valor predeterminado es \"recientemente\".<\/p>\n\n\n\n <\/p>\n\n\n Navega a\u00a0Send > Env\u00edos > Plantillas<\/strong>\u00a0en tu cuenta de Mailgun para dise\u00f1ar tus propias plantillas de email: Ahora que has explorado todos los componentes clave, es hora de probar el flujo de trabajo del email de carrito abandonado de principio a fin. En lugar de continuar con el pago, deja que el temporizador termine su cuenta atr\u00e1s. Una vez que la cuenta atr\u00e1s llegue a cero, deber\u00eda aparecer una alerta en la interfaz de usuario para confirmar que la notificaci\u00f3n de carrito abandonado se ha enviado. El mensaje de alerta deber\u00eda decir: Una vez que se realizan los env\u00edos de los emails de carritos abandonados, es importante hacer un seguimiento de su entrega, seguir la interacci\u00f3n y gestionar los fallos de forma eficaz. Mailgun proporciona herramientas de panel de informes integradas para hacer un seguimiento de los emails enviados, las tasas de aperturas y los fallos.<\/p>\n\n\n\n Aqu\u00ed encontrar\u00e1s un desglose gr\u00e1fico de las estad\u00edsticas de email clave, como: En este tutorial, has aprendido c\u00f3mo implementar un flujo de trabajo de emails de carritos abandonados utilizando Mailgun. El proceso abarc\u00f3 la creaci\u00f3n de una interfaz de usuario sencilla para simular un sitio de comercio electr\u00f3nico, los env\u00edos de datos del carrito al backend, su procesamiento con Flask, la generaci\u00f3n de plantillas de email, los env\u00edos de notificaciones a trav\u00e9s de la API de Mailgun y el seguimiento de las m\u00e9tricas de entrega. Los emails transaccionales como estos son una gran ayuda para recuperar ventas perdidas y mejorar la interacci\u00f3n del cliente.<\/p>\n\n\n\n![\"Crear](\"https:\/\/i.imgur.com\/YEm9s1u.png\")
<\/p>\n\n\n\n
<\/p>\n\n\n\nConfigurar un nuevo proyecto de Python<\/h2>\n\n\n\n
git clone https:\/\/github.com\/manishh\/gifts-giveaways.git cd gifts-giveaways\/python\/mailgun-abandoned-cart-notifications<\/code>
<\/p>\n\n\n\nmailgun-abandoned-cart-notifications<\/code>, renombra\u00a0.env.example<\/code>\u00a0a\u00a0.env<\/code>, y actual\u00edzalo con tus credenciales de la API de Mailgun:# Sustituye por tu clave de API de Mailgun y dominio reales MAILGUN_API_KEY=\"TU-CLAVE-DE-API\" MAILGUN_DOMAIN=\"TU-DOMINIO-DE-MAILGUN\"<\/code>
<\/p>\n\n\n\n
Una vez que tu entorno virtual est\u00e9 activo, instala las dependencias requeridas:pip install -r requirements.txt<\/code>
Esto instala todos los paquetes necesarios, incluyendo\u00a0Flask<\/code>, el marco web ligero que ejecuta el backend.
Una vez completada la instalaci\u00f3n, inicia la aplicaci\u00f3n Flask con este comando:python app.py<\/code>
La interfaz de usuario de la aplicaci\u00f3n estar\u00e1 disponible en\u00a0http:\/\/localhost:5000\/<\/a>.<\/p>\n\n\n\nCreaci\u00f3n de la interfaz de carrito abandonado<\/h2>\n\n\n\n
Puedes utilizar esta interfaz para disparar un evento cuando un usuario deja art\u00edculos en su carrito sin completar la compra:![\"Interfaz](\"https:\/\/i.imgur.com\/c99b7OU.png\")
<\/p>\n\n\n\ntemplates\/shopping_cart.html<\/code><\/a>. Este archivo tiene dos secciones importantes: la configuraci\u00f3n de la interfaz de usuario y una funci\u00f3n para enviar los datos del carrito abandonado al backend.<\/p>\n\n\n\n
Para la configuraci\u00f3n de la interfaz de usuario, localiza y edita\u00a0USER_NAME<\/code>\u00a0y\u00a0USER_EMAIL<\/code>\u00a0dentro de la etiqueta\u00a0<\/code>\u00a0para enviar los datos correctos a tu backend. Estos dos par\u00e1metros representan al usuario que ha iniciado sesi\u00f3n en tu aplicaci\u00f3n de comercio electr\u00f3nico:<\/p>\n\n\n\n\/\/ Configuraci\u00f3n: Sustituye estos por tus propios valores const USER_NAME = \"John Smith\"; const USER_EMAIL = \"john.smith@example.com\"; \/\/ Email verificado para la cuenta sandbox de Mailgun const BACKEND_URL = 'http:\/\/localhost:5000\/abandoned-cart'; \/\/ Actualiza a tu punto de conexi\u00f3n de API de Flask, si es necesario let ABANDONED_CART_TIMEOUT = 60; \/\/ Tiempo de espera predeterminado en segundos<\/code><\/p>\n\n\n
La siguiente funci\u00f3n de JavaScript,\u00a0sendToBackend(data)<\/code>, se encarga del proceso de enviar detalles del carrito abandonado (como la informaci\u00f3n del usuario, los art\u00edculos en el carrito y el valor total) al backend para disparar una notificaci\u00f3n:<\/p>\n\n\n\n\/\/ Funci\u00f3n para enviar datos al backend sendToBackend(data) { console.log('Enviando datos de carrito abandonado al backend...'); fetch(BACKEND_URL, { method: 'POST', headers: { 'Content-Type': 'application\/json', }, body: JSON.stringify(data) }) .then(response => { \/\/ Comprueba si el estado de la respuesta es 200 (OK) if (response.status === 200) { return response.json(); } else { \/\/ Lanza un error si el estado no es 200 throw new Error(`\u00a1Error HTTP! Estado: ${response.status}`); } }) .then(result => { console.log('Respuesta del backend:', result); alert('\u00a1Notificaci\u00f3n de carrito abandonado enviada con \u00e9xito!'); resetCart(); }) .catch(error => { console.error('Error al enviar la notificaci\u00f3n de carrito abandonado:', error); alert('Error al enviar la notificaci\u00f3n de carrito abandonado. Consulta la consola para obtener m\u00e1s detalles.'); }); }<\/code><\/p>\n\n\n\n
En primer lugar, esta funci\u00f3n hace una solicitud HTTP POST a\u00a0BACKEND_URL<\/code>\u00a0utilizando la llamada\u00a0fetch<\/code>, para convertir los datos del carrito en una carga \u00fatil de JSON.
Si el servidor responde correctamente (HTTP\u00a0200<\/code>), la respuesta se procesa y se guarda en los logs de la consola, y una alerta confirma que la notificaci\u00f3n de carrito abandonado se ha enviado. A continuaci\u00f3n, se restablece el carrito.<\/p>\n\n\n\n
Si la solicitud falla, debido a problemas de red o a un problema del lado del servidor (como errores HTTP\u00a05XX<\/code>), la funci\u00f3n detecta el error, lo guarda en los logs de la consola y alerta al usuario de que algo ha salido mal. De este modo, la funci\u00f3n garantiza que tanto los intentos correctos como los fallidos de notificar al backend se gestionan de forma elegante, manteniendo al usuario informado durante todo el proceso.<\/p>\n\n\n\n
El c\u00f3digo restante en\u00a0shopping_cart.html<\/code>\u00a0se encarga del estilo CSS para conseguir un dise\u00f1o limpio y visualmente atractivo, de la l\u00f3gica de JavaScript para calcular el valor total del carrito y de la gesti\u00f3n del temporizador para simular el abandono del carrito.<\/p>\n\n\n\nProcesamiento de notificaciones de carritos abandonados en el backend<\/h2>\n\n\n\n
Cuando la interfaz de usuario env\u00eda datos de carrito abandonado a\u00a0BACKEND_URL<\/code>, la aplicaci\u00f3n Flask (app.py<\/code><\/a>) los procesa utilizando la siguiente funci\u00f3n:@app.route('\/abandoned-cart', methods=['POST']) def abandoned_cart(): \"\"\" Punto de conexi\u00f3n para recibir datos de carrito abandonado, incluyendo informaci\u00f3n del usuario. Env\u00eda una notificaci\u00f3n por email al usuario en cuesti\u00f3n. \"\"\" try: # Obtiene los datos del carrito a partir de la solicitud cart_data = request.json # Extrae la informaci\u00f3n del usuario user_info = cart_data.get('user', {}) user_email = user_info.get('email', 'unknown') # Guarda los datos recibidos en los logs logger.info(f\"Carrito abandonado recibido de {user_email} a las {datetime.datetime.now()}, Total de art\u00edculos: {len(cart_data.get('items', []))}\") # Env\u00eda un email sobre el carrito abandonado html_message = _generate_abandoned_cart_email(cart_data) _send_email(f\"{user_info.get('name', user_email)} \", \"Tu carrito te est\u00e1 esperando...\", html_message) # Devuelve la respuesta de \u00e9xito return jsonify({ \"status\": \"success\", \"message\": f\"Notificaci\u00f3n de carrito abandonado enviada a: {user_info.get('email')}\", \"timestamp\": datetime.datetime.now().isoformat(), }), 200 except Exception as e: logger.error(f\"Error al procesar el carrito abandonado: {str(e)}\") return jsonify({\"status\": \"error\", \"message\": str(e)}), 500<\/code><\/p>\n\n\n\n
Este punto de conexi\u00f3n de API (\/abandoned-cart<\/code>) escucha solicitudes POST cuando un usuario abandona su carrito. Extrae los detalles del carrito de la carga \u00fatil JSON de la solicitud, recupera el email y el nombre del usuario, y registra el evento en los logs junto con la marca de tiempo y el n\u00famero de art\u00edculos.<\/p>\n\n\n\n
A continuaci\u00f3n, genera un email utilizando\u00a0_generate_abandoned_cart_email(cart_data)<\/code>, que convierte los detalles del carrito en una ordenada plantilla de email HTML. A continuaci\u00f3n, el email se env\u00eda a\u00a0user_email<\/code>\u00a0a trav\u00e9s de\u00a0_send_email()<\/code>, utilizando el asunto \u00abTu carrito te est\u00e1 esperando…\u00bb para recordar al usuario su compra pendiente.
Si tiene \u00e9xito, la funci\u00f3n devuelve una respuesta JSON para confirmar que el email ha sido enviado. Si se produce un error, como un problema con la solicitud o con el servicio de env\u00edo de emails, guarda el error en los logs y devuelve una respuesta HTTP\u00a0500 Internal Server Error<\/code>, que la interfaz de usuario puede usar para informar al usuario sobre el estado de la notificaci\u00f3n.<\/p>\n\n\n\nDise\u00f1o de la plantilla de email<\/h2>\n\n\n\n
_generate_abandoned_cart_email(...)<\/code>\u00a0se encarga de esto:<\/p>\n\n\n\ndef _generate_abandoned_cart_email(cart_data: Dict[str, Any]) -> str: \"\"\" Genera un email HTML para un carrito abandonado utilizando los datos proporcionados del carrito. Args: cart_data: Diccionario que contiene la informaci\u00f3n del carrito, incluyendo los detalles del usuario y los art\u00edculos Returns: Cadena HTML para el email \"\"\" try: # Extrae datos con gesti\u00f3n de errores user_name = cart_data.get('user', {}).get('name', 'Estimado cliente') 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) # Formatea la marca de tiempo si est\u00e1 disponible timestamp_str = cart_data.get('timestamp', '') timezone_offset = cart_data.get('timezoneOffset', 0) # Representa la zona horaria del usuario if timestamp_str: try: timestamp = datetime.datetime.fromisoformat(timestamp_str.replace('Z', '+00:00')) - datetime.timedelta(minutes=timezone_offset) abandonment_time = f\"el {timestamp.strftime('%d de %B a las %H:%M')}<\/b>\" except (ValueError, TypeError): abandonment_time = 'recientemente' else: abandonment_time = 'recientemente' # Genera el contenido HTML con un CSS m\u00ednimo combinado html = f\"\"\" \/* El estilo CSS va aqu\u00ed *\/ \u00a1Tu carrito te est\u00e1 esperando!<\/h1> \n\n\n
El email informa al usuario de que se ha guardado su carrito y enumera los art\u00edculos que dej\u00f3, incluyendo el nombre del producto, la cantidad, el precio, la descripci\u00f3n y una imagen. El valor total del carrito se muestra de forma destacada, seguido de un bot\u00f3n de\u00a0Completa tu compra<\/strong>\u00a0para animar al usuario a regresar y terminar el proceso de pago.
Si se produce un error, como la falta de datos o problemas de formato, la funci\u00f3n recurre a un email sencillo con un mensaje b\u00e1sico y un enlace de compra. De este modo se garantiza que, aunque la versi\u00f3n detallada falle, los usuarios sigan recibiendo un recordatorio para completar su transacci\u00f3n.<\/p>\n\n\n\n![\"Plantillas](\"https:\/\/i.imgur.com\/rJ9PTpE.png\")
<\/p>\n\n\n\nImplementaci\u00f3n de la funcionalidad de env\u00edo de emails con la API de Mailgun<\/h2>\n\n\n\n
Una vez generado el contenido del email, debe entregarse de forma fiable. La funci\u00f3n\u00a0_send_email(...)<\/code>\u00a0se encarga de realizar los env\u00edos de notificaciones de carritos abandonados utilizando la API de Mailgun:<\/p>\n\n\n\ndef _send_email(to_address: str, subject: str, html_message: str): \"\"\" Env\u00eda un solo email a la direcci\u00f3n de email especificada utilizando la API de Mailgun. :param to_address: :param subject: :param message: \"\"\" api_key = os.getenv(\"MAILGUN_API_KEY\") # Obtiene la clave de API del archivo `.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: # \u00c9xito logging.info(f\"Se ha enviado correctamente un email a '{to_address}' a trav\u00e9s de la API de Mailgun.\") else: # Error raise RuntimeError(f\"No se pudo enviar el email, motivo: {resp.text}\")<\/code><\/p>\n\n\n\n
Esta funci\u00f3n lee\u00a0MAILGUN_API_KEY<\/code>\u00a0y a continuaci\u00f3n env\u00eda un email a trav\u00e9s de la API de Mailgun mediante una solicitud HTTP POST. La solicitud incluye los detalles b\u00e1sicos del email, como la direcci\u00f3n del remitente, la direcci\u00f3n del destinatario, el asunto y el contenido HTML generado por la funci\u00f3n\u00a0_generate_abandoned_cart_email(...)<\/code>.
Si la solicitud tiene \u00e9xito (resp.status_code == 200<\/code>), guarda un mensaje de \u00e9xito en los logs. En caso contrario, genera una excepci\u00f3n con los detalles de la respuesta.
Es importante entender que\u00a0_send_email(...)<\/code>\u00a0deliberadamente no gestiona los errores, dej\u00e1ndolo a cargo de la funci\u00f3n de llamada (abandoned_cart()<\/code>, que sirve al punto de conexi\u00f3n\u00a0\/abandoned-cart<\/code>), para que pueda detectar las excepciones y devolver una respuesta HTTP adecuada. Si el email se env\u00eda correctamente,\u00a0abandoned_cart()<\/code>\u00a0devuelve una respuesta HTTP\u00a0200<\/code>\u00a0para confirmar que la notificaci\u00f3n ha sido enviada. Si se produce un error, como una clave de API inv\u00e1lida o un fallo en la red, devuelve una respuesta HTTP\u00a0500<\/code>, asegurando que la interfaz de usuario est\u00e9 informada del problema.<\/p>\n\n\n\nProbar el flujo de trabajo<\/h2>\n\n\n\n
Primero, aseg\u00farate de que tu servidor Flask se est\u00e9 ejecutando y de que se pueda acceder a la interfaz de usuario en tu navegador en\u00a0http:\/\/localhost:5000\/<\/a>. Puedes ajustar el tiempo de espera del carrito abandonado en el panel de ajustes en la parte inferior izquierda de la p\u00e1gina seg\u00fan sea necesario.<\/p>\n\n\n\n
A continuaci\u00f3n, a\u00f1ade algunos art\u00edculos a tu carrito. Cada vez que a\u00f1ades un art\u00edculo, el temporizador de cuenta atr\u00e1s del carrito se restablece y vuelve a empezar. Cuando hayas terminado, haz clic en el icono del carrito para ver el panel deslizable, que muestra los productos seleccionados, sus precios y el bot\u00f3n de\u00a0Continuar con el pago<\/strong>:<\/p>\n\n\n\n![\"Triggering](\"https:\/\/i.imgur.com\/Qos5lQa.png\")
<\/p>\n\n\n\n\u00a1Notificaci\u00f3n de carrito abandonado enviada con \u00e9xito!<\/code><\/p>\n\n\n\n
Al mismo tiempo, el terminal de tu aplicaci\u00f3n Flask deber\u00eda registrar mensajes en los logs como este:INFO:__main__:Carrito abandonado recibido de a las 2025-03-24 14:02:00.077949, Total de art\u00edculos: 3 INFO:root:Se ha enviado correctamente un email a 'Nombre ' a trav\u00e9s de la API de Mailgun.<\/code><\/p>\n\n\n\n
Por \u00faltimo, revisa tu bandeja de entrada en busca del email de carrito abandonado. Si todo ha funcionado correctamente, deber\u00edas recibir este mensaje:<\/p>\n\n\n\n![\"Abandoned](\"https:\/\/i.imgur.com\/Jd0ferZ.png\")
<\/p>\n\n\n\n
Nota:<\/strong>\u00a0Si utilizas el plan gratuito de Mailgun, el email puede acabar en la carpeta de spam.<\/p>\n\n\n\n
\u00a1Enhorabuena! Has implementado y probado con \u00e9xito el flujo de trabajo de notificaciones por email de carritos abandonados utilizando la API de Mailgun.<\/p>\n\n\n\nSeguimiento y gesti\u00f3n de emails<\/h2>\n\n\n\n
Para acceder a esta informaci\u00f3n estrat\u00e9gica, navega a\u00a0Send > Panel de informes > M\u00e9tricas<\/strong>\u00a0en el panel de control de Mailgun:<\/p>\n\n\n\n![\"Mailgun](\"https:\/\/i.imgur.com\/J71wf64.png\")
<\/p>\n\n\n\n
Recuento de enviados:<\/strong>\u00a0N\u00famero total de emails intentados
Recuento de entregados:<\/strong>\u00a0Emails recibidos con \u00e9xito por los destinatarios
Recuento de abiertos:<\/strong>\u00a0N\u00famero de aperturas de emails por los destinatarios (si se ha activado el seguimiento de aperturas)
Recuento de fallidos:<\/strong>\u00a0Emails que han fallado debido a problemas como direcciones inv\u00e1lidas o filtros de correo no deseado<\/p>\n\n\n\n
Para un an\u00e1lisis m\u00e1s profundo, la pesta\u00f1a\u00a0Logs<\/strong>\u00a0proporciona registros detallados del estado de cada email, mientras que la pesta\u00f1a de\u00a0clasificaci\u00f3n de rebotes<\/strong>\u00a0ayuda a diagnosticar los fallos.
Una alta tasa de rebotes puede afectar de forma negativa a la entregabilidad de tu email. Para reducir los rebotes, revisa peri\u00f3dicamente la pesta\u00f1a de\u00a0clasificaci\u00f3n de rebotes<\/strong>\u00a0en Mailgun, elimina los emails inv\u00e1lidos y utiliza listas de supresi\u00f3n para evitar reenv\u00edos a las direcciones de los rebotes.<\/p>\n\n\n\nEn resumen<\/h2>\n\n\n\n
Puedes encontrar el c\u00f3digo completo de este tutorial en\u00a0este repositorio de GitHub<\/a>.<\/p>\n\n\n\n
Ahora puedes poner estos conocimientos en pr\u00e1ctica: integra Mailgun en tus proyectos y comienza a usar emails transaccionales para mejorar la experiencia de usuario.\u00a0Explorar Plantillas para correos transaccionales<\/a> y prueba la API de Mailgun<\/a>\u00a0gratis hoy mismo!<\/p>\n\n\n
Antes de comenzar, aseg\u00farate de tener lo siguiente:<\/strong><\/p>\n\n\n\n\n
Configurar una cuenta de Mailgun<\/h2>\n\n\n\n