7 formas en las que puede utilizar AMP para comercio electrónico para generar más ventas (ejemplos)

Las páginas web lentas generan tasas de conversión bajas. La investigación ha demostrado que incluso una desaceleración de 100 ms en el tiempo de carga puede afectar las conversiones en una página web. En última instancia, los usuarios no quieren esperar. Es esa verdad la que hizo que Google se propusiera acelerar la web móvil con Accelerated Mobile Pages hace años.

Y aunque el marco AMP se ha vuelto capaz de acomodar una variedad de páginas web en una variedad de verticales, algunos todavía creen que AMP no puede acelerar mucho más allá de una página web estática. Hoy, sin embargo, AMP es capaz de ofrecer contenido dinámico, páginas de pago, sitios web completos e incluso una web progresiva con su marco liviano. Como resultado, las marcas recurren cada vez más a AMP para el comercio electrónico.

Usar AMP para comercio electrónico

Hay una razón por la que las marcas de comercio electrónico han tardado en invertir en AMP: sus necesidades son mucho más complejas que las necesidades de los editores de noticias, que AMP inicialmente se propuso atender. Las marcas de comercio electrónico necesitan listas de productos, capacidades de inicio de sesión, contenido dinámico, páginas de pago y los niveles más altos de seguridad web.

Pero años después de su lanzamiento inicial, AMP permite que las marcas de comercio electrónico satisfagan estas necesidades, con nuevos componentes y soluciones técnicas que brindan tiempos de carga de alta velocidad para todo tipo de páginas. Aquí hay algunas cosas impresionantes que AMP puede admitir ahora:

• Contenido dinámico: el contenido de un sitio web de comercio electrónico cambia constantemente. El soporte de AMP para contenido dinámico garantiza que los clientes siempre vean la información más actualizada.
• Pago / pagos: AMP ahora admite carritos de compras, flujos de pago y procesamiento de pagos. Ahora, los usuarios pueden comprar directamente desde sus páginas AMP.
• Personalización / inicio de sesión: la personalización es la piedra angular de cualquier campaña de marketing relevante. Ahora, a través de AMP, puede proporcionar contenido personalizado a sus clientes, como productos recomendados y carritos actualizados.

Entonces, ¿cómo lo hace AMP? Y como puedes Desde amp-bind hasta amp-selector y más, aquí hay algunos componentes que puede usar para crear páginas de productos, páginas de categorías, carritos de compras y más.

Componentes útiles para AMP para comercio electrónico

1. Páginas de productos

A menudo, los usuarios llegan a las páginas de sus productos a través de una página de categoría, una página de inicio, redes sociales o un anuncio de pago. Estas páginas detallan las características y beneficios de su producto, y son muy atractivas visualmente, con tomas de héroe audaces y ángulos suficientes para informar a su visitante.

Crearlos con AMP implica elementos como amp-carrusel y amp-video, que puede usar para crear sorprendentes tomas de héroes, fotos informativas y videos completos.

Para obtener descripciones largas de productos que acompañen a sus fotos, busque en amp-accordion la capacidad de expandir y minimizar el contenido. El elemento amp-form le permitirá crear un sistema de comentarios para que sus visitantes dejen reseñas de su producto:

Para algo un poco más simple, CSS personalizado permitirá habilitar un sistema de revisión de estrellas para las calificaciones de productos:

Y con el elemento amp-social-share, puede ofrecer a los usuarios la posibilidad de compartir el producto en las redes sociales.

AMP ahora también puede admitir un carrito de compras y el botón "agregar al carrito", cuando los visitantes estén listos para comprar. Y si no es así, puede usar el elemento amp-sidebar para implementar un menú de navegación en todas las páginas. Este es solo un ejemplo de una página de producto creada en AMP:

2. Página de categoría de producto

Los usuarios a menudo comienzan su viaje desde la página de inicio de un sitio o desde una página de categoría de producto. Estas son excelentes páginas para AMPlify primero, como eBay lo discutió en su publicación.

Este tipo de páginas son muy adecuadas para AMP. El contenido suele ser estático y está orientado a ofrecer la mejor muestra de productos disponibles.

Particularmente útiles en las páginas de categorías de productos son elementos como amp-carousel y amp-bind, que brindan a los visitantes una forma de crear galerías en las que pueden buscar productos y subcategorías. Estos también pueden incluir subtítulos que describan brevemente la imagen.

Cuando necesiten buscar un producto en particular, puede usar amp-form para crear una barra de búsqueda, y puede mostrar esos resultados en una página diferente o en la misma. Incluso puedes autocompletar términos:

Fuera de la capacidad de buscar y organizar por producto o tipo, que viene de forma nativa en AMP, las páginas de categorías de productos suelen ser bastante simples. Con una exhibición de imágenes y texto mínimo, son un diseño sencillo que puede brindar experiencias a velocidades inigualables.

AMP ofrece este ejemplo de una página de producto con una función de búsqueda y organización de producto:

Aquí hay una mejor indicación de una página de categoría de producto que puede crear con AMP:

Esto proviene de Myntra, la marca de moda en línea más grande de la India. Cuando invirtieron en AMP, vieron una mejora del 60% en la velocidad y una reducción del 40% en las tasas de rebote en sus páginas de destino posteriores al clic más importantes. Y con la ayuda de amp-bind, no tuvieron que comprometer la experiencia del usuario. Los visitantes pueden clasificar y filtrar productos y tamaños como lo harían en cualquier página que no sea AMP. Obtuvieron una excelente experiencia de usuario en un abrir y cerrar de ojos.

3. Mostrar contenido personalizado

La táctica más poderosa de los especialistas en marketing para impulsar las conversiones es la personalización. Cuanto más relevante sea una oferta para su audiencia, más probabilidades tendrá de reclamarla.

Ahora, con el componente amp-access, los especialistas en marketing pueden mostrar bloques de contenido según el estado del usuario, como si están conectados o no. Para mostrar contenido personalizado o recomendaciones en un carrusel, los usuarios pueden aprovechar amp-list. Google dice:

El comportamiento predeterminado de amp-mustache para representar datos de amp-list es desplazarse dentro de los objetos ítems; agregar un carrusel de amplificador dentro de la plantilla haría que la plantilla renderizara múltiples carruseles; una forma de evitar esto es hacer que el punto final de la lista de amplificadores devuelva una sola entrada en los elementos.

También pueden usar amp-list para devolver contenido personalizado al usuario con la ayuda de cookies (usando el atributo credentials = "include") o la identificación de cliente de AMP:

Otra forma de mostrar contenido personalizado, dice AMP, es usar amp-bind con un punto final JSON. Esto es especialmente útil cuando los datos deben actualizarse después de la interacción del usuario, como un hotel que muestra la disponibilidad de habitaciones después de una reserva.

4. Carrito de compras

La compatibilidad con un carrito de la compra ahora viene de forma nativa en AMP. Para construirlo, Google recomienda el uso de amp-list, que puede mostrar al usuario una lista dinámica de lo que le han agregado:

amp-list necesita enviar la cookie de sesión en el encabezado de la solicitud para que el servidor pueda recuperar el contenido del carrito en la sesión. Por este motivo, utilizamos credentials = ”include”, como atributo adicional.

Organizado de esta manera, cada fila de la lista puede contener pedidos de compra personalizados de un usuario. Y cada artículo de esa lista tendrá un botón para eliminar artículos del carrito. Además, el soporte para agregar esos elementos es tal como lo muestra esta demostración.

5. Flujo de pago y pagos

Una vez, si quería velocidad y la capacidad de aceptar pagos, tenía que comenzar con AMP y redirigir a sus usuarios a una página de pago que no fuera de AMP. Hoy, puede permitir que los usuarios realicen check-out desde sus páginas AMP.

En Chrome, puede utilizar la API de solicitud de pagos. Esto permitirá a los usuarios realizar el pago a través de un cuadro de diálogo en su navegador. He aquí un ejemplo rápido.

La otra opción es construir su flujo de pago dentro de AMP con amp-form. Si para pagar un producto es necesario iniciar sesión, puede combinar estos elementos con amp-access.

Y si prefiere ver a los usuarios en su sitio web, esa sigue siendo una opción, siempre que pueda realizar una transición rápida y sin problemas a los visitantes al proceso de pago de su sitio web. Aquí hay un ejemplo de WompMobile:

6. Analítica

Mida la efectividad de su uso de AMP para el comercio electrónico con amp-analytics. Este elemento admite herramientas de análisis internas y de terceros. Eso incluye soluciones populares como Google Analytics, Adobe Analytics, Nielsen, Quantcast y más.

Para tener una idea general de cómo los visitantes interactúan con las páginas de AMP, consulte los análisis nativos de AMP. Actualmente, amp-analytics puede rastrear eventos como:

• Vista de pagina
• Clics de anclaje
• Temporizador
• Desplazamiento
• Cambios en el carrusel de AMP
• Formulario

Para recopilar datos analíticos directamente, puede integrar su solución con AMP. Solo asegúrese de que sus datos de AMP se atribuyan con precisión. Para probar si este es el caso, Google recomienda cargar sus páginas móviles aceleradas a través de Google AMP Cache.

7. Y más ...

Las funciones anteriores son compatibles de forma nativa con el marco AMP. Para agregar funciones que aún no son compatibles con AMP, puede usar amp-iframe para incrustar contenido o herramientas más sofisticadas como aplicaciones de chat, mapas u otras soluciones de terceros.

Otra opción es buscar soporte de una aplicación de terceros, como las creadas para los usuarios de Shopify. Aplicaciones como estas hacen posible el uso de AMP con complementos y extensiones, lo que permite a los usuarios iniciar fácilmente un sitio de carga rápida.

Las aplicaciones AMP más efectivas para Shopify son capaces de crear muchos tipos de páginas, como páginas de productos, colecciones, inicio y blogs. Por lo general, son asequibles, o incluso gratuitos, y cuentan con un soporte confiable:

Existen complementos similares para los usuarios de WordPress y también para los usuarios de Magento.

AMP para ejemplos de comercio electrónico

Ya ha visto los componentes, ahora echemos un vistazo a cómo algunas de las marcas en línea más importantes usan AMP para el comercio electrónico. Aquí hay una breve presentación, compilada por Plumrocket.

Página del producto Newegg

Página de categoría 1-800-Flowers

Página de producto de Eventbrite

Página de categoría de producto de Lancome

¿Han tenido éxito las marcas con AMP para comercio electrónico?

Según Forrester, un sitio AMP con tráfico considerable podría esperar ver un aumento del 20% en la tasa de conversión de ventas en las páginas AMP, un aumento del 10% año tras año en el tráfico del sitio AMP y un aumento del 60% en las páginas por visitar. Entonces, ¿cómo les va a las marcas de la vida real?

AMP para usuarios de comercio electrónico, en cifras

• Advance Create, el sitio web de comparación de seguros más grande de Japón, redujo el tiempo de carga de la página en un 61,2% y el costo por acción en un 36,8%, al tiempo que aumentó la tasa de conversión en un 28,9%.
• Event Tickets Center produjo un aumento del 20% en la tasa de conversión y un aumento del 13% en el tiempo en el sitio, al tiempo que redujo la tasa de rebote en un 10%.
• DiscoverCarHire.com generó un aumento del 22% en las visitas móviles y un 29% más de conversiones desde dispositivos móviles a través de Google Ads. También mejoraron el tráfico orgánico móvil del sitio en un 73% utilizando AMP.
• Los clientes de Fastcommerce vieron un aumento del 15% en las conversiones en 2 millones de páginas al comparar las páginas AMP con las que no lo son.
• WompMobile experimentó un aumento del 105% en las tasas de conversión y una disminución del 31% en las tasas de rebote con las páginas AMP de comercio electrónico en comparación con las páginas que no son AMP.
• Wego.com generó un aumento del 95% en las tasas de conversión de sus socios y un aumento de 3 veces en las conversiones de anuncios después de crear versiones AMP de páginas de destino clave.
• Greenweez vio que la mitad de su tráfico orgánico móvil provenía de AMP entre enero y marzo de 2017. También aumentaron las tasas de conversión de dispositivos móviles en un 80% y redujeron los costos de adquisición de dispositivos móviles en un 66%.

Aumente su tasa de conversión con AMP para comercio electrónico

Aunque algunos argumentan que AMP no puede admitir sitios web de comercio electrónico, está claro que ese no es el caso. Las marcas ya han tenido éxito con AMP como una forma de ofrecer experiencias fáciles de usar mucho más rápidamente. Y en el comercio electrónico, el tiempo es dinero. La velocidad es un ingreso.

De manera similar a la forma en que Shopify, WordPress y Magento admiten aplicaciones AMP, también lo hace Instapage. Eso significa que, a través del constructor de Instapage, puede crear páginas de destino AMP post-clic tan intuitivamente como lo haría con cualquier otra página. Aprenda cómo hacerlo a escala con una demostración de Instapage.