Multiplica el ratio de aperturas de tus emails controlando el Preheader Text

por | 6 Sep 2017 | Growth Marketing Online | 20 Comentarios

No nos poníamos despertador. Tampoco hacía falta porque el reloj biológico de Marina bien merece una revisión en watch-test.com. A las 8.30 como máximo, al más puro estilo “Yonatan no te vayas pa los hondos”, sonaba un “papaaaaaaaa, no quiero dormir más”. Salto de la cama, abrazote remolón, sonrisas, cosquillas, risas… ¿Qué vamos a hacer hoy? Pues lo de todos estos días. ¿Qué vamos a desayunar papi? Pues lo de todos estos días. ¿Me pones Canta? Pues claro, como todos estos días…

¡Hola! ¿Qué tal estás? ¿Bien? ¿Sí? ¿Cómo han ido las vacaciones? ¡Espera! No me lo digas que sé exactamente lo que vas a decir. De hecho, ya te hablaré del plugin “WP LoQueVasADecir Detector Pro”. Jajaja. ¿Vale? Venga: ¿Cómo han ido las vacaciones? Uno, dos, tres… COORTAS. ¿A que es lo que ibas a decir? Es que el plugin es bueno de verdad…

Pues para mí también, cortas muy cortas. Pero a la vez renovadoras. Coñe (ups), que he desconectado total. No móvil, no whatsapp, no nada. La hora según el sol. ¡Ya te iré contando!

A mi vuelta, como te podrás imaginar, escoger sobre qué escribir se me ha hecho algo difícil hasta el momento en que he revisado mi email y me he dado cuenta de algo que siempre tenemos delante, que tiene mucho potencial y que, sin embargo, alucinarías al ver que casi nadie aprovecha como es debido. No, malpensuqui, no me refiero al penezuqui.

Así que, sin más, he decidido hablarte (en vídeo y todo, por si no lo sabes) sobre el Preheader Text en los emails. Pues ya está. ¿Vamos? ¡Venga!

¿Qué es el preheader text y cómo funciona?

Pues lo primero que vamos a hacer es pensar en nuestra bandeja de entrada, bien sea de Gmail o de una aplicación de escritorio. ¿Identificamos los elementos?

Captura Gmail Preheader Text

Como puedes ver en la imagen, en una vista normal de Gmail se observan 3 elementos principales:

  1. El que te da en la frente.
  2. De lo que va el correo y punto.
  3. Preheader text. Del contenido del correo, una preview.

Si se te da tan bien el inglés como a mí, habrán rimado las tres y ya sabrás de lo que estamos hablando. ¿Verdad? Se trata de un texto de pre visualización del contenido del email, que los clientes de correo electrónico extraen para dar un poco más de información al usuario sin necesidad de que lo abra.

Como podrás imaginar o deducir o pulunificucrizar, los clientes de correo (Gmail, Airmail, Outlook, etc.) se encargan de extraer esa información directamente del contenido del email.

Oye, y eso es lo más importante porque, donde está el fallo, es que solemos obviar este detalle y dejamos lo que viene por defecto en las plantillas que usamos como diseño. ¿Y crees que no le pasa a tanta gente como para hacer un post? Pues te equivocas. Revisa tu bandeja de entrada y verás. Incluso empresas que facturan barbaridades…

Captura preheader text pccomponentes

Que fuerte, ¿verdad? Venga, mira tu bandeja de entrada, verás la gran cantidad de “fallitos” de este tipo que aún hay…

¿Qué clientes de correo muestran el preheader text?

Encontré la siguiente foto en este artículo de Campaign Monitor que ilustra muy bien qué clientes de correo muestran este texto y el límite de caracteres. He pensado que igual te mola tenerlo a la mano. ¿No?

Litmus clients preheader text

Fuente: Litmus

En lo que a Gmail respecta, la longitud del bloque de asunto + preheader es de aproximadamente 107 caracteres. Por tanto, dependiendo de la longitud del asunto, mostrará más o menos de preheader. ¿Pillas?

¿Cómo controlo qué texto debe aparecer en ese bloque preheader?

¡Exacto! Esa es la pregunta. Ains que listiqui has vuelto de las vacaciones. Cachesenlamar. Pero la respuesta es muy sencilla: basta con asegurarnos de colocar ese texto lo primero del todo. Así de fácil. El primer texto que el cliente de correo detecte, será el que muestre ahí.

Entonces, ahora es cuando abres los ojos como platos, la boca para hacer rulos con el humo, te acuerdas del día en que escogiste plantilla para tus emails y lo poco que te costó dejar el “Click aquí para ver en tu navegador” que viene por defecto como lo primerico de todo… Tranqui, no llores, mal de muchos Consuelo (loviu) de tontos.

Captura template Mailchimp

Y sí, eso es lo que aparecerá. Las nuevas plantillas vienen un con mensaje que dice “Use this area to offer a short preview of your email’s content” lo cual está muy bien pero que cuando estamos configurando la plantilla pues ponemos lo que sea ahí. ¿No te ha pasado? Y para el resto de los jamases… ese texto se queda ahí.

Pero ahora que has caído en la cuenta, ¿verdad que sí? Ahora vas a asegurarte siempre de colocar un texto molón, atractivo, rompedor o lo que quiera que se te ocurra que llame la atención de tus suscriptores a abrir ese email. ¿Verdad?

¿Puedo ocultar el preheader text en mis emails?

En la mayoría de los casos no debería preocuparte que ese texto que quieras usar como preheader, o preview text, aparezca como parte de tu email. Sin embargo, tal y como puedes ver en la imagen, un texto largo puede ocupar un espacio valioso en la pantalla.

Comparación preheader oculto y mostrado

Fuente: Campaign Monitor

Claro, aquí es que salta a la vista. Por tanto podría resultarnos interesante ocultar en los emails el preheader text. ¿Verdad?

La forma de hacerlo es sencilla. Simplemente tienes que encerrar el texto dentro de una etiqueta que diga “ocúltate” de modo que, aunque el cliente leerá el texto y lo usuará como preheader, en la plantilla no aparecerá.

Captura con preheader oculto

Como puedes ver en la foto, el preheader que aparece en la parte izquierda (bandeja de entrada) no aparece como parte del email. ¿Verdad que mola?

(Me acabo de acordar de mi chiste malo: ¿Cuántos emails tengo en mi bandeja después de venir de vacaciones? Mails de los que os imaginails.)

Pues como te explico en el vídeo que acompaña este post, la forma de hacerlo es insertando este código HTML junto después de la etiqueta que abre el <body>:

<span style=”display: none;”>Este texto que quieras de preheader</span>

Ahora bien. ¿Esto es recomendable o afectará a la calificación de SPAM de nuestros emails? Pues hay diferencia de opiniones ya que, leyendo este artículo de LITMUS podríamos deducir que si Gmail lo permite no tiene sentido que sea calificado como SPAM. ¿Verdad? Sin embargo, en este hilo de Stack Overflow, aseguran que sí y hacen referencia a las configuraciones de SpamAssassin que considerarían esta práctica como SPAM.

Ideas para aprovechar el preheader text y aumentar el ratio de apertura de los emails

Te propongo una cosa: yo te muestro 5 ideas de cómo puedes aprovechar el preheader text para incrementar el ratio de apertura de tus emails y tu luego en los comentarios me dejas otra. ¿Vale? La más alocada que se te ocurra. Y si no, pues me cuentas qué te parece el pelado de Pelayo o el Pelayo de pelado. Como tu veas. ¿Vale? Es que los comentarios son mi gasolina y lo sabes.

Venga, pues aquí tienes 5 ideas para aprovechar el preheader text y aumentar el Open Rate de tus emails:

  1. Presentación del contenido. Puedes usar una frase sencilla que resuma qué hay en el email. Tipo “Selección de productos TOP al 20% de descuento”.
  2. Completa tu asunto. Imagina que el asunto es “Nunca antes te había contado esto”. Si con el preheader añades “Se me hace difícil, pero tenía que hacerlo”. Cucha, si no lo abres es que tienes la templanza del maestro tortuga. La idea es cohesionar asunto y prehader para que se complementen.
  3. Gran incentivo. No es lo mismo que pongas “80% de descuento en mi nuevo curso sólo por ser tu” en el asunto que “Sólo par ti, mi curso al 20%” en el preheader. Lo segundo tiene más gancho. Si utilizas este espacio adicional para mostrar un resumen de incentivos, de beneficios claros que se obtienen, pues tendrá sus resultados.
  4. Mensaje personalizado. A mí esto no me gusta, pero como lo dicen en el post del que me estoy copiando (ups, digo inspirando, jajaja) pues lo pongo. Dice que utilices el nombre del remitente en el preheader text para darle contexto, para que tenga más atención.
  5. Haz un copy creativo, divertido y que sorprenda. Este me gusta más. Haz algo que se salga, que nadie se espere. Gamberrea, desafía, explora tus límites. Aprovecha ese espacio extra para hacer algo que nadie esperaba ver ahí y conseguirás más CTR. Nombra a tu remitente, dile algo, desafíale… Ya sabes.

¿Abrimos debate o qué?

¡Listo Evaristo! Ya hemos llegado al final. Vale que no ha sido un post de menos de 1.000 palabras pero espero que lo entiendas, estoy desentrenado. Y fíjate tú que yo nunca hubiese pensado que algo que parece tan obvio y sencillo pudiese dar para tantas palabras… pero aquí estamos.

En fin. Que ahora, según nuestro trato y contrato, te toca a ti: ¿Qué te ha parecido? ¿Habías caído en la cuenta de este detalle del preheader text? ¿Te pasó eso de que sabías que estaba pero no te lo habías tomado en serio? ¿Alguna sugerencia de cómo aprovecharlo para incrementar el Open Rate? ¿Te unes a mi club de “Démosle una hostia al John Nieve a ver si espabila? ¡Venga, porfi, participa! (lo de porfi es de verdad, en plan súplica ya si ese para por según sobre y tras)..

5/5 - (1 voto)

20 Comentarios

  1. Alicia

    Hola, Víctor! Había ganas de leerte! Muy fan del «pulunificucrizar»… A mí me has pillado abriendo el enlace ?

    Pues la verdad es que sí que me había dado cuenta de ese espacio en el correo, pero nunca me había planteado si podía cambiarse. Ahora ya cuando escriba algún email al menos me plantearé si usar ese espacio o no ^^

    Responder
    • Víctor Campuzano

      Jajajajaja. Bravo por ti por reconocerlo porque he registrado como unos cuantos clics más y aquí nadie se pronuncia… El premio para ti… 🙂

      Jo, muchas gracias por tus palabricas y por comentarme siempre, Alicia, cuando lances tu blog, si sigo joven (jejejeje), comentaré también en el tuyo..

      Abrazos!

      Pd. La semana que viene te Bosco y nos tomamos una cerve.

      Responder
  2. Joan

    Como siempre te lo digo con dos palabras… Im-presionante (jesulin de Ubrique dixit)

    Hoy me voy a dormir con una cosa nueva.

    No se me ocurre ningún calle yo action para poner, voy a estar pendiente de lo que comenté la otra gente

    Responder
    • Víctor Campuzano

      Hola Joan!! Qué bueno verte por aquí de nuevo!

      Pues mira, se me ocurre la siguiente Calle To Action: «730 rue de la apertura. O me abres o la pérdida de tortura». Jajajaja.

      Un abrazo! 🙂

      Responder
  3. #Jerby @ratonbloguero

    Este tipo de detalles viene a constatar la importancia del ‘copy’ en cualquier proyecto. Si tienes claro cual es tu ‘copy’, te será muy fácil encontrar la frase más adecuada para cada envío de email.

    En otro orden de cosas, estoy especulando con la posibilidad de la publicación de un post sobre el ‘CopyLean’; pero esa es ya otra historia. 😀

    Responder
    • Víctor Campuzano

      Cierto! El copy es imprescindible. Yo, de hecho, lo considero una de las partes clave.

      Por esto me he decidido a hacerme el curso de «Adopta un Copywriter» de Javi Pastor… ¡Os lo contaré!

      Un abrazo ratonzuelo. Voy a responderte en LinkedIn Ya … 🙂

      Responder
  4. Chus Naharro

    Víctor!
    Qué alegría leerte de nuevo y con contenido útil e inspirador. Es interesante lo que propones, ya que el preheader text es algo que pasa desapercibido. Me refiero a que nos ocupamos sólo del asunto y cuantos más elementos aprovechemos para favorecer la apertura, mucho mejor.
    100% de acuerdo con usar un copy atractivo, lo empezaré a usar en el blog 🙂
    El único «pero» que le veo es que si la pantalla es demasiado grande, aparece prácticamente todo el mensaje :S (a mí me pasa con el iMac)
    Un saludo y seguimos leyéndonos!

    Responder
    • Víctor Campuzano

      Hola Chus!! Cierto ciertísimo, en Mac casi te lee el mensaje directamente. De ahí que mucha gente aplique trucos como lo de ocultar el preheader aunque tiene opiniones a favor y en contra.

      Yo por ejemplo quería usar el meta-description como preheader de forma automática en las campañas de mis posts al completo, pero no lo he conseguido. Así hubiese molado que ya que me preocupo de ajustar el description se aprovechase más. Pero no coló.

      En fin. En tu próximo gadgetomail veré cómo lo has aplicado! 🙂

      Muchos abrazos Chus! 🙂

      Responder
  5. Juanjo Santana

    Hola Víctor! Gusto en volver a leerte. Ahora que ya has empezado, no te enfríes y coge carrerilla ;).

    Me has dejado ojiplático, la verdad, es algo en lo que ni había caído. Borro tanto spam diario, que ya ni me fijo en los que realmente me interesa y leo.

    Un abrazo!

    Responder
    • Víctor Campuzano

      Hola Juanjo!!

      Tómate una manzanilla de canabilla que dicen que es bueno para lo de ojiplático. No sé si para curarlo o afianzarlo, ya te lo comentaré… :p

      Tienes mucha razón en lo de que vamos a tope y nos fijamos en los detalles. Cosa que no debería ser así, pero que pasa.

      Me alegra mazo que te haya resultado útil el post! 🙂

      Responder
  6. Martín

    Hola,

    muy buen artículo y muy muy muy importante el tema que tratas, además de ser muy complejo y que seguramente no se tenga la solución ideal para el 100% de dispositivos/gestores de correos.

    Para ocultar el texto del preview en idealista usamos algo como esto
    Guía definitiva para alquilar piso compartido sin cometer errores
    Se debe poner justo debajo del body antes de cualquier otro texto o imagen (el preview también puede salir del alt de las imágenes).

    como bien dices el display:none puede ser considerado spam, al igual que el font-size: 0px
    Lo ideal, en mi opinión, es poner 1px y el color del texto igual que el color del fondo que tengamos en nuestro mail.

    Es importante jugar también con los copy, igual podemos poner un asunto o preview con un emoji (no abusar de ello, ya estamos cansados del iconito del avión de las compañias de vuelos/viajes pero para ciertas campañas puede llamar la atención)

    Saludos!

    Responder
    • Víctor Campuzano

      Hola Martín!!!

      Achooo! Un crack de idealista en mi blog. Me siento honrado! Muchas gracias por pasarte por aquí y, sobre todo, muchas gracias por contarnos lo del font-size 1px y el fondo. Yo he leído por ahí artículos y, efectivamente, es la opción que menos impacto tiene aunque hay algunos de los clientes de correo / filtros antispam que hasta valoran eso.

      El tema es de risa porque he leído noticias de 2016 que cuentan como Gmail ya acepta el display:none y yo me pregunto: si lo vas a considerar spam, ¿para qué lo aceptas?. En fin.

      Tu copy mola, gracias por compartirlo Martín. Espero que vuelvas pronto! 🙂

      Responder
  7. Borja Gómez

    ¡Hola Víctor!

    Ay… las vacaciones. No tener horarios, ni ordenador, ni urgencias. Snif, snif… Bueno, con un bebé de pocos meses tampoco es que haya podido dormir a pierna suelta, pero me he pegado unas siestacas que pa mí se quedan.

    Lo que comentas en tu post es muy interesante, como siempre. Ya había visto algo por ahí antes, no recuerdo dónde, pero no tan bien explicado como lo has hecho tú.

    A mí, la verdad, lo de ocultar el Preheader Text del cuerpo del email me da un poco de yuyu por si lo ponen como Spam. Prefiero que vaya bien integrado en el copy del email, pero yo es que soy un cagueta con esas cosas…

    Y me gusta mucho tu sugerencia de retar al lector; yo no me atrevo a hacerlo del todo. Pero sí es verdad que cuando veo que alguien lo hace, me gusta y abro el email. Así que probablemente vaya introduciendo poco a poco ese tono un poco más… ¿canalla, es la palabra? Bueno, tú me entiendes.

    Un abrazo grande y a seguir bien!

    Responder
    • Víctor Campuzano

      Hola Borja!!

      Jo, yo me acuerdo cuando Marina era pequeñita. Durante una temporada le dio por despertarse a las 2 y o en brazos o no dormía. Total que encontramos una postura simbiótica en la cama que permitía que ella durmiese y yo trabajase en el ordenador para mantenerme despierto y que no se me cayese. Total, que me hice un acortador de urls… Jajaja. Es muy bonita la época que estás viviendo. Disfrútala! 🙂

      Y si, canalla es la palabra y es lo que te deberías atrever a hacer, que da buenos resultados.

      Abrazos padrazo! 🙂

      Responder
  8. NATALIA

    La primera vez que te veo y muy muy satisfecha, contenido de calidad y muy didáctico, gracias!! Lo ultizaré para mi empresa http://www.partedelarte.es ¡Enhorabuena!

    Responder
  9. Sanchez

    ¡Increíble artículo! Sencillamente genial. Enhorabuena

    Responder
  10. Oswald

    Hola Víctor, muy buen artículo! He empezado a aplicar el prehader, y el inconveniente que encuentro es en cuanto al contenido posterior al prehader, que aparece en la línea de correo en la bandeja de entrada de Gmail´. Por ejemplo, si tienes a continuación del preheader, en la secuencia del código html de la plantilla, el típico «Si no visualiza correctamente este email…», aparece también en la bandeja de entrada. He probado metiendo etiquetas y para producir saltos de línea y que el texto no deseado desaparezca, pero nada. ¿Se os ocurre alguna otra forma? ¿Podría ser una idea insertar una etiqueta con un gif transparente? ¿o Gmail, al interpretar el html, pasa por alto todo lo que pongamos y se va a buscar lo que es texto plano puro y duro?

    Responder
    • Víctor Campuzano

      Hola Oswald!!

      Si, en efecto los clientes de correo como Gmail quitan todo el código html y se quedan con el texto, por eso los saltos de línea no te servirán. Una opción es poner el preheader más largo, que no haya espacio para el texto siguiente.

      Otra opción, que funciona muy bien, es que en tu plantilla incluyas un teaser (resumen) del correo antes del típo «si no puede visualizar». De esa forma el teaser será el que se muestre si el preheader es pequeño.

      Al margen de todo, creo que no es tan grave que salga lo de «si no puede ver», siempre y cuando antes de eso haya un texto que provoque interés y haga que el cliente abra el email. ¿Me sigues? Está bastante aceptado por parte de los usuarios ver ese texto.

      Saludos! 🙂

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.