Antes de avanzar con este instructivo es importante que integre su E-commerce con MailUp y que el canal soporte dicho servicio para detectar los carros abandonados de los clientes.
Luego de integrar su E-commerce con MailUp notara que se agrega automáticamente otra integración entre Midway y MailUp con un cartel de AUTOMÁTICO, esta integración la creamos para agilizar su configuración en MailUp y pre cargar toda la información necesaria para disparar la notificación.
Una vez que la integración detecte carros abandonados, automáticamente creara en MailUp un endpoint de personalización llamado "Midway - Abandoned cart" como así también un grupo llamado "Midway - Carts".
Crear endpoint de personalización manualmente
Para crear o comprobar el endpoint de personalización debe ir en MailUp a:
Ajustes > Ajustes avanzados > Personalización
Luego ir a: Endpoints de personalización
Aquí debe buscar si existe un endpoint de personalización llamado "Midway - Abandoned cart" y editarlo para ver su configuración.
Si no existe, entonces debe hacer clic sobre Nuevo endpoint.
A continuación se puede ver la configuración del endpoint de personalización.
Nombre del endpoint: Midway - Abandoned cart
URL del endpoint: https://api.midway.la/api/2.0/projects/<PROJECT ID>/cart
Es importante que busque su PROJECT ID desde Midway y reemplazar por su ID.
Parámetros obligatorios:
Nombre del parámetro: email, parámetro: Email
Parámetros opcionales:
Nombre del parámetro: limit, parámetro: Valor constante, valor ejemplo: 6
Nombre del parámetro: currency, parámetro: Valor constante, valor ejemplo: $
Nombre del parámetro: decimals, parámetro: Valor constante, valor ejemplo: 2
Nombre del parámetro: decimal_separator, parámetro: Valor constante, valor ejemplo: ,
Nombre del parámetro: thousands_separator, parámetro: Valor constante, valor ejemplo: .
Guarde su endpoint de personalización.
Crear el template de carro abandonado
Para crear el template de carro abandonado debe ir en MailUp a:
Mensajes > Email > Guardados
Luego ir a "NUEVO EMAIL".
Luego ir a EMPIEZA A DISEÑAR.
Seleccione la plantilla "Mensaje en blanco".
Dentro del editor drag&drop debe incluir una fila con la estructura que quiere mostrar sus productos y luego seleccionarla.
En nuestro ejemplo vamos a utilizar la fila que tiene más espacio de la derecha, una vez que la arrastramos la seleccionamos y en el menú de la derecha tenemos que hacer clic donde dice "Añade condición".
En el formulario que aparece debe configurarlo de la siguiente manera:
Nombre: Productos
Descripción: Productos
Antes: {% for item in items %}
Después: {% endfor %}
Hacer clic en Confirmar
Esta configuración sirve para repetir la misma fila N veces (N representa la cantidad total de productos que cada cliente tenga en su carro o la cantidad limite que asigno en el endpoint de personalization).
A continuación debemos agregar un contenido de HTML en el recuadro izquierdo y configurarlo con el siguiente código.
<a href="{{item.link}}" target="_blank"> <img src="{{item.image}}" width="128" height="128" style="width:1.33in;height:1.33in;text-decoration:none" /> </a>Quedando de la siguiente manera:
Luego debemos agregar contenido de texto en el recuadro derecho y configurarlo con las siguientes variables.
Opción 1 (simple)
{{item.name}} {{item.price_sale_formatted}} {{item.quantity}}Quedando de la siguiente manera:
Opción 2 (avanzado)
Si quiere un diseño utilizando el precio normal tachado y resaltar el precio con descuento, puede utilizar las siguientes variables.
{% if item.price != item.price_sale %}Antes: Ahora: {% else %}Ahora: {% endif %}Luego con el editor de texto puede agregar colores y tachar texto quedando de la siguiente manera:
Para finalizar hay que agregar un botón que nos lleve a finalizar el carro abandonado en nuestro checkout.
Agregue una fila nueva, un botón y en el valor de la URL ingrese la variable quedando de la siguiente manera:
Una vez que ya hemos terminado de configurar el diseño de nuestro carro abandonado, debemos guardar y asignar un asunto. Luego, en el menú de resumen del mensaje hay que ir a la sección avanzada y asignar el endpoint de personalización llamado "Midway - Abandoned cart".
Asignar endpoint de personalización al template de carro abandonado
Dentro del resumen del mensaje debe ir a Avanzado.
Ir hasta abajo y en la sección de Endpoints debe primero habilitar el módulo y a continuación seleccionar el endpoint de personalización llamado "Midway - Abandoned cart" y de clic en GUARDAR.
Probar la vista previa de los carros abandonados
Una vez que haya realizado todos los pasos anteriores, puede ir al preview del mensaje y va a ver que aparece una opción de "Vista previa", haga clic.
Una vez se abra la pantalla deberá seleccionar en la sección de grupos, el grupo de "Midway - Carts" para que MailUp tome un contacto de ese grupo de manera aleatoria y genere la vista previa.
El id del mensaje o del grupo va a ser diferente en su plataforma MailUp.
La vista previa: