Formas de agregar un newsletter a tu sitio web blogdown

Paso 1: Crear la cuenta y el newsletter

Puedes crearte una cuenta de Buttondown desde aquí. Luego de hacerlo serás redirigido de inmediato a una página donde configurar el newsletter, indicando el título, descripción, y otras opciones (por ejemplo, si tener un archivo o un feed RSS para los correos enviados previadamente)¹.

Así es la página de configuración del newsletter en Buttondown. Esta aparecerá justo después de crear tu cuenta.

Finalmente, en esta página es posible importar suscriptores en formato CSV, algo útil si estás migrando un newsletter desde otra plataforma, o si ya tienes una lista de personas que desean suscribirse.

Paso 2: Implementar el formulario de suscripción

Una vez creada la cuenta y configurado el newsletter es necesario habilitar un mecanismo para que las personas se suscriban. En Buttondown esto se puede hacer en la sección “Embedding & sharing” del Menú principal.

Desde aquí puedes elegir entre varios tipos de formularios de suscripción:

• Formulario en Buttondown.email, con una URL única que puedes compartir o linkear desde tu blog (aquí un ejemplo). Esta es la opción más fácil: solo hay que tomar la URL y crear un link desde algún lugar visible en tu blog (por ej., la barra de navegación).

• Formularios HTML/iFrame que puedes incrustar dentro de tu propio blog, así no es necesario que lectores vayan hacia una URL externa para suscribirse. Si vas por esta opción, recomendaría escoger el formulario HTML (sección “Share as a form” dentro de Buttondown) y no el iFrame. Para implementarlo hay que copiar el código que sale ahí, y pegarlo en un archivo .md dentro de la carpeta con las páginas de tu blog (usualmente es la carpeta ~/content).

Luego hay que hacer que la página con el formulario sea accesible desde la navegación del blog, linkeandola desde la barra de navegación o algún otro lugar visible.

Aquí recomendaría nombrar subscribe.md o suscribirse.md a la página con el formulario. Así dicha página será accesible desde una URL como baseURL/subscribe (donde baseURL es la URL que nos lleva a la página de inicio del blog), la cual es fácil de compartir o agregar a la barra navegación.

Un detalle importante respecto a los formularios HTML es que a veces no cargan, debido a una restricción del motor de renderizado de hugo. Si te encuentras con este problema, puedes solucionarlo agregando esta porción de código al final del archivo config.toml de tu sitio blogdown.

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Paso 3: ¡Listo! A enviar correos (manualmente)

Teniendo ya el newsletter configurado y una lista de suscriptores cargada, puedes empezar de inmediato a enviar boletines con los nuevos posts de tu blog. Para esto hay que ir al Menú -> opción “Write” (o directamente a buttondown.email/emails) y escribir y enviar el boletín desde ahí. Incluso es posible programar el envío para un momento posterior.

Bonus: Habilitar tags o listas de suscriptores

Una funcionalidad interesante que ofrece Buttondown es la de segmentar la audiencia mediante tags. Esto es, agregar etiquetas a cada suscriptor para después enviar ciertos boletines sólo a quienes poseen una determinada etiqueta.

Un posible uso de esto es tener un newsletter multilingue, clasificando a los suscriptores según su idioma de preferencia y luego enviando distintos correos a cada uno en el idioma correspondiente.

Mejor todavía, se pueden crear distintos formularios de suscripción de forma tal que los tags se apliquen de forma automática según el formulario utilizado. Para lograr esto solo hay que crear los tags y luego regresar al paso 2, donde ahora aparecerá una opción para elegir el tag asociado al formulario que estamos creando.

Esto último funciona muy bien al combinarse con la funcionalidad multilingue de hugo y blogdown, permitiendo tener una página de suscripción distinta para cada idioma del sitio (por ejemplo, en mi blog tengo el formulario franciscoyira.com/subscribe en inglés y franciscoyira.com/es/subscribe en español).

Paso 1: Registrarse en MailChimp (y dar una dirección física)

Al igual que con Buttondown, el primer paso para usar MailChimp es crear una cuenta. Sin embargo, aquí aparece una consideración adicional: a causa del carácter más “profesional” de este servicio se nos solicita registrar una dirección física, debido a leyes anti-spam internacionales que obligan a dar tal información a quienes envíen correos masivos.

Esta dirección luego aparecerá por defecto al pie de los correos enviados y en algunos formularios del flujo de suscripción (por ejemplo, cuando un suscriptor cambia sus preferencias). Es posible ocultarla en algunos lugares, pero no en todos, por lo que siempre habrá páginas públicas que muestren la dirección registrada.

¿Qué hacer aquí? Es natural que nos cause incomodidad publicar un dato así de sensible, pero si no ingresamos nada en ese campo, MailChimp simplemente no nos deja seguir.

Las recomendaciones oficiales de MailChimp para evitar dar la dirección de nuestro hogar son las siguientes:

• Dar la dirección de una universidad, en caso de ser estudiantes o estar afiliados a una institución académica.

• Dar la dirección de nuestro lugar de trabajo o de un espacio de cowork.

• Contratar una casilla postal y usar esa dirección como información de contacto.

En general, cualquier dirección donde podamos recibir y recoger correo físico será una opción válida que cumplirá con la legislación anti-spam.

Además de la disyuntiva de la dirección física, al registrarnos en MailChimp también debemos escoger el plan a contratar (aquí el gratuito debería ser suficiente si la lista de suscripción es pequeña), y un “Nombre del negocio”, que debería ser el nombre de nuestro sitio web o blog.

Los planes que ofrece MailChimp. Si recién estamos empezando nuestro newsletter, el plan gratuito debería ser suficiente.

Finalmente (e igual que en Buttondown), se muestra una opción para importar direcciones de correo, útil si es que estamos migrando un newsletter existente. En caso contrario se puede omitir.

Y listo, con eso finaliza el registro y podemos avanzar al paso 2.

Paso 2: Obtener la URL del feed RSS del blog

Para poder enviar los posts de forma automática a tus suscriptores es necesario contar con un feed RSS que se actualice cada vez que se publica un nuevo artículo.

La mayoría de los templates de hugo usados para blogdown entregan soporte nativo para RSS, disponibilizando un feed con los blogposts en una URL de este tipo:

baseURL/post/index.xml

Donde baseURL corresponde a la URL que nos lleva a la página principal del blog, y post es el nombre de la carpeta que contiene los artículos en el repositorio del blog, y usualmente ubicada dentro de ~/content. Por ejemplo, en este blog la baseURL es franciscoyira.com/es y el feed con los posts es franciscoyira.com/es/post/index.xml.

En otros templates de blogdown esta carpeta puede tener otro nombre, pero el rasgo distintivo que permite identificarla es que dentro de ella se guardan los artículos del blog (archivos en formato .Rmd, .Rmarkdown o .md). A veces el nombre de esta carpeta está especificado en un archivo config.toml en el directorio raíz del repositorio³.

Feed RSS de mi blog previsualizado con The RSS Aggregator

Una vez obtenida la URL del feed RSS puede ser buena idea previsualizarla para así validar su contenido. Para ello se pueden usar opciones como estas:

• RSS Viewer: una herramienta web en la cual se ingresa la URL del feed y se obtiene una vista HTML de este.

• The RSS Aggregator: un lector RSS disponible como extensión para Chrome y Edge (Chromium). Al instalarlo podremos visualizar los feeds RSS directamente en el navegador.

• Feedly: un lector RSS disponible como servicio web. Es muy completo y popular pero requiere crear una cuenta.

Paso 3: Crear el newsletter automatizado a partir del feed RSS

Ya con la URL del feed RSS en mano, procedemos a crear la automatización de MailChimp para enviar un correo cada vez que se publique un nuevo artículo.

Para ello hay que ir a esta página y hacer clic en el botón “Turn On RSS-to-Email”.

Luego aparecerá una vista como esta, donde se le debe asignar un nombre a la “campaña” (“Campaign Name”). Este nombre es interno y tiene como fin distinguir este envío recurrente de otros envíos (manuales o automatizados) que implementemos en el futuro.

Presionamos “Begin”, y en la siguiente página hay que ingresar la famosa URL del feed RSS obtenida en el paso anterior. Además, se puede configurar a qué hora se enviarán los correos automatizados⁴. Si todo está OK, hay que presionar “Next” en la esquina inferior derecha.

En la siguiente pantalla hay que seleccionar la audiencia a la que le llegará el newsletter. Aquí dejaremos el valor por defecto (“Entire audience”) ya que estamos creando un newsletter único (no segmentado) para todos los suscriptores⁵.

Luego de presionar “Next” aparecerá la sección de “Información de campaña”, donde se pueden personalizar otros parámetros del newsletter.

El primer campo (“Campaign name”) corresponde al mismo “nombre de campaña” que ingresamos en la primera parte del asistente, y que es solo de uso interno.

El segundo campo (“Email subject”) sí es relevante para los suscriptores: es el título o asunto de los correos que recibirán. Aquí es posible usar los llamados “merge tags” de MailChimp: variables que son reemplazadas por atributos provenientes desde el feed RSS, o del gestor de audiencias de MailChimp (por ej, el nombre o apellido de cada suscriptor, o la fecha de publicación del artículo). En mi caso, uso el tag *|RSSITEM:TITLE|* que corresponde al título de cada nuevo artículo.

El tercer campo (“Preview text”) corresponde al fragmento que aparece debajo del asunto en las apps de correo electrónico.

Así se ve el “Preview text” en las apps de correo electrónico. Fuente: benchmarkemail.com

No logré encontrar un merge tag útil para personalizar el preview text, así que opté por un mensaje estático: “Abre este correo para leer el artículo completo”, pensando en incrementar la tasa de apertura del newsletter.

Los últimos 2 campos de esta sección corresponden al remitente: el nombre (“From name”) y correo (“From email address”) que aparecerán en el “De:” o “From:” cuando los suscriptores reciban el newsletter. Aquí la idea es usar algo fácilmente reconocible para evitar que los suscriptores se confundan y piensen que es spam.

Más abajo en la misma página hay algunas opciones adicionales, pero que pueden dejarse con sus valores por defecto sin modificar.

A continuación presionamos Next y pasamos a la siguiente sección: escoger la plantilla para el newsletter. En esta sección mi recomendación es elegir “1 Column” o “Simple Text”, que tienen lo justo y necesario para que nuestros posts se muestren correctamente. Para este tutorial elegiré “Simple Text”.

Las plantilla básicas “1 Column” y “Simple Text” son buenas opciones para un Newsletter de blogposts.

Habiendo seleccionado la plantilla, aparecerá la vista de Diseño (“Design”) donde hay que hacer algunos cambios para que el newsletter funcione de manera adecuada.

Así luce la vista de Diseño del newsletter luego de haber escogido la plantilla “Simple Text”

En particular, debemos insertar una serie de merge tags RSS para que contenido del newsletter se alimente de los nuevos posts del blog.

Para mí, la forma más sencilla de hacer esto fue borrar todos los bloques que vienen con la plantilla, e insertar 3 nuevos bloques de texto (“Text” desde la galería de contenido de la derecha). Luego seleccioné y edité estos bloques, e inserté ahí los merge tags correspondientes.

A continuación describo cada uno de estos bloques (junto al código HTML para replicarlos):

Primero, un bloque de cabecera, muy simple, en un tamaño de letra pequeño y con un link directo al post en el blog. ¿Por qué? Debido a que a veces los clientes de correo no muestran correctamente el contenido de los newsletters y en estos casos queremos que el lector pueda ir fácilmente al artículo original usando un navegador web⁶.

El HTML para este bloque es el siguiente:

<span style="font-size:12px"><a href="*|RSSITEM:URL|*" target="_blank">Ver el post en tu navegador</a>&nbsp;(recomendado).</span>

Y debería verse así en el panel de la izquierda:

Nótese la presencia del merge tag *|RSSITEM:URL|* en el link. Este merge tag se reemplazará por la URL correspondiente al post en cada envío del newsletter.

Luego viene un bloque de contenido, cuyo código es el siguiente:

<h2 class="mc-toc-title"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><a href="*|RSSITEM:URL|*" target="_blank">*|RSSITEM:TITLE|*</a></span></h2>
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif">*|RSSITEM:CONTENT_FULL|*</span>

<pre>
<span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif">*|END:RSSITEMS|*</span>
</pre>

Y debería verse así en el panel de la izquierda:

Y finalmente un bloque footer, con elementos obligatorios como la licencia del contenido y el link de desuscripción. El código que usé para este bloque es el siguiente:

<em>Este trabajo est&aacute; licenciado bajo &nbsp;<a href="http://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons Attribution 4.0 International License</a>.</em><br />
<br />
*|LIST:DESCRIPTION|*<br />
<br />
&iquest;Quieres cambiar como recibes estos e-mails?<br />
Puedes <a href="*|UPDATE_PROFILE|*">actualizar tus preferencias</a> o <a href="*|UNSUB|*">desuscribirte de esta lista</a>.<br />
<br />
*|REWARDS|*

Y debería verse así en el panel de la izquierda:

Por supuesto, en este último bloque deberías modificar la parte de la licencia en caso de que quieras usar una distinta a CC 4.0.

Notar que MailChimp ofrece un editor visual para los bloques de texto, por lo que técnicamente no es necesario manipular HTML: los merge tags se pueden insertar “tal cual” en este editor visual, y su formato (fuente, tamaño) se puede modificar desde ahí. Pero yo prefiero compartirles los bloques de código porque así es más fácil seguir las instrucciones: solo basta copiar y pegar. Una vez copiados los bloques se puede cambiar sin problemas al editor visual para seguir personalizándolos.

Y listo, habiendo ya diseñado y personalizado el newsletter podemos echarle un vistazo a como lucirá en las bandejas de entrada de nuestros suscriptores ✨. Para esto existe el menú “Preview and Test” en la esquina superior derecha, dentro de la misma sección Design. Este menú permite previsualizar un correo de prueba en la web de MailChimp o en la aplicación móvil, e incluso enviarnos un correo de prueba a nosotros mismos (o a amigos dispuestos a ser conejillos de indias).

Una vez conformes con cómo se verá el newsletter presionamos “Next” y avanzamos al último paso de esta sección: Confirmar que todo esté OK y dar luz verde a los envíos automáticos.

En esta página se puede dar un último vistazo a las opciones del envío, y volver atrás si es que aun queremos cambiar algo. Si todo nos parece bien, hay 2 opciones para que el newsletter empiece a operar:

• Start RSS (botón abajo a la derecha): pone en marcha la automatización, pero a partir del próximo post que se publique en blog. Es decir, no se enviará nada al momento de presionarlo, pero sí cuando publiquemos nuevos artículos en el futuro.

• Send now and Start RSS campaign (disponible al hacer clic en flecha al lado de “Start RSS”): también pone en marcha la automatización, pero realiza de inmediato un primer envío con el último post disponible en el blog.

Hay que elegir una de las 2 opciones y presionar el botón correspondiente, ¡y listo! Nuestro newsletter automatizado ya está funcionando.

Pero aún falta una parte muy importante: implementar el formulario de suscripción para que nuevos lectores puedan darse de alta.

Paso 4: Implementar el formulario de suscripción

Mientras que en Buttondown el formulario de suscripción viene configurado por defecto y sin muchas opciones de personalización, en MailChimp se nos da la posibilidad de diseñarlo nosotros mismos. El proceso de diseño es relativamente sencillo ya que contamos con un editor visual: para acceder a él solo hay que ir a Audience > Signup forms y ahí hacer clic en “Form Builder”.

Lo primero que veremos dentro del editor visual será el formulario de suscripción predeterminado de MailChimp. Este incluye el campo de correo electrónico, que es el único estrictamente necesario, y también otros como fecha de nacimiento, nombre, y apellido. Depende de nosotros cuáles de estos campos adicionales conservar y cuáles eliminar.

Para eliminar un campo hay que seleccionarlo y luego presionar “Delete” en la parte inferior del panel de la derecha. Se nos mostrará una advertencia ya que eliminar el campo implica también eliminar los datos vinculados a este (en el gestor de audiencias de MailChimp). Si ya hay datos asociados a este campo puede convenir simplemente ocultarlo (opción también disponible en el panel de la derecha).

Además, se pueden agregar campos nuevos para recolectar información adicional. Esto lo usaremos en la siguiente sección para implementar los newsletters segmentados, pero para el newsletter simple nos basta y sobra con el campo de correo electrónico.

Así se ve un formulario simple (sólo con un campo de correo) dentro del editor visual de MailChimp.

Una vez personalizado el formulario de suscripción tenemos 2 opciones para agregarlo a nuestro blog:

1. La más simple: usar el enlace directo al formulario de suscripción. Este enlace apunta a un formulario alojado en MailChimp que luce idéntico al diseñado/previsualizado en el editor visual. Este se puede obtener en la sección “Signup form URL” dentro del editor visual de formularios. Con esta URL se puede crear un link desde cualquier lugar visible del blog (por ej., la barra de navegación).

   

2. Incrustar el formulario en nuestro blog mediante código HTML. Esto es más complejo, pero evita que lectores tengan que ir a una URL externa para suscribirse, y además da al formulario una apariencia más consistente con el resto de nuestro blog.

Para implementar el formulario HTML incrustado hay que volver a Audience > Signup forms, pero ahora entrando en la sección “Embedded forms”.

En esta sección hay varias opciones de formularios incrustados, algunas con CSS y JavaScript, pero recomendaría usar la opción Unstyled: un formulario HTML básico que reduce la posibilidad de conflicto con el tema del blog.

Luego de seleccionar el formulario Unstyled recomiendo además desactivar la opción Include form title, porque el formulario se incrustará en una página Markdown que ya tiene su propio título.

Es importante mencionar que los campos de este formulario y los del formulario que diseñamos en el editor visual son los mismos. No estamos creando un formulario distinto, sino que usando otra forma de acceder a él.

Luego de configurar las opciones, hay que ir al final de la página y presionar el botón “Generate Embed Code”.

Se debe copiar el código que aparecerá ahí, y pegarlo en el archivo .md correspondiente (aquel donde queremos que se muestre el formulario de suscripción). El código debe ir debajo de la cabecera YAML (en mi caso agregué también un pequeño texto explicativo entre la cabecera y el formulario).

Al hacer knit del blog, la página con el formulario de suscripción debería lucir así:

¡Y listo! Aquí ya tenemos un formulario de suscripción totalmente funcional, conectado al newsletter automatizado que creamos en la sección anterior.

Sin embargo, yo hice 2 ajustes adicionales, totalmente opcionales, que creo que mejoran la apariencia y funcionalidad del formulario.

Primero, cambiar el estilo del botón “Subscribe”. El por defecto no tiene mucha apariencia de botón, y además le falta un salto de línea que lo separe del campo Email Address. Para esto hay que buscar este código:

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">

Y reemplazarlo por este código:

</br> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="height:27px; width:100px; font-size:16px"></div>

Segundo, agregar al final de la página un link al formulario alojado en MailChimp (el enlace directo que vimos en la sección anterior). ¿Por qué? Por la eventualidad de alguien que desee suscribirse pero use algún bloqueador de contenido (por ej., uBlock Origin) que le impida visualizar el formulario incrustado. Con este link esas personas tendrán una forma alternativa de darse de alta en el newsletter.

Para hacer este cambio basta con agregar un texto con el link correspondiente después de que termine el código del formulario incrustado (es decir, después de esta línea: <!--End mc_embed_signup-->).

Al hacer estos cambios la apariencia del formulario quedará así:

TL;DR

En resumen, depende de nosotros mismos crear una estructura de tags o categorías acorde a las listas de distribución que queramos tener. Una vez definida esta estructura, es sencillo obtener las URLs de los feeds RSS correspondientes: basta con encontrar la pagina del tag o categoría respectiva (para lo cual incluso se puede usar la navegación del blog) y agregar index.xml al final.

Y para especificar un idioma particular (en el caso de blogs multilingües) solo hace falta agregar el código de idioma después de la baseURL, siempre que se trate de un idioma distinto del “idioma base”.

Más personalización para el formulario incrustado

Si hemos optado por el formulario incrustado tenemos la opción de hacer algunos ajustes estéticos adicionales.

Para empezar, se pueden aplicar los mismos ajustes mostrados en la sección de newsletter no segmentado: mejorar el botón de suscripción, añadir un salto de línea después del campo de correo electrónico, y poner un link al formulario en MailChimp al final de la página (ante la eventualidad de que un bloqueador de contenido no permita visualizar el formulario incrustado).

Adicional a ello, creo que acá es buena idea cambiar los textos descriptivos de los grupos. Por ejemplo, dado que el formulario de este ejemplo sería bilingüe, aumentaría su usabilidad el describir las opciones tanto en inglés como en español.

Para lograr esto basta con ir al archivo .md donde está el formulario, invocar CTRL+F (o ⌘+F en Mac), buscar el texto que se muestra actualmente en el formulario y cambiarlo por otro nuevo que nos parezca más apropiado. En este caso, aplicaré los siguientes cambios:

Notar que esto no cambia el nombre interno de los campos de datos en el gestor de audiencias de MailChimp. Allí los campos siguen llamándose “Intereses/contenido" e”Idioma", y los valores asociados a cada alternativa son las opciones originales que configuramos en MailChimp.

Dicho de otra forma, existe simultáneamente un “valor interno” y un “valor para mostrar” para cada grupo y opción. Esto es útil ya que permite usar nombres cortos en los valores internos y nombres más largos y explicativos en los “valores para mostrar”.

Una vez conformes con la apariencia del formulario, hemos completado el segundo de los requisitos para tener un newsletter segmentado. Ahora vamos a usar estos ingredientes para el paso final: configurar el newsletter segmentado.