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 realizar el seguimiento de eventos asignando un evento específico a una URL en particular, siga esta guía.

Para etiquetar elementos específicos en su sitio web de los que desea realizar un seguimiento, siga la guía a continuación.

Cómo usar las clases de eventos en WordPress

Añada la clase del Documento de clases a ese elemento en particular en WordPress. El método depende del constructor de páginas o editor que 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) del que desee realizar el seguimiento

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 expándala

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 utiliza Elementor como su constructor de páginas:

1. Haga clic en el elemento del que desea realizar el seguimiento 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, según 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 sus 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: Seguimiento de un botón de suscripción

Si desea realizar el seguimiento de un evento de "Suscripción" cada vez que alguien haga clic en un botón de "Suscribirse" específico 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 suscripción en su editor o constructor de páginas de WordPress

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

4. Guarde y publique sus cambios

Seguimiento de envíos de formularios

Para realizar el seguimiento de 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 a su contenedor de formulario o elemento de formulario

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

3. Añada 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 apellido

Verificación de su configuración

Después de añadir 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 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. Consulte su panel de control de PixelFlow para confirmar que el evento fue capturado

Problemas comunes y soluciones

Las clases no aparecen en el sitio publicado

• Borre su caché de WordPress si utiliza un complemento de caché

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

• Compruebe que añadió la clase al elemento correcto

• Verifique que esté viendo la página publicada, no una vista previa o un borrador

Los eventos no se registran en el panel de control de PixelFlow

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

• Confirme que está utilizando el nombre exacto de la clase del Documento de clases

• Asegúrese de que la clase esté añadida 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 podrían impedir el seguimiento

Los datos del formulario no se están capturando

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

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

• Para complementos de formularios personalizados, es posible que deba añadir clases a través de la configuración específica del complemento

Pasos siguientes

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

• Obtenga información sobre el seguimiento de eventos a través de URLs como método alternativo

• Configure la integración con WooCommerce para el seguimiento automático de comercio electrónico