Clases de Eventos en WordPress

Este artículo explica cómo etiquetar elementos específicos en su sitio web de WordPress y asignarles eventos.

Para obtener información sobre cómo rastrear eventos asignando uno específico a una URL particular, siga esta guía.

Para etiquetar elementos específicos en su sitio web que desea rastrear, siga la guía a continuación.

Cómo usar Clases de Eventos en WordPress

Añada la clase desde el Documento de Clases a ese elemento particular en WordPress. El método depende de qué constructor de páginas o editor esté utilizando:

Uso del Editor de Bloques de WordPress (Gutenberg)

El editor predeterminado de WordPress facilita la adición de clases personalizadas a cualquier bloque:

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

2. En la barra lateral derecha, haga clic en la pestaña Bloque si no está seleccionada

3. Desplácese hacia abajo hasta la sección Avanzado y despliéguela

4. En el campo Clase(s) CSS adicional(es), introduzca el nombre de la clase de PixelFlow (por ejemplo, action-btn-sub-002-pf para un evento de Suscripción)

5. Haga clic en Actualizar o Publicar para guardar los cambios

Uso de Elementor

Si está usando Elementor como su constructor de páginas:

1. Haga clic en el elemento que desea rastrear en el editor de Elementor

2. En el panel izquierdo, haga clic en la pestaña Avanzado

3. Busque el campo Clases CSS (o Clases CSS adicionales dependiendo de su versión de Elementor)

4. Introduzca el nombre de la clase de PixelFlow del Documento de Clases

5. Haga clic en Actualizar para publicar los cambios

Uso de otros constructores de páginas

La mayoría de los constructores de páginas de WordPress tienen opciones similares para añadir clases CSS:

• Divi Builder: Seleccione el módulo → Pestaña Avanzado → Sección ID y clases CSS → Campo Clase CSS

• Beaver Builder: Seleccione el módulo → Pestaña Avanzado → Sección Selectores CSS → Campo Clase

• WPBakery: Edite el elemento → Pestaña Opciones de diseño → Campo Nombre de clase extra

• Kadence Blocks: Seleccione el bloque → Pestaña Avanzado → Campo Clase(s) CSS adicional(es)

Ejemplo: Rastrear un botón de suscripción

Si desea rastrear un evento de "Suscripción" cada vez que alguien haga clic en un botón específico de "Suscribirse" en su sitio web:

1. Busque la clase de Suscripción en el Documento de Clases: action-btn-sub-002-pf

2. Seleccione su botón de Suscribirse en su editor de WordPress o constructor de páginas

3. Añada action-btn-sub-002-pf al campo de clase CSS usando el método correspondiente a su editor (ver arriba)

4. Guarde y publique los cambios

Rastreo de envíos de formularios

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

1. Añada info-frm-cntr-pf al contenedor o elemento de su formulario

2. Añada la clase de acción adecuada a su botón de envío (ej. action-btn-lead-011-pf para un evento de Cliente potencial)

3. Añada las clases de extracción de datos a sus campos de entrada:

   • info-cust-fn-pf para el campo de nombre

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

   • info-cust-full-name-pf para el campo de nombre completo

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

   • info-cust-ln-pf para el campo de apellidos

Verificación de su configuración

Después de añadir las clases a sus elementos:

1. Visite su página en el sitio web en vivo (no en modo 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 rastreo activando el evento (haciendo clic en el botón, enviando el formulario, etc.)

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

Problemas comunes y soluciones

Las clases no aparecen en el sitio en vivo

• Limpie la caché de WordPress si utiliza un plugin de almacenamiento en caché

• Asegúrese de haber hecho clic en Actualizar/Publicar después de añadir la clase

• Compruebe que ha añadido la clase al elemento correcto

• Verifique que está viendo la página en vivo, no una vista previa o borrador

Los eventos no se rastrean en el panel de PixelFlow

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

• Confirme que está usando el nombre de clase exacto del Documento de Clases

• Asegúrese de que la clase esté añadida al elemento en el que se hace clic (botón, enlace) y no a un contenedor div envolvente

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

Los datos del formulario no se capturan

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

• Verifique que las clases de los campos de entrada estén añadidas a los elementos <input> reales, no a etiquetas o envoltorios

• Para plugins de formularios personalizados, es posible que deba añadir las clases a través de ajustes específicos del plugin

Próximos pasos

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

• Conozca más sobre el rastreo de eventos mediante URLs como método alternativo

• Configure la integración con WooCommerce para el rastreo automático de eCommerce