Crear correos electrónicos flexibles en AEM

Crear correos electrónicos flexibles en AEM

_{DECLARACIÓN DE DIVULGACIÓN: Las opiniones en este contenido reflejan las opiniones del autor. Salvo que se indique específicamente en el artículo, GM Financial no está afiliada, no avala ni está avalada por ninguna de las compañías mencionadas. Todas las marcas comerciales y demás propiedad intelectual utilizadas o mostradas son propiedad de sus respectivos dueños.}

Cuando me uní al equipo de Ingeniería de tecnología de marketing (MarTech) de GM Financial en el verano de 2019, me pidieron que mejorara la conectividad de nuestro sistema de entrega digital multicanal. Específicamente, necesitaba una solución que permitiera a los gerentes de marketing de contenido crear correos electrónicos en Adobe Experience Manager (AEM) y luego sincronizar esos correos electrónicos con nuestro proveedor de servicios de correo electrónico,Adobe Campaign.

Esta capacidad permitiría a los vendedores tener más control sobre sus plazos de campaña de correo electrónico mediante el uso de la interfaz de arrastrar y soltar de AEM para diseñar sus propios correos electrónicos. Esto significaría que ya no tiene que depender del equipo de Ingeniería de MarTech para delimitar y entregar estos correos electrónicos HTML desde cero para cada campaña (aunque todavía estamos aquí para brindar orientación y asistencia).

Desafíos

Anteriormente, los correos electrónicos HTML se desarrollaban ad-hoc, fuera del equipo central de ingeniería MarTech. Por lo tanto, con un espíritu de mejora continua dentro de la organización, hemos sido capaces de centralizar todo el desarrollo web —incluido el correo electrónico— en el mismo equipo, con el fin de estar a la altura de los siguientes desafíos:

1. ¿Cómo llevar la funcionalidad de la creación de correo electrónico en AEM?
2. ¿Cómo garantizar que el correo electrónico final se procese adecuadamente en una amplia gama de clientes de correo electrónico y de forma receptiva tanto en vistas móviles como de escritorio?
3. ¿Cómo hacer que la creación sea lo suficientemente flexible para que los administradores de contenido puedan diseñar cualquier correo electrónico, independientemente del contenido, la estructura o la plantilla?

Esta solución necesitaría la capacidad de diseñar lo siguiente (esta lista no es exhaustiva):

• Arrendamiento electrónico de Cadillac
• Boletín mensual

Mientras que los desarrolladores de sitios web pueden recurrir a marcos como Bootstrap para garantizar una experiencia común, entre navegadores, los desarrolladores de correo electrónico no tienen tanta suerte. Tenemos que codificar como si estuviéramos en 1995. No hay flex, no hay cuadrícula y absolutamente ningún JavaScript. ¿Alguna vez ha intentado desarrollar HTML que tiene que ser representado por un procesador de textos? ¡No es divertido!

Soluciones

Pudimos encontrar soluciones para cada uno de los desafíos mencionados anteriormente.

El desafío 1 se resolvió combinando las capacidades listas para usar de la integración de Campaign y Experience Manager de Adobe, y las mejores prácticas de Experience Manager para plantillas de correo electrónico.

El desafío 2 se resolvió con mjml. Se trata de uno de los pocos marcos sólidos que permite la creación de correos electrónicos con capacidad de respuesta. Este marco, a través de su propio marcado, procesa HTML final y CSS que garantiza el soporte para la mayoría de los clientes de correo electrónico. 

El desafío 3 demostró ser el más interesante. Los dos desafíos anteriores se unieron utilizando la misma filosofía de desarrollo de aplicaciones web: componentes.

Si miramos más de cerca el ejemplo anterior del boletín mensual, podemos dividir la plantilla de correo electrónico en varios componentes de contenedor raíz, cada uno con componentes de columnas secundarias variables de tamaño n. Los tamaños de las columnas secundarias tienen un máximo de 4 para proporcionar una experiencia óptima para los lectores de correo electrónico de clientes de dispositivos móviles y de escritorio. 

Al continuar descomponiendo esa plantilla de correo electrónico específica y al pensar en cualquier plantilla en general, llegamos a los siguientes componentes:

Con estos componentes, los administradores de contenido pueden crear cualquier correo electrónico directamente desde la consola de administración de AEM, ¡sin necesidad de un código! Cada componente tiene propiedades independientes, lo que hace que el contenido, la capacidad de respuesta, el color de fondo, el relleno, etc. sea realmente flexible.

Aunque estos componentes son evaluados por unidad a través de Litmus, si un vendedor quiere explícitamente ver cómo el último mensaje de correo electrónico aparecerá en un determinado cliente, hay un botón para copiar el HTML en la pantalla de vista previa que copia la marca en el portapapeles del usuario para pegarlo directamente en Litmus.

En conclusión, al aprovechar una mezcla de soluciones existentes y un poco de intuición de ingeniería, los vendedores de GM Financial pueden continuar nuestra misión de ganar clientes de por vida mediante la entrega de campañas de correo electrónico de manera eficaz y eficiente.

By Eduardo Diosdado, GM Financial

Eduardo Diosdado is a Marketing Software Engineer Manager on the Marketing Technology Engineering team out of the Irving, TX office.