Los 3 beneficios y las 8 mejores prácticas de las historias de AMP para maximizar la participación

La iniciativa de código abierto AMP allanó el camino para experiencias web móviles más rápidas. La adopción del formato AMP no solo aumentó la velocidad de las páginas web móviles, sino que también mejoró las tasas de conversión. Las páginas AMP ayudaron a generar un aumento del 10% en el tráfico del sitio web y un aumento del 20% en las conversiones de ventas:

Incluso con esos números impresionantes, al formato le faltaba una cosa: una experiencia de página web inmersiva basada en historias. Las historias de AMP se lanzaron específicamente para este propósito.

Las historias de AMP siguen el mismo formato que las historias de Snapchat, Instagram y Facebook y permiten a las marcas crear contenido visualmente impactante para captar la atención del usuario con la narración.

Esta publicación destacará todo lo que debe saber sobre las historias de AMP: beneficios, los componentes para crearlas, ejemplos y si el formato se aplica o no a la publicidad.

¿Qué son las historias de AMP?

AMP stories es un formato de narración visual para la web abierta. Las historias permiten a los lectores sumergirse en un contenido de pantalla completa que se puede tocar. El formato permite a los editores y especialistas en marketing crear contenido visual rápido, abierto y centrado en el usuario:

El formato se lanzó inicialmente con ocho editores, incluidos Vox Media, CNN, Mashable y el Washington Post. Después de que el formato obtuvo una buena tracción para estas marcas, se abrió a todos los desarrolladores de AMP.

Los usuarios ven una gran cantidad de contenido en sus dispositivos móviles, y este formato utiliza texto, imágenes, videos y gráficos en negrita para llamar la atención del usuario móvil lo más rápido posible y les permite consumir contenido de una manera que no es exigente:

Las historias de AMP aparecen en Google Images, Discover, Search y News.

El formato de retrato se transmite naturalmente en Google Feed con la tarjeta de historia con una imagen alta que domina la mayor parte de la pantalla. Las historias están etiquetadas como "Historia visual destacada", al tocar la historia se abre la pestaña personalizada de Chrome estándar para una historia de AMP.

El menú adicional en la parte superior derecha le permite acceder a los controles estándar del navegador, y la función "agregar a la colección" de Google también está presente en la barra de la aplicación.

Las historias de AMP aparecen en el feed de Google a la izquierda de la pantalla de inicio y también en la aplicación de Google.

Esto es lo que puede esperar ver al tocar para abrir una historia de AMP en los resultados de búsqueda de Google:

Beneficios de las historias de AMP

Al igual que en otras páginas web, las marcas y los editores pueden alojar el HTML de la historia de AMP en su sitio web y pueden vincularlo desde cualquier otra página para generar visitas. Las plataformas de descubrimiento utilizan técnicas como páginas pre-renderizables, carga de video optimizada y almacenamiento en caché para optimizar la entrega a los usuarios.

El formato de historia de Google AMP viene con plantillas de diseño predefinidas y flexibles, controles de interfaz de usuario estandarizados y componentes para compartir y agregar contenido de seguimiento.

Debería considerar la creación de historias de AMP porque son:

• Rápido: las historias de AMP se cargan rápidamente y brindan a los usuarios una experiencia fluida.
• Inmersivo: las historias crean una experiencia inmersiva, ya que se expanden y llenan visualmente la pantalla del usuario. El formato que se puede tocar ofrece oportunidades creativas para contar historias con flexibilidad de diseño que atrae al público.
• Abiertas: las historias de AMP son parte de la web abierta y se pueden compartir e integrar fácilmente en sitios web y aplicaciones sin estar limitadas a un solo ecosistema.

Finalmente, dado que las historias se construyen sobre la biblioteca de componentes de AMP, admiten funciones como análisis, que puede recopilar y analizar datos de usuario para sus historias de AMP.

Creando una historia de AMP

Para crear con éxito una historia de AMP, primero debe comprender las partes que componen esa historia.

Una historia de AMP se compone de páginas individuales, que se componen de capas individuales que contienen elementos HTML y AMP básicos:

Cada una de estas partes se traduce en componentes AMP, donde la historia se presenta mediante 'amp-story', la página se representa mediante 'amp-story-page' y las capas se representan mediante 'amp-story-grid-layer' :

Ahora que hemos descrito lo que constituye una historia de AMP, veamos los requisitos previos antes de seguir adelante:

1. Conocimientos básicos de HTML, CSS y JavaScript.
2. Comprensión básica de los conceptos básicos de AMP.
3. Un navegador de su elección.
4. Un editor de texto de su elección.

Una vez que hayas configurado estas cosas, sigue este tutorial para crear tu primera historia.

Mejores prácticas y especificaciones

Tenga en cuenta las siguientes prácticas recomendadas al crear una historia de AMP para captar la atención del usuario.

Elige un color de fondo

Cuando selecciona un color de fondo, proporciona una buena experiencia de usuario alternativa en caso de malas condiciones de red. El color de fondo debe ser representativo del color dominante en el activo de fondo de la página, por lo que proporciona una transición suave con las imágenes de la propia página.

Garantizar la legibilidad del texto

Este punto se refiere específicamente a las superposiciones de texto. Elija un color de fuente que contraste con el color de fondo porque brinda una mejor experiencia de usuario. Otra cosa que puede hacer es agregar una superposición de degradado entre el texto y la imagen para agregar contraste.

Usa texto mínimo

Para maximizar la participación y garantizar que se lea cada palabra, no agregue más de una o dos oraciones por página.

Hágalo significativo incluso sin audio

Si su historia incluye audio, asegúrese de que la historia sea significativa incluso sin sonido porque muchos usuarios ven historias de AMP sobre la marcha y pueden optar por verlas en silencio. También puede agregar subtítulos para transmitir su mensaje mientras el sonido está apagado.

Especificar un atributo de póster para video

El póster es una imagen que se muestra en la interfaz de usuario hasta que se descarga el video. Por lo general, es el primer fotograma del video, aunque cualquier imagen puede funcionar, debe elegir una imagen que sea representativa del video y permita una transición suave. Las dimensiones recomendadas para una imagen de póster son: 720p (720w x 1280h).

Especificar la fuente del video

Al especificar la fuente para un amp-video, use elementos secundarios en lugar del atributo src. Al usar el elemento secundario, puede especificar el tipo de video, así como agregar más fuentes de video. En el elemento hijo, especifique el tipo MIME mediante el atributo "tipo".

Para un rendimiento óptimo, intente proporcionar videos que no superen los 4 MB. Con videos más largos, considere dividir el video en varias páginas.

Los videos de historias son siempre verticales (es decir, vista vertical), con una relación de aspecto esperada de 16: 9. Utilice la resolución recomendada para el tipo de transmisión de video:

1. Para videos MP4, use H.264.
2. Para videos WEBM use VP9.
3. Para videos HLS o DASH, use H.264.

Optimizar videos

Hay varias herramientas que puede usar para codificar videos y ajustar la calidad del video durante la codificación, pero se recomienda que use las siguientes optimizaciones de video:

Continúe con la página siguiente después de que termine el video

Para avanzar automáticamente de una página a otra después de que un video termine de reproducirse, establezca el valor del atributo de avance automático después de en la identificación del video, en lugar de la duración esperada del video.

Ejemplos de historias de AMP

Las historias de AMP están destinadas a comunicar un mensaje a su audiencia. Las historias exitosas de AMP contienen activos de alta calidad, son visualmente ricas y comparten información relevante para el usuario.

El Correo de Washington

La historia de AMP del Washington Post gira en torno al daño catastrófico del huracán Michael:

Cableado

La historia de AMP de Wired lleva a los usuarios a un recorrido por el Museo del Helado:

Revista People

La historia de AMP de la revista People presenta la boda real:

Independientemente del tono de su contenido, puede usar historias de AMP para transmitir su mensaje de una manera más impactante visualmente.

Publicidad en historias de AMP

A continuación, le indicamos cómo publicar anuncios en las páginas de historias de AMP:

Actualmente, las historias de AMP admiten dos tipos de formatos de anuncios:

1. Anuncio de una sola página : cada anuncio de una sola página tiene un botón de llamada a la acción predefinido e, idealmente, dirige a los visitantes a una página de destino posterior al clic.
2. Anuncio de historia patrocinado: este tipo de anuncio es de varios pisos independiente. Funciona como una historia patrocinada y los editores pueden dirigir tráfico a ella desde el botón de URL de llamada a la acción de un anuncio de una sola página.

Las historias de AMP también tienen nuevas capacidades de sujetalibros que permiten un soporte de componentes más rico de diseños visuales. Puede agregar enlaces de CTA, cuadros de texto y tarjetas verticales y horizontales en los anuncios.

El siguiente es un ejemplo de un anuncio de una sola página de Google Pixel 2 dentro de una historia de CNN AMP:

Al igual que con todos los demás anuncios, para garantizar una página de destino posterior al clic optimizada, asegúrese de que su historia de AMP y el botón de CTA lleven a los visitantes a una página de destino posterior al clic dedicada en lugar de a una página de inicio ocupada.

Crea experiencias visuales fascinantes con historias de AMP

El formato de historias de AMP le permite crear experiencias de narración visualmente ricas y ultrarrápidas para su audiencia. Dado que el formato es de código abierto, puede crear fácilmente historias para su marca y, dado que existen en su sitio web, también se pueden encontrar en los resultados de búsqueda. Además, su formato visualmente envolvente se presta a una mayor participación de la audiencia.

¿Estás emocionado de experimentar lo que el formato AMP puede hacer por tu marca? Vea el constructor AMP de Instapage en acción y descubra por qué Instapage es la plataforma de optimización post-clic más robusta del mercado.