Clases de Eventos en Webflow

Esta guía explica cómo etiquetar elementos en su sitio web de Webflow con una "clase" que permite a PixelFlow rastrear ese elemento, sección o datos en particular para activar o enviar junto con un evento a Meta.

Haga clic aquí para ver todas las formas de rastrear y activar eventos en su sitio web.

Cómo usar Clases de Eventos en Webflow

Agregue la clase del Documento de Clases a ese elemento en particular en Webflow. El método depende del generador de páginas o editor que esté utilizando:

Uso del Webflow Designer

El Webflow Designer facilita la adición de clases personalizadas a cualquier elemento:

1. Seleccione el elemento (botón, formulario o cualquier elemento) que desea rastrear

2. En la barra lateral derecha, localice el panel de Estilo (Style panel)

3. En la parte superior del panel de Estilo, haga clic en el campo Selector (donde agrega los nombres de las clases)

4. Escriba el nombre de la clase de PixelFlow (por ejemplo, action-btn-sub-002-pf para un evento de Suscripción) y presione Enter

5. Haga clic en Publish en la esquina superior derecha para guardar sus cambios

Uso del CMS de Webflow

Si está utilizando elementos del CMS de Webflow:

1. Seleccione el elemento del CMS que desea rastrear en el Webflow Designer

2. En el panel de Estilo, haga clic en el campo Selector

3. Ingrese el nombre de la clase de PixelFlow del Documento de Clases

4. Presione Enter para aplicar la clase

5. Haga clic en Publish para publicar sus cambios

Seguimiento de Botones de Webflow

Si desea activar un evento de "Cliente potencial" (Lead) cada vez que alguien haga clic en un botón específico en su sitio web:

1. Busque la clase Lead en el Documento de Clases: action-btn-lead-011-pf

2. Seleccione su botón en el Webflow Designer

3. Agregue action-btn-lead-011-pf al campo Selector en el panel de Estilo (ver arriba)

4. Presione Enter para aplicar la clase

5. Publique su sitio

Seguimiento de Envíos de Formulario en Webflow

Para rastrear los envíos de formularios y capturar datos del usuario (nombre, correo electrónico, teléfono), debe agregar clases tanto al contenedor del formulario como a los campos de entrada individuales:

1. Agregue info-frm-cntr-pf a su contenedor de formulario o elemento de formulario

2. Agregue la clase de acción adecuada a su botón de envío (por ejemplo, action-btn-lead-011-pf para un evento de Lead). Vea una lista completa de clases de acción aquí

3. Agregue clases de extracción de datos a sus campos de entrada:

   • info-cust-fn-pf para el campo de nombre (first name)

   • info-cust-em-pf para el campo de correo electrónico

   • info-cust-ph-pf para el campo de teléfono

   • info-cust-ln-pf para el campo de apellido (last name)

Seguimiento de Eventos de Webflow eCommerce

Para sitios de Webflow eCommerce, PixelFlow ofrece seguimiento automático para eventos de pago y compra:

• Extracción automática de datos: Habilite la extracción automática de datos de productos (moneda, valor, IDs de productos) de sus páginas de pago de Webflow. Consulte Seguimiento automático de eventos de Webflow eCommerce para las instrucciones de configuración.

• Sincronización del catálogo de productos: Sincronice sus IDs de productos de Webflow con los Anuncios de Catálogo de Facebook para habilitar Anuncios Dinámicos de Productos. Consulte Cómo Sincronizar los IDs de Productos de Webflow eCommerce con los Anuncios de Catálogo de Facebook para ver los pasos detallados.

Verificación de su Configuración

Después de agregar las clases a sus elementos:

1. Visite su página en el sitio web publicado (no en modo de vista previa)

2. Haga clic derecho en el elemento y seleccione Inspeccionar o Inspeccionar elemento

3. En las herramientas para desarrolladores, verifique que la clase de PixelFlow aparezca en el código HTML de ese elemento

4. Pruebe el seguimiento activando el evento (haciendo clic en el botón, enviando el formulario, etc.)

5. Revise su tablero de PixelFlow para confirmar que el evento fue capturado

Problemas Comunes y Soluciones

Las clases no aparecen en el sitio publicado

• Borre la caché de su navegador y realice una actualización forzada de la página (Cmd+Shift+R o Ctrl+Shift+R)

• Asegúrese de haber hecho clic en Publish después de agregar la clase

• Verifique que haya agregado la clase al elemento correcto

• Verifique que esté viendo el sitio publicado en vivo, no una vista previa o borrador

Los eventos no se registran en el Tablero de PixelFlow

• Verifique que el script de PixelFlow esté instalado correctamente (consulte la guía de configuración de Webflow)

• Confirme que está utilizando exactamente el nombre de clase del Documento de Clases

• Asegúrese de que la clase se haya agregado al elemento en el que se puede hacer clic (botón, enlace), no a un div contenedor

• Revise la consola de su navegador para ver si hay errores de JavaScript que puedan impedir el seguimiento

No se capturan los datos del formulario

• Asegúrese de que info-frm-cntr-pf esté agregado al contenedor del formulario

• Verifique que las clases de los campos de entrada se hayan agregado a los elementos <input> reales, no a etiquetas o contenedores

• Para formularios de Webflow, asegúrese de que las clases se apliquen tanto al bloque de formulario como a los campos de entrada individuales

Qué sigue

• Vea la lista completa de clases disponibles en el Documento de Clases

• Conozca el seguimiento de eventos a través de URLs como un método alternativo

• Configure el seguimiento automático de eCommerce para tiendas Webflow

• Configure la sincronización del catálogo de productos para Anuncios Dinámicos de Productos