Story
Headless
Ecommerce

Comercio electrónico Headless: todo sobre este cms del futuro

Javier SainzMaza | March 4, 2020

"El cambio es la única constante". Esta afirmación es perfectamente aplicable al mundo IT. Y es que, en la actualidad, las expectativas de los usuarios van en aumento mientras nuevos canales y medios revolotean a su alrededor. Pero podemos estar tranquilos, porque los frameworks y la tecnología también evolucionan al mismo ritmo.

Un ejemplo perfecto de "ir juntos en el cambio" son los e-commerce headless. Con una tienda online headless, podrás ofrecer a tus clientes exactamente lo que necesitan: Progreso, escalabilidad y accesibilidad. Veamos cómo hacerlo pero, antes de nada, vamos a explicar que es el e-commerce headless.

¿Qué es el comercio electrónico headless?

El comercio electrónico headless se refiere a una plataforma donde el back-end y el front-end no están integrados directamente. El back-end envía solicitudes a las API y las reenvía a la capa de presentación (Front-end). Como podemos elegir y/o construir estas API nosotros mismos, como desarrolladores nos dará una gran libertad para personalizar la interfaz.

Nuestros clientes no notarán ninguna diferencia a nivel técnico, ya que todos los pagos y demás información siguen pasando por el backend. Pero la experiencia del cliente puede ser muy diferente, ya que la interfaz se puede hacer mucho más personalizada y única. Y esto es posible porque no hay tantas limitaciones en el front-end, además, podremos dar respuesta a las tendencias y desarrollos más rápido.

El surgimiento de la arquitectura de comercio electrónico headless

Para entender por qué existe ahora la necesidad de un entorno headless, primero debemos echar la vista atrás. Si conocemos un poco la historia de Internet y el uso de los cms, lo tendremos mucho más claro.

Desde hace una década, más o menos, llevamos usando smartphones. Esto hizo que los desarrolladores ya no tuvieran que crear webs para ser vistas únicamente desde un ordenador, sino también desde un móvil. Así surgió el concepto de diseño responsive. Gracias a las API fue mucho más sencillo, puesto que estas permitían a los programadores mostrar webs en teléfonos móviles casi sin esfuerzo.

Y volvemos al presente: Hoy en día hay muchas más opciones aún para conectarse a Internet. Lo que ha supuesto una gran demanda de estrategias omnicanal. Relojes inteligentes, domótica o videoconsolas, por nombrar algunos elementos desde los que podemos navegar por internet.

La arquitectura headless satisface con precisión esta necesidad: Una fuente de datos, con una forma sencilla de presentar esto a través de múltiples canales. Así no es necesario el trabajo duplicado, porque todo se puede desarrollar desde una base de datos: Escritorio, móvil, aplicación, reloj inteligente, etc.

¿Te parece poco? Vamos a ver todos los beneficios que obtendremos, tanto desarrolladores como empresas, además de cómo podemos innovar gracias el e-commerce headless.

Las 5 diferencias en desarrollo e integración

Ya hemos visto que el comercio headless difiere del comercio tradicional, pero ¿Qué cambios específicos afectan a los fabricantes? Aquí están los 5 puntos más importantes.

1. La velocidad de desarrollo

Lo cierto es que la velocidad de desarrollo suele ser más rápida con un paquete de e-commerce tradicional que con un entorno headless. Ya que el front-end es más estático y cuenta con un estándar predefinido. Al mantenernos cerca del estándar, el desarrollo es menor.

Esto no significa que una solución headless nos lleve, por defecto, un mayor tiempo de desarrollo. Un elemento importante de un enfoque headless es contar con una estrategia definida sobre los modelos, para el intercambio de datos entre el front-end y el back-end. Ya que estos ya no están estrictamente vinculados, tendremos que tenerlo claro desde el principio. Las características disponibles determinarán si un entorno headless requiere más o menos tiempo de desarrollo.

2. Libertad para desarrollar un front-end

Una adaptación a la construcción tradicional no se realiza simplemente: El código, la base de datos y el front-end deben editarse con cada cambio. Se trata de un trabajo de alta precisión. En el caso del sistema headless, los desarrolladores front-end solo tendrán que llamar a la API en caso de un cambio, pues el back-end sigue funcionando igualmente.

La única desventaja de esto es que las páginas de destino y las páginas de productos habrá que desarrollarlas de forma independiente.

3. Un cms headless

Debido a que el front-end y el back-end están conectados entre sí en los cms normales, necesitaremos un nuevo cms para un sistema headless. Un cms de ecommerce headless se encargará de administrar el contenido, pero no envía nada más a la capa de presentación. Solo crea los datos y deja de lado el formato. El contenido, entonces, se prepara y se pasa a las API.

Contentful es un ejemplo de un cms headless. Cuando mostramos el contenido en diferentes canales, nos beneficiaremos del sistema headless. En este cms añades los datos que siempre serán iguales, por ejemplo: precio, tallas de ropa, marcas, artículos. Luego determinamos cómo se muestran en los diferentes canales a través de la API.

4. Amplia personalización

A lo que aspiran la mayoría de las empresas es a que sus clientes disfruten de una buena experiencia mientras compran en su tienda online. Con la arquitectura headless, estas se verán obligadas a pensar cuidadosamente sobre cómo abordar cuestiones como la personalización. Debido a que contamos con total libertad, habrá que tomar decisiones sobre el diseño de la página, ya que no está predefinido por defecto.

Un ejemplo de tal personalización es el uso de los diferentes targets. Actualmente, están a la orden del día los anuncios de retargeting. Desde Incentro vamos un paso más allá en el remarketing, aplicándolo al machine learning. Un ejemplo sería, por ejemplo, si acabas de comprar una bicicleta, no querrás ver más anuncios de bicicletas. Ahora habrá que mostrarte anuncios de, por ejemplo, timbres de bicicleta, un kit de reparación o ropa de ciclismo. Esto mismo lo podemos aplicar en el e-commerce headless, creando targets.

Podremos crear diferentes targets y si un visitante se encuentra dentro de ese target, este verá contenido específico. Volviendo al ejemplo de las bicicletas: Imagina que tienes una tienda online de ciclismo. En la página de inicio hay un carrusel de bicicletas de paseo, pero un visitante hace clic en la categoría de bicicletas de carretera. Entonces, cuando ese visitante vuelva a la página de inicio, el contenido del carrusel se transformará para que aparezcan bicicletas de carretera. Este es solo un ejemplo inteligente de cómo utilizar la personalización.

5. Funcionalidades propias a través de microservicios.

El mercado del comercio electrónico está en constante cambio. La medida en que puedas anticipar estos cambios determinará si eres, o no, líder en tu sector. Con un entorno headless, la arquitectura está mejor preparada para construir un micro servicio y, por ejemplo, para experimentar con un nuevo modelo de negocio.

Con la ayuda de la arquitectura de microservicios de construcción propia, será posible probar un modelo agregando una función en una plataforma ya existente. Estos microservicios están fuera de la plataforma porque se llaman a través de una API. De esta manera, no hay que desarrollar un código infinitamente largo para que una actualización en el futuro sea menos laboriosa.

Veámoslo con un ejemplo. Diferentes estudios afirman que los compradores online pasan un 30% más de tiempo en una tienda cuando el envío es gratuito. Entonces, podría ser interesante construir una pequeña funcionalidad, usando una arquitectura de microservicio, para probarlo. Por ejemplo, añadiremos una funcionalidad que ofrece el envío gratuito a partir de determinado gasto mínimo. A través del A/B testing, descubriremos cuál es el efecto si las personas ven de inmediato cuánto tienen que gastar para tener el envío gratis. Gracias a los microservicios, entonces, responderemos rápidamente a los desarrollos. Y podremos marcar una diferencia frente a la competencia.

Los mayores beneficios del comercio headless:

Lo más interesante de utilizar el sistema headless será la ventaja competitiva que nos dará frente a la competencia en muchos aspectos.

Una estrategia omnicanal

Un estudio de Harvard afirmó que las empresas que adoptan una estrategia omnicanal comprometida son significativamente más exitosas y que los clientes las tienen mejor consideradas.

Como hemos visto antes, con una arquitectura headless podremos tener una estrategia omnicanal bastante sencilla, al vincular el backend a múltiples canales de compra. Además, es más fácil coordinar la parte online y la offline. Una ventaja adicional, por ejemplo, es que al conectar un sistema de caja registradora inteligente a un entorno comercial, los datos vuelven al entorno del e-commerce. Por lo tanto, el análisis y la visualización de datos online y offline es más fácil y de mayor calidad.

Rendimiento mejorado del sitio web

La velocidad de un sitio web determinará en gran medida su éxito. Los datos de Google respaldan esta afirmación:

  • Un aumento de 1 a 3 segundos del tiempo de carga da como resultado un aumento del 32% en la tasa de rebote.
  • Si la carga de una página aumenta de 1 a 5 segundos, ¡La tasa de rebote aumenta en un 90%!
  • Un porcentaje del 57% de los visitantes abandonará una página si el tiempo de carga es superior a 3 segundos.

Así que, el efecto comercial de un sitio web más rápido habla por sí mismo. Dependiendo de la tecnología que elijamos para la interfaz de usuario, una arquitectura headless hace que el sitio web sea más rápido.

Más de un canal de compras online.

Los clientes (potenciales) quieren las mismas opciones y experiencia en todos sus dispositivos. Tendremos que tener en cuenta, además de los ya mencionados arriba como móvil y web, otros canales, como las redes sociales o marketplaces estilo Amazon. La arquitectura headless, hace posible operar estos canales desde el back-end.

Algunos cms headless

Actualmente, existen numerosos cms que usan el sistema headless, por lo que no tendrás que construir tu propio entorno headless desde cero. Estos son algunos de los sistemas que están en el mercado:

  • Sanity
  • Bloomreach
  • Contentstack
  • Contentful
  • Wagtail
  • GraphCMS
  • Zesty

¿Todavía no estás convencido? Estos son solo algunos de los resultados y cambios que hemos visto en las empresas que han adoptado un comercio electrónico headless:

  • Con esta nueva plataforma flexible, están realmente orientados al futuro. Continúan innovando y proporcionando un medio escalable.
  • Los desarrollos en el mundo tecnológico van y vienen rápidamente. Con la arquitectura headless, más ágil que cualquier otra, responden a los cambios a tiempo.
  • Esto supone que podrán responder a las últimas tendencias en comercio electrónico y estarán a la vanguardia en lo que a innovación respecta.

Opciones para compartir

Javier SainzMaza

Javier SainzMaza es e-commerce consultant

Póngase en contacto con Javier.

siguiente story

¿Por qué dejé de usar Bootstrap?

Jeroen Ooms | February 26, 2020