Articles

HTML5 y vídeo en el correo electrónico

Posted on

Artículo publicado por primera vez en octubre de 2009, actualizado en mayo de 2019

Con el panorama del marketing por correo electrónico cada vez más competitivo, los profesionales del marketing buscan formas de mejorar la experiencia del lector. Después de todo, si sus lectores disfrutan de sus correos electrónicos, será más probable que acepten su oferta, lo que se traduce en altas tasas de conversión (y en un aumento de los ingresos).

Una forma de ofrecer a sus lectores una mejor experiencia es incrustando vídeo HTML5 en sus correos electrónicos. El uso del vídeo en el marketing está en alza, y combinarlo con el email marketing puede ser una receta para el éxito.

Actualizado para 2019: El mejor uso del vídeo en el email

Si has estado en el circuito del email marketing en los últimos años, probablemente entiendas lo mucho que ha cambiado. Para empezar, conseguir que los suscriptores se inscriban en tu lista de correo electrónico no es tan fácil como antes. Y, una vez que has conseguido que algunos se inscriban, mantenerlos comprometidos puede ser difícil.

Por eso el vídeo se ha hecho tan popular en el correo electrónico.

Sin embargo, el HTML5 y el correo electrónico con vídeo no son nuevos en el marketing por correo electrónico. Los profesionales del marketing han tratado de unir estos dos elementos en el pasado, pero con resultados mixtos (desastrosos en algunos clientes de correo electrónico). Pero, con los avances tecnológicos, ha habido un resurgimiento en el uso de HTML5 y vídeo en el correo electrónico. Sólo es importante tener cuidado en la forma de hacerlo, ya que podría arruinar su campaña si no se hace de la manera correcta.

Tenga en cuenta lo siguiente cuando utilice el vídeo en sus correos electrónicos.

Haga saber a los lectores que hay un vídeo en el correo electrónico

Hacer saber a sus lectores que su correo electrónico contiene un vídeo es una buena manera de aumentar sus tasas de apertura. Hazlo incluyendo la palabra «vídeo» en la línea de asunto para despertar el interés de tus lectores.

Crea una serie

Una gran manera de mantener a los lectores comprometidos es creando una serie de vídeos para tu correo electrónico. Sólo asegúrate de que sea informativa y entretenida. Una forma de conseguirlo es mostrar a tus suscriptores lo que ocurre entre bastidores en tu negocio.

Crea vídeos testimoniales

Nada inspira más la acción que un testimonio. Pregunte a sus mejores clientes si pueden proporcionarle testimonios en vídeo. Estos se pueden hacer fácilmente sin ir a un estudio profesional. El video email marketing no tiene nada mejor que los testimonios en video reales y auténticos.

Mini tutoriales

¿Hay preguntas que tus clientes hacen constantemente? Prueba a crear tutoriales o vídeos educativos en torno a esos temas e inclúyelos en tus correos electrónicos. Esta es una excelente manera de mostrar lo que tu producto puede hacer y educar a tus clientes en las mejores prácticas.

Comparte la historia de tu marca

A todo el mundo le gusta una buena historia, y a tus clientes les encantaría conocer la tuya. Incrusta un vídeo de la historia de tu marca en tus correos electrónicos, especialmente en el de bienvenida. Esta es una forma fácil y eficiente de establecer una conexión con su audiencia.

Con tantos buenos usos para el vídeo en el correo electrónico, no hay ninguna razón por la que no deba adoptar el vídeo email marketing para su próxima campaña. Afortunadamente, no es difícil incrustar vídeo en el correo electrónico.

Enfoques para el vídeo en el correo electrónico

Esta no es la primera vez que examinamos de cerca el soporte para el vídeo en el correo electrónico. En nuestra investigación anterior, buscábamos un enfoque que permitiera el vídeo en los clientes de correo electrónico que lo admiten y una imagen de reserva en la que se pudiera hacer clic para los que no lo admiten (que entonces reproduciría el vídeo en el navegador).

Los resultados fueron decepcionantes. Sólo Apple Mail soportaba una reproducción de vídeo decente a través de Flash, y no había ninguna forma consistente de proporcionar contenido de reserva para aquellos clientes que no soportan Flash. Este parece ser el quid del problema. Si el vídeo no funciona, más vale que tengas un plan de respaldo que funcione bien para todos los demás. Dado que la mayoría de los clientes de correo electrónico eliminan la etiqueta <object> que se utiliza para insertar el vídeo, no había un plan de respaldo.

Un enfoque simple usando HTML5

Usando el muy genial Video for Everybody de Kroc Camen como punto de partida, estaba claro que el enfoque para el navegador sería muy diferente que para los clientes de correo electrónico.

La técnica de Kroc proporcionaba múltiples capas de soporte (visto aquí). Así, si HTML5 <video> no está disponible, se puede recurrir a QuickTime o Flash y casi siempre se garantiza que el video funcionará. Como sabemos que Flash y QuickTime están universalmente bloqueados en el correo electrónico, estas opciones de respaldo pueden ser despojadas para mantenerlo simple.

Debido a la batalla de códecs mencionada anteriormente, necesitas proporcionar tu vídeo tanto en H.264 (soportado por Apple y Google) como en Ogg Theora (soportado por Mozilla y Opera). Este no es el caso del correo electrónico. El único cliente de correo electrónico popular que utiliza Gecko (el motor de renderizado de Firefox) es Thunderbird, que actualmente opta por no mostrar vídeo HTML5. Así que, al igual que el fallback de Flash/Quicktime, Ogg Theora también está fuera. Si un gran número de sus destinatarios hacían clic en la versión web de sus correos electrónicos, entonces podría considerar añadirlo de nuevo para cualquier suscriptor que utilice Firefox.

El código final

Después de cortar todas las opciones de vídeo que el correo electrónico hace innecesarias, aquí está el código final que dio los mejores resultados.

Como puedes ver, proporcionas una imagen fallback (que se carga convenientemente como el cartel de la película antes de reproducirse para los clientes de correo electrónico que soportan vídeo) en la etiqueta <video> junto con el ancho y el alto del vídeo. Dentro de la etiqueta <video> llama al vídeo codificado en H.264 utilizando la etiqueta <source>, recordando hacer referencia completa al archivo en tu servidor.

Por último, añade el contenido de respaldo que te gustaría que se mostrara en cualquier cliente de correo electrónico que no soporte HTML5 dentro de las etiquetas <video>. Esto normalmente sería una captura de pantalla del vídeo en la que se puede hacer clic y que reproduciría el vídeo en el navegador al hacer clic.

Los resultados

Trabajando en un Mac, mi primera parada fue Apple Mail. El vídeo se reprodujo perfectamente. También se reproducía perfectamente en el cliente de correo electrónico del iPhone.

Luego pasé a los clientes de correo electrónico más populares basados en la web: Yahoo!, Gmail y Hotmail. Por desgracia, parece que los clientes de correo electrónico basados en la web están optando por deshabilitar la reproducción de vídeo HTML5. Aunque esto fue decepcionante, las noticias no son del todo malas. En lugar del vídeo, pude mostrar el contenido de respaldo proporcionado, en este caso, una imagen de respaldo en la que se podía hacer clic para enlazar con el vídeo en mi sitio web. Esta facilidad nunca estuvo disponible con ninguno de los intentos anteriores de vídeo real en el correo electrónico y fue una mejora bienvenida.

Como continué probando, los mismos resultados se experimentaron en los clientes de correo electrónico de escritorio en el PC. El vídeo no se reprodujo, pero la opción de reserva apareció en todos los clientes que probé. Aquí están los resultados completos:

AOL Web

.

Clientes de correo electrónico de escritorio Resultado
Apple Mail Se reproduce el vídeo
Entourage 2008 Se reproduce el vídeo
Lotus Notes 6, 7 y 8.5 ✘ Se muestra el contenido de Fallback Outlook 2007 ✘ Se muestra el contenido de Fallback Outlook 2003 ✘ Se muestra el contenido de Fallback mostrado
Thunderbird ✘ Fallback content displayed
Windows Mail ✘ Fallback content displayed
Web-basados en el correo electrónico Resultado
✘ Contenido de reserva mostrado
Gmail ✘ Contenido de reserva mostrado
Hotmail ✘ Se muestra el contenido fallback
MobileMe Se reproduce el vídeo
MySpace ✘ Se muestra el contenido fallback
Clientes de correo electrónico móviles Resultado
iPhone Se reproduce el vídeo

Verlo en acción

Para que te hagas una idea de cómo se reproduce el vídeo HTML5 en algunos de los clientes de correo electrónico más populares, aquí hay algunas capturas de pantalla de mis pruebas.

Apple Mail 4

Cuando abrí el correo electrónico en Apple Mail, la imagen de reserva que especifiqué en el atributo de póster se mostró mientras la película comenzó a transmitirse. Después de unos segundos, aparecieron los controles de vídeo y pude ver el progreso de la carga de la película y empezar a verla.

iPhone 3.1.2

El iPhone no admite la transmisión de vídeo en el navegador ni en el cliente de correo electrónico y, en su lugar, ofrece una indicación clara de que al hacer clic en la imagen del cartel se podrá ver la película. Al hacer clic en la imagen, se carga la película en el reproductor QuickTime del iPhone. Al final de la película, se vuelve al correo electrónico.

Outlook 2007

Al igual que todos los clientes de correo electrónico que no admiten vídeo HTML5, Outlook 2007 muestra el contenido alternativo que especificamos dentro de la etiqueta de vídeo. Este puede ser cualquier HTML que quieras y no está limitado a una sola imagen. En la mayoría de los casos, esto sería probablemente una captura de pantalla de la película y tal vez un icono de reproducción superpuesto para atraer al destinatario a hacer clic en la imagen y ver el vídeo en su navegador.

El resultado fue el mismo para todos los clientes de correo electrónico que no admitían vídeo HTML5, lo que hace que esta sea una forma práctica de proporcionar una experiencia consistente para cada destinatario.

¿Puede incrustar vídeo en Campaign Monitor?

Como cliente de Campaign Monitor, ¿puede incrustar vídeo HTM5 en el correo electrónico de forma eficaz? Sí, y es bastante fácil.

En nuestro nuevo y fácil de usar constructor de correo electrónico de arrastrar y soltar, haga clic en el bloque de contenido de vídeo y arrástrelo al lugar en el que desea incrustar un vídeo en su correo electrónico. A continuación, añade la URL de tu vídeo, como se muestra en el siguiente ejemplo:

Fuente: Campaign Monitor

Estos dos sencillos pasos son todo lo que se necesita para incrustar un vídeo HTML5 en su correo electrónico.

¿Debe utilizar esta técnica?

Este enfoque es probablemente la mejor opción disponible para incluir vídeo en el correo electrónico porque puede proporcionar de forma fiable un contenido de reserva que funciona en todos los clientes de correo electrónico. La limitación obvia es que, en este momento, sólo funciona para sus suscriptores que utilizan productos relacionados con Apple.

Tomar una decisión sobre la idoneidad de este enfoque realmente se reduce a su lista de suscriptores. Por ejemplo, el 50% de nuestra propia lista de clientes abre nuestro boletín mensual utilizando uno de los clientes de correo electrónico de Apple compatibles (puede averiguar esto para su propia lista utilizando nuestros prácticos informes de clientes de correo electrónico). Si quisiéramos incluir vídeo en un correo electrónico, esta técnica significaría que la mitad de nuestros suscriptores pueden ver el vídeo directamente en su cliente de correo electrónico, y la otra mitad verá una imagen de reserva perfectamente aceptable en la que pueden hacer clic para verlo en su navegador.

Resumen

Utilizar vídeo HTML5 en el correo electrónico no es nada difícil, especialmente si es cliente de Campaign Monitor. Tenga en cuenta estos enfoques y los resultados de las pruebas la próxima vez que considere añadir vídeo a sus campañas.

Para obtener más información sobre cómo puede utilizar el vídeo en el correo electrónico, consulte nuestro artículo Cómo utilizar el vídeo en el marketing por correo electrónico.

Deja una respuesta

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