Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores, consultores, administradores y arquitectos de Salesforce para toda Iberoamérica.
El enlace a la publicación original, lo encontrarás al final de este artículo.
…
La mayoría de los correos electrónicos que puede recibir a diario como consumidor son iguales. En su mayoría son información estática que no te permite interactuar y te envía a un sitio web para hacerlo.
Al implementar Accelerated Mobile Pages (AMP) en tus correos electrónicos, puedes cambiar esto para tus clientes. Esta entrada del blog le presentará los fundamentos de AMP y cómo implementar experiencias de correo electrónico interactivas basadas en datos en Marketing Cloud.
AMP
AMP, en pocas palabras, es un marco de componentes web diseñado para experiencias móviles de usuarios finales B2C. Fue desarrollado por Google y ahora forma parte de la fundación OpenJS. A estas alturas, es más que probable que hayas experimentado AMP desde la perspectiva del usuario-tierra. Por ejemplo, cuando buscas en Google tu localidad o periódico favorito, es posible que experimentes AMP. La siguiente captura de pantalla muestra un resultado de búsqueda de este tipo. El símbolo del rayo en la esquina superior derecha indica que este contenido se sirve a través de AMP.
Puedes aprender más sobre AMP en general, así como sus escenarios de uso en el sitio del proyecto AMP. Sin embargo, para esta entrada del blog, veremos la posibilidad de utilizar AMP, y aquí el subconjunto AMP Email, dentro de tus correos electrónicos de Marketing Cloud.
Correos electrónicos interactivos con AMP
Veamos un ejemplo de correo electrónico interactivo en el siguiente GIF. Imagina que has pedido una bicicleta nueva y has recibido el habitual correo electrónico de confirmación. Con los componentes de AMP, este correo electrónico ya no es estático. El correo electrónico ofrece una experiencia interactiva para programar una cita de preparación. No tendrá que salir del correo electrónico para seleccionar la fecha, la hora, su ubicación más cercana, o para completar la reserva en sí.
Este es sólo un ejemplo de cómo se pueden aprovechar los componentes de AMP en el correo electrónico. Vea más ejemplos aquí. El siguiente GIF muestra otro ejemplo, en el que el usuario puede cambiar entre diferentes imágenes en un carrusel – directamente desde su correo electrónico.
Vamos a ver qué se necesita para construir una experiencia de carrusel de este tipo.
Implementación de frontales de correo electrónico interactivos
Como los componentes AMP son componentes web, se utilizan como el marcado HTML estándar. Los dos siguientes fragmentos de código muestran el marcado para proporcionar una experiencia de carrusel como la mostrada anteriormente.
Cuando observes el marcado head del primer bloque de código, verás que:
- La primera acción es cargar el núcleo del framework.
- Luego se carga el o los componentes de AMP de forma asíncrona. En nuestro caso, se trata de un componente,
amp-carousel. - Dentro de la etiqueta
stylepuedes entonces definir cualquier estilo personalizado para los componentes AMP utilizados.
<!doctype html>
<html amp4email data-css-strict lang="es">
<head> ... <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <style amp4email-boilerplate>body{visibility:hidden}</style> <style amp-custom> ... amp-carousel .slide{ display:grid; transición: transformar 0.2s } ... </estilo>
</head>
<body> ...
</body>
En el segundo bloque de código, echaremos un vistazo al marcado para integrar un componente AMP en el body de HTML. Y no te preocupes, es sólo de marcado.
- El
amp-carouselse integra como cualquier otra etiqueta HTML. Los atributos de la etiqueta son específicos para el carrusel y variarán para otros componentes de AMP. - Dentro de la etiqueta
amp-carouselpuedes utilizar cualquier HTML, como el que hemos utilizado para implementar los enlaces y las imágenes. Ten en cuenta que las imágenes también son componentes AMP, ya que puedes identificarlas mediante la etiquetaamp-img. Sin embargo, no tienes que cargarlas por separado en la cabecera HTML, ya que se envían como parte del marco de trabajo AMP base.
!doctype html> <html amp4email data-css-strict lang="es"> <head> ... </head> <body> ... <div class="main"> <amp-carousel width="700" height="450" layout="responsive" type="slides" autoplay loop> ... <a href="https://ntoretail.com/shop/mens" class="slide"> <h2><span>Mens</span></h2> <amp-img src="https://s3.amazonaws.com/nto/images/home-mens.png" width="450" height="300" layout="responsive" alt="Ropa de hombre"></amp-img> </a> <a href="https://ntoretail.com/shop/womens" class="slide"> <h2><span>Womens</span></h2> <amp-img src="https://s3.amazonaws.com/nto/images/home-womens.png" width="450" height="300" layout="responsive" alt="Ropa de mujer"></amp-img> </a> ... </amp-carrusel> </div> ... </body> </html>
Eso es prácticamente todo sobre cómo construir la experiencia del front-end para correos electrónicos interactivos usando AMP. Pero espera, ¿qué hay que hacer cuando se quiere impulsar una experiencia dinámica en el momento de la apertura del correo electrónico? Esto es lo que veremos a continuación.
Proporcionar datos dinámicos utilizando recursos de código CloudPage
Una de las capacidades principales de Marketing Cloud es proporcionar contenido de marketing programático utilizando JavaScript del lado del servidor mediante recursos de código. Y algunos componentes de AMP, concretamente amp-form y amp-list, proporcionan la capacidad de consumir datos sobre la apertura del correo electrónico desde una fuente de datos como un Code Resource. Esto es una ventaja para todos.
El siguiente ejemplo de código abreviado muestra lo que se necesita para construir un JSON Code Resource para componentes AMP. El requisito clave para sus datos es que los construya dentro de un único array, y devuelva ese array como el valor de la clave del objeto items.
<script runat=»server» language=»JavaScript»> .. // Para devolver los datos, AMP requiere que los datos sean devueltos en un objeto con un único array llamado items. var obj = {«items»: [ {«clave»: «valor» } ]}; // Para que el Recurso de Código renderice los valores de ese array debes Stringify y Write el valor para renderizarlo. Write(Stringify(obj)); …
Eso es todo. Bueno, no del todo. Hay un par de cosas más a tener en cuenta, como añadir medidas de seguridad a tu JavaScript del lado del servidor. Puedes encontrar un ejemplo exhaustivo en el repo de GitHub de AMP Demos.
Sus próximos pasos
El correo electrónico de AMP es una emocionante incorporación a Marketing Cloud. Se basa en los principios de desarrollo web estándar y proporciona interactividad inmediata para sus correos electrónicos. Para empezar, hemos preparado una nueva aplicación de demostración con mucho código fuente para usted – que puede encontrar aquí en la Galería de muestras.
Para llevar esto a producción, regístrese en un proveedor de correo electrónico compatible y envíe un formulario de verificación del remitente:
Pruébelo y experimente el cambio de experiencias de correo electrónico estáticas a atractivas.