¿Cómo crear formularios de suscripción con Hooks + Gatsby & Mailchimp?

Hace unos pocos meses comencé a probar Gatsby como herramienta para hacer páginas web estáticas dadas las muchas ventajas que ofrece. Una muy importante es que nos permite consumir información de diversos data sources como por ejemplo un archivo markdown, un JSON, un CSV, un CMS o incluso una base de datos, lo cual da una gran flexibilidad a la hora de diseñar una solución.

Si necesitamos hacer algo rápido y sencillo, como un blog, podemos comenzar a trabajar con archivos markdown y luego ir migrando a un CMS o una base de datos a medida que escale.

¿Qué es Gatsby?

Es un framework open source gratuito basado en React que ayuda a los desarrolladores a crear aplicaciones y sitios web estáticos (HTML, CSS y Javascript) increíblemente rápidos.

¿Por qué usarlo?

Algunos de los motivos por los que decidí usarlo fueron:

• Permite extraer información de diferentes data sources.
• Precarga las páginas de una aplicación en sus servidores globales en lugar de tener que esperar que el usuario lo solicite, haciendo que estén listas para ser entregadas instantáneamente.
• Promueve el uso de GraphQL para obtener la información de los data sources. A su vez, GraphQL permite seleccionar solo los datos que necesitamos, no todo lo que devuelva una API. Además se pueden realizar transformaciones de datos en tiempo de build dentro de consultas GraphQL.
• Posee hot reloading y prettier configurados por default.
• Posee un amplio ecosistema de plugins que facilita la integración con diferentes aplicaciones y servicios.

Caso de uso

Para probar esta tecnología decidí hacer un blog minimalista utilizando uno de los starters del ecosistema Gatsby: gatsby-starter-blog, que genera un template de blog modificable.

Mientras avanzaba con el desarrollo me encontré un caso de uso particular que necesitaba resolver: implementar un formulario personalizado de suscripción para agregar nuevos emails a una lista de correo electrónico.

Como herramienta de mailing decidí utilizar Mailchimp por su facilidad de uso y las opciones que incluyen un plan gratuito.

¿Qué es Mailchimp?

Mailchimp es una plataforma de marketing all-in-one que permite reunir datos a partir de listas de suscriptores, más conocidos como audiencias. La principal función es poder promocionar un negocio a través de campañas de correo electrónico, obtener métricas, compartir publicaciones en redes sociales, crear landing pages, hacer newsletters usando un editor orientado a bloques (similar a Wordpress), usar templates o diseñar los propios, automatizar envíos masivos, etc..

Problemática

A pesar de todas las cosas geniales que mencionamos, Mailchimp no ofrece muchas opciones para hacer solicitudes desde el lado del cliente, y las que existen pueden resultar algo confusas. Sin embargo, en el caso de sitios construidos con Gatsby esta tarea resulta realmente sencilla.

Formularios embebidos

Si bien Mailchimp ofrece otras alternativas para embeber un form en un sitio web, saber cuál usar puede resultar confuso, sobre todo si recién se empieza en el mundo de la programación.

Una de ellas permite crearlo desde la paǵina de Mailchimp utilizando un editor gráfico. Sin embargo, el código generado es un HTML poco escalable que usa etiquetas script, lo cual se considera una mala práctica.

Si queremos trabajar con componentes React, manejar el estado o agregar nuestra lógica, existe un plugin llamado gatsby-plugin-mailchimp, que es una gran opción para poder construir nuestro propio componente en React.

Configuración de Mailchimp

Audiencia

Para comenzar se necesita tener un usuario de Mailchimp. En caso de no tenerlo, podemos crear uno registrando un email y contraseña desde la siguiente página.

Luego, hay que ir a la sección Audience y clickear en el botón View Contacts para poder acceder a una lista con todos nuestros suscriptores muy similar a esta:

En un principio solo contaremos con nuestro usuario como parte de la audiencia por default, que para este ejemplo llamamos Wolox.

Configuración de nuestra app

Para integrar nuestro formulario personalizado primero hay que instalar el plugin gatsby-plugin-mailchimp y agregar el endpoint de la audiencia Wolox en el archivo especial gatsby-config.js, como se muestra a continuación. Dicho archivo se encuentra en la raíz del proyecto.

Nota: Si bien se explica cómo encontrar el endpoint en la documentación del plugin, la misma está desactualizada. Esto se debe a que Mailchimp cambió su layout y podría no resultar muy intuitivo a simple vista.

Para obtener el endpoint primero hay que ingresar a la opción Signup forms del menú Manage Audiences en el dashboard de audiencias:

Y luego hacer click en el ítem Embedded forms de la lista de opciones.

Finalmente se debe copiar la URL que figura en el atributo action del form que viene por defecto en el editor gráfico de Mailchimp.

Y voilà, esa es toda la configuración que se necesita por parte de Mailchimp.

Código de ejemplo

Como el objetivo de este post no es ser una guía de cómo usar Gatsby, y además la documentación ya es bastante clara por sí misma, iré directo al código del componente SubscribeForm, donde hago uso del React Hook useState para guardar tres atributos en el estado:

1. El email que queremos enviar.
2. El resultado de la respuesta que nos devuelve Mailchimp (representado como un string).
3. Y el texto del mensaje propiamente dicho.

Agregar un nuevo suscriptor

Para agregar un nuevo suscriptor simplemente hay que importar y usar el método addToMailchimp que viene con el package del plugin. Este devuelve una promise con los atributos result and msg.

La API de Mailchimp devolverá siempre un código de estado 200, tanto para el caso de éxito como para el de error.

Para saber cuál fue el resultado de una suscripción, se debe leer el valor del atributo result en la respuesta de la API. Un resultado puede ser uno de estos dos strings: success o error.

Para que el ejemplo sea lo más simple posible de entender, utilicé solo CSS, haciendo uso de la metodología BEM. Sin embargo, podría haber aplicado cualquier otra solución de estilos como Emotion, CSS Modules, o Styled Components. De hecho, también en Gatsby existen plugins para éstas.

Además, hice una versión del componente SubscribeForm con CSS Modules que se encuentra en el siguiente Gist.

Por último, este repositorio contiene el código que utilicé para hacer este blog.

Ahora echemos un vistazo a nuestro SubscribeForm:

El resultado de este código fue el formulario de suscripción que se puede ver debajo en la siguiente vista:

Ventajas

Algunas de los beneficios que descubrí con esta prueba y que me gustaría destacar, son las siguientes:

• La API de mailchimp se encarga de verificar que el valor ingresado sea un email. En caso de ingresar uno inválido nos devuelve el correspondiente mensaje de error en el atributo msg de la response, junto con el atributo result seteado en error.
• Si el email ingresado es válido, nos devuelve un mensaje de éxito a modo de feedback para el usuario.
• Podemos trabajar con nuestro propio componente React.
• Podemos enviar información adicional a la API de Mailchimp. Por ejemplo, si queremos que nuestro form contenga inputs como nombre, apellido, edad, teléfono, intereses, cumpleaños, etc.
• Podemos agrupar por segmentos a nuestros suscriptores. Por citar un caso, podemos enviar newsletters a personas interesadas en leer más sobre nuestros productos o servicios.
• Podemos generar reportes que nos den información de cuantos newsletters fueron abiertos y cuantos no, la cantidad de rechazados, la hora en que fueron abiertos y demás datos.
• Finalmente, en el dashboard de audiencias podemos ver información muy útil como:
• La fuente de un suscriptor, es decir, si se agregó usando nuestro SubscribeForm o si fue cargado directamente desde la página de Mailchimp.
• La fecha en la que se suscribió.
• Otros datos como nombre, apellido, edad, teléfono, intereses, cumpleaños, etc.
• Mailchimp proporciona una calificación de contacto (Contact Rating) que va de uno a cinco estrellas para cada suscriptor. Esta información nos ayuda a decidir cuándo enviar una campaña de gratitud a los suscriptores más comprometidos, o una de recaptación para intentar recuperar a los que aún no hayan abierto o hecho click en un cierto tiempo.

Desventajas

• Hay un mensaje de error en el que Mailchimp nos responde una cadena de texto junto con código HTML, obligando a parsear este mensaje. En el código se puede ver como agregué el fragmento de código msg.split(‘<’); para resolver esto.
• Este plugin solo puede ser usado con React + Gatsby, lo cual deja afuera a otras librerías y frameworks como Vue o Angular. Asimismo, si se usa React pero no Gatsby este plugin también cae en desuso.
• La última versión de este plugin ya no es compatible con Gatsby v1.x. Dado que se realizaron muchos cambios en Gatsby v2 que harán que este plugin se rompa.

Resultado final

Luego de aplicar algunas modificaciones sobre el blog, el resultado fue la siguiente vista, que contiene esta información:

• Nombre del blog
• Un post con su titulo, fecha y descripción
• Nuestro propio formulario de suscripción personalizado.

Y podemos ver cómo nuestro nuevo suscriptor john.doe@wolox.com.ar se agregó exitosamente en nuestra audiencia:

Conclusión

Creo que fue una muy linda experiencia el haber conocido estas herramientas y haber podido dar una solución al negocio en el momento en el que lo necesitaba.

Estoy convencido que las ventajas que mencioné sobrepasan por mucho a las desventajas si uno está dispuesto a aprender y trabajar con nuevas herramientas.

Por eso, me gustaría que aquellos que hayan trabajado con algunas de ellas, comenten cuáles fueron sus experiencias, compartan recomendaciones, y qué cosas pudieron construir al usarlas. Y a las personas que aún no las conocen, los invitamos a probarlas y darnos su opinión.