El comercio sin cabeza separa la parte frontal de tu tienda (lo que ven los clientes) de la parte trasera (procesamiento de pedidos, inventario). Si utilizas un front end basado en ReactJS con Shopify, WooCommerce o BigCommerce, puedes conectar ambas capas a Omnisend para desbloquear campañas de correo electrónico, flujos de trabajo de automatización y seguimiento de clientes.

¿No estás usando una configuración sin cabeza? Verifica:

Antes de empezar

Audiencia objetivo: Estas instrucciones son para Shopify (por ejemplo, Hydrogen), WooCommerce o BigCommerce tiendas usando ReactJS para el front end. Otras plataformas o marcos pueden requerir adaptación.
Plataforma: Shopify, WooCommerce, BigCommerce.
Tecnología del front-end: ReactJS.

Beneficios del comercio electrónico sin cabeza

Rastrear tiendas personalizadas. Monitorea el comportamiento del cliente en tu interfaz de usuario de ReactJS, incluyendo vistas de página, clics en productos y adiciones al carrito.
Usa formularios de registro de Omnisend. Inserta formularios de suscripción por correo electrónico/SMS en cualquier lugar de tu front end personalizado.
Automatizar en función de los datos de la tienda. Trigger Bienvenido, Carrito abandonado, y Confirmación de pedido flujos de trabajo utilizando eventos de pedido del backend.
Rendimiento más rápido. Tu frontend ligero de ReactJS se mantiene rápido mientras Omnisend maneja la automatización y las campañas del backend.

Proceso de configuración

Para integrar tu tienda headless de Shopify, WooCommerce o BigCommerce con Omnisend, sigue estos dos pasos esenciales:

Paso 1: Conecta el Backend de tu Tienda

En tu cuenta de Omnisend, ve a Panel de control → Conectar tu tienda.

Selecciona tu plataforma (Shopify, WooCommerce o BigCommerce) y sigue los pasos de conexión. Aprende más sobre los pasos de conexión según tu plataforma de comercio electrónico.

💡 Esto habilita características listas para usar como campañas, automatización de Checkout abandonado y confirmaciones de pedido. Encuentra más detalles a continuación.

Paso 2: Conecta tu frontend a través de la API de Omnisend

Sigue estos pasos para activar el seguimiento, formularios y automatización basada en el carrito en tu front end de ReactJS.

Agrega el fragmento de JavaScript de Omnisend: Copiar y pegar el fragmento de JS de Omnisend en tu sitio etiqueta. Esto permite que los formularios de registro, la automatización de bienvenida y los flujos de trabajo de Back-in-Stock se ejecuten automáticamente.
- Obtén el fragmento: Documentación del fragmento de JS de Omnisend
Rastrear eventos de página vista y producto visto: Agrega disparadores de eventos a tu código de tienda para enviar datos de vista de página y vista de producto a Omnisend. Esto permite la automatización para el Abandono de navegación y el Abandono de Producto.
- Ejemplo de código: Documentación de seguimiento de eventos
Rastrear eventos de producto añadido al carrito: Enviar eventos "Producto añadido al carrito" cada vez que un cliente añade un artículo. Esto impulsa la Automatización de Carrito abandonado.
- Estructura de carga del evento: Documentación de Producto Agregado al Carrito

Código de ejemplo:

omnisend.push(["track", "added product to cart", { "abandonedCheckoutURL": "...", ... }])

Lo que funciona directamente (solo backend)

Una vez que conectes el backend de tu tienda en Paso 1, estas funciones funcionan automáticamente:

Bienvenida Automatización – Saluda a los nuevos suscriptores desde los formularios nativos de Shopify.
Campañas de Correo Electrónico – Envía boletines a tu lista de contactos.
Sincronización de anuncios – Crea audiencias similares en Meta o Google.
Automatización de Checkout Abandonado – Recupera los checkouts iniciados en el pago nativo de tu tienda.
Correos Electrónicos de Confirmación de Pedido y Envío – Envía automáticamente correos electrónicos transaccionales después de las compras.
Automatización de Reseñas y Comentarios de Productos – Pide a los clientes que revisen las compras recientes.
Flujos de trabajo de venta cruzada y reactivación – Sugiere productos relacionados o vuelve a involucrar a clientes inactivos.

Qué requiere configuración del frontend (API)

Estas funciones necesitan Paso 2 (integración de API) para funcionar:

Formularios de registro de Omnisend – Muestra ventanas emergentes, formularios incrustados o páginas de destino en tu sitio de ReactJS.
Automatización de Bienvenida (desde formularios de Omnisend) – Dispara flujos de trabajo cuando los visitantes envían tus formularios personalizados.
Automatización de Carrito Abandonado – Realiza un seguimiento de los añadidos al carrito en tu frontend (no solo en el pago).
Producto & Abandono de navegación – Re-engage a los visitantes que ven productos o navegan por páginas.
Automatización de Back in Stock – Notificar a los clientes cuando los artículos fuera de stock regresen.
Seguimiento de Sesiones del Cliente – Monitorear vistas de página y clics en productos.

Próximos pasos

Ahora que tu tienda sin cabeza está conectada, configura tus primeros flujos de trabajo de automatización:

Automatización de Bienvenida – Saluda a los nuevos suscriptores.
Automatización de Carrito Abandonado – Recuperar ventas perdidas.
Automatización de Checkout Abandonado – Haz seguimiento de los pedidos incompletos.
Abandono de Producto – Vuelve a involucrar a los visitantes que vieron productos.
Abandono de navegación – Recupera a los visitantes que navegan.

💡 ¿Necesitas recursos para desarrolladores? Lee la documentación completa de la API de Omnisend

Preguntas Frecuentes

¿Necesito agregar el fragmento de JavaScript si ya he conectado mi tienda de Shopify, WooCommerce o BigCommerce?

Sí para configuraciones sin cabeza. Cuando conectas el backend de tu tienda, Omnisend sincroniza automáticamente pedidos, clientes y productos. Pero para el seguimiento del frontend (producto visto, añadido al carrito, abandono de navegación), debes agregar el fragmento de JavaScript a tu frontend personalizado de ReactJS.

¿Cuál es la diferencia entre el seguimiento frontend y la integración backend?

Seguimiento del frontend (fragmento de JavaScript): Rastrea el comportamiento de navegación (página vista, producto visto), muestra formularios de registro y habilita el Abandono de navegación. ¿Hace no sincronizar productos, pedidos o datos del carrito.
Integración de backend (conexión de tienda): Sincroniza productos, clientes, pedidos y envía eventos de pago necesarios para la Automatización de Checkout abandonado, Confirmación de pedido y reporte de ingresos.

Las tiendas sin cabeza necesitan ambos para desbloquear toda la funcionalidad de Omnisend.

¿Cómo verifico que Omnisend está recibiendo mis eventos personalizados?

Ve a Configuración de la Tienda → API → Registros de API en tu cuenta de Omnisend. Verás eventos entrantes con marcas de tiempo, nombres de eventos, IDs de contacto y cualquier mensaje de error.

Si tienes alguna pregunta, no dudes en conectarte con nuestro equipo de soporte a través del chat en la aplicación o [email protected].

Configura una Tienda Headless con Omnisend