Cómo sincronizar los IDs de productos de Webflow eCommerce con los anuncios de catálogo de Facebook

Sincronice sus IDs de productos de Webflow eCommerce con los anuncios de catálogo de Facebook para que Meta pueda emparejar sus productos cuando alguien los vea, los añada al carrito o compre artículos en su tienda. Esto habilita los Anuncios Dinámicos de Producto, un seguimiento de conversiones preciso y la atribución a nivel de producto.

Vea esta guía en vídeo paso a paso:

Requisitos previos

• PixelFlow instalado y configurado en su sitio de Webflow. Consulte Configuración de Webflow.

• Plan de Webflow eCommerce activo con productos creados

• Cuenta de Facebook Business Manager con un catálogo de productos creado

• Valores de SKU asignados a todos los productos en su CMS de Webflow

• Acceso al Diseñador de Webflow con permisos de edición

Compatibilidad

Esta función trabaja con:

• Webflow eCommerce: Páginas estándar de pago (checkout) y confirmación de pedido

• Eventos compatibles: Purchase, InitiateCheckout, AddToCart, ViewContent

• Tipos de catálogo de Facebook: Catálogos de comercio electrónico para Anuncios Dinámicos de Producto

• Fuente del ID de producto: Campo SKU de producto de Webflow

Antes de comenzar

Entendiendo la sincronización de IDs de producto

Cuando alguien interactúa con su tienda Webflow, PixelFlow envía datos de eventos a Meta incluyendo:

• content_ids — un array de IDs de producto

• content_type — configurado como product para eventos de eCommerce

• contents — información detallada del producto incluyendo ID, cantidad y precio

Facebook empareja los content_ids de los eventos de PixelFlow con los IDs de producto en su catálogo de productos de Facebook.

Paso 1: Asignar SKUs a sus productos de Webflow

1. Inicie sesión en su cuenta de Webflow y abra su proyecto

2. Navegue a CMS

3. Haga clic en Ecommerce y seleccione Products

4. Abra cada producto

5. Desplácese hasta el campo SKU

6. Introduzca un SKU único que coincida con el ID de producto en su catálogo de productos de Facebook

7. Haga clic en Save y repita para todos los productos

Paso 2: Añadir el SKU del producto a la página de pago de Webflow

1. En el Diseñador de Webflow, abra el panel de Pages

2. Abra la página de Checkout

3. Localice la sección Order Items

4. Haga clic en + Add

5. Seleccione Text Block

6. Coloque el bloque de texto dentro del contenedor del artículo del producto

Paso 3: Vincular el bloque de texto al campo SKU

1. Seleccione el bloque de texto

2. Elija Get text from Products

3. Seleccione SKU

4. Confirme que el bloque de texto muestra el valor del SKU

Paso 4: Añadir la clase de ID de producto de PixelFlow

1. Con el bloque de texto del SKU seleccionado, abra el panel de Estilo

2. Haga clic en el campo Selector

3. Escriba info-itm-id-pf y presione Enter

Puede encontrar este nombre de clase en el Documento de Clases de PixelFlow.

Paso 5: Ocultar el SKU a los clientes

1. Con el bloque de texto del SKU seleccionado, vaya a la sección de Layout

2. Busque Display

3. Cámbielo a None

Paso 6: Configurar activadores de URL en PixelFlow

Configure la extracción automática de datos para sus páginas de pago y confirmación de pedido para evitar eventos duplicados del seguimiento integrado de Webflow:

1. Inicie sesión en su panel de PixelFlow

2. Navegue a Overview

3. Localice la sección URL Triggers

4. Haga clic en + Add URL

Para la página de pago (checkout)

1. Introduzca la URL de su página de pago

2. Seleccione Initiate Checkout

3. Active Extract data automatically?

4. Mantenga activado Block external tracking?

5. Haga clic en Add URL

Para la página de confirmación de pedido

1. Haga clic en + Add URL de nuevo

2. Introduzca la URL de su página de confirmación de pedido

3. Seleccione Purchase

4. Active Extract data automatically?

5. Mantenga activado Block external tracking?

6. Haga clic en Add URL

Paso 7: Actualizar y publicar su sitio de Webflow

1. Después de añadir el elemento SKU y la clase en Webflow, haga clic en Publish

2. Seleccione su dominio de producción

3. Haga clic en Publish to selected domains

Paso 8: Verificar la sincronización del ID de producto

Pruebe que sus IDs de producto de Webflow se están enviando a Meta correctamente.

Usando Meta Pixel Helper

1. Instale la extensión Meta Pixel Helper

2. Abra su tienda Webflow en vivo en Chrome

3. Añada un producto a su carrito

4. Navegue a la página de pago

5. Haga clic en el icono de la extensión

6. Busque el evento InitiateCheckout

7. Verifique que el evento incluya content_ids

Usando Facebook Events Manager

1. Abra el Administrador de eventos de Facebook

2. Seleccione su Píxel

3. Haga clic en Probar eventos

4. Complete una compra de prueba

5. Verifique que el evento incluya content_ids

Usando el panel de PixelFlow

1. Inicie sesión en su panel de PixelFlow

2. Navegue a Events o Analytics

3. Busque su evento de prueba reciente

4. Verifique que el campo content_ids muestre sus SKUs de producto

Solución de problemas

¿Qué sigue?

Ahora que sus IDs de producto de Webflow están sincronizados, puede:

• Configurar Anuncios Dinámicos de Producto de Facebook

• Rastrear eventos adicionales en las páginas de productos usando Clases de eventos en Webflow

• Habilitar el seguimiento automático de eventos de Webflow eCommerce

• Aprender sobre los Parámetros de eventos

Obtener ayuda

Si experimenta problemas con la sincronización de IDs de productos, verifique que la clase esté aplicada correctamente, use Meta Pixel Helper para inspeccionar la carga del evento y confirme que sus SKUs coincidan con el catálogo de productos de Facebook. Para ayuda adicional, envíe un correo a [email protected] o reserve una llamada de configuración gratuita.