Este ejemplo es para un sitio web HTML. Consulta este artículo para ver cómo configurarlo en tu propia plataforma (por ejemplo, Webflow, Framer, etc.).
<!-- View Content button -->
<button class="action-btn-vc-019-pf">Read Article</button>Te recomendamos usar Visual Tagger como una opción más sencilla para configurar el seguimiento: ofrece la misma funcionalidad de seguimiento en un widget simple.
Click Here to Learn More About the Visual TaggerEn algunos casos, Visual Tagger puede tener ciertas limitaciones. Como alternativa, puedes activar eventos mediante «clases CSS», es decir, añadir un fragmento de código a cualquier elemento de tu sitio web para que PixelFlow pueda realizar su seguimiento.
Haz clic aquí para consultar todos los métodos para activar eventos en tu sitio web.
Aplica clases CSS especiales a los elementos de tu sitio web para que PixelFlow sepa qué acción ocurrió y qué datos debe extraer. Algunos ejemplos comunes son:
Clics en botones para acciones como Suscribirse o Contactar
Envíos de formularios para capturar eventos Lead y datos de usuarios
Acciones de eCommerce como AddToCart, InitiateCheckout y Purchase
Consulta PixelFlow Event Playground para explorar ejemplos en directo y probar tu configuración.
El uso de «clases CSS» varía ligeramente en cada plataforma. Haz clic aquí para consultar las instrucciones exactas de tu plataforma.
View platform specific instructionsLas clases de PixelFlow pertenecen a tres categorías:
General: para botones y elementos interactivos
Formularios: para capturar datos de usuarios como name, email y phone
eCommerce: para realizar el seguimiento de los detalles de productos en los flujos del carrito, el pago y la compra
La forma de aplicar las clases varía según la plataforma. Consulta la guía específica de tu plataforma antes de implementarlas.
Aplica estas clases a cualquier botón o elemento para activar inmediatamente un evento.
Nombre del evento | Clase CSS | Se usa para |
|---|---|---|
AddPaymentInfo | | Optimizar campañas relacionadas con pagos y volver a dirigirse a usuarios que no completaron el proceso de pago. |
AddtoCart | | Optimización de eCommerce y retargeting de carritos abandonados. |
AddtoWishlist | | Segmentación basada en intereses y retargeting de listas de deseos. |
CompleteRegistration | | Realizar el seguimiento de embudos de registro y campañas de incorporación. |
Contact | | Atribuir las solicitudes de demostración o las interacciones de soporte a las campañas. |
CustomiseProduct | | Seguimiento personalizado de productos y configuraciones. |
Donate | | Seguimiento de donaciones y optimización de campañas de organizaciones sin fines de lucro. |
FindLocationButton | | Anuncios de servicios locales y seguimiento de la intención de ubicación. |
FindLocationInput | | Seguimiento de la intención de ubicación. |
InitiateCheckout | | Intención de finalizar la compra y optimización de carritos abandonados. |
Lead | | Optimización de la generación de clientes potenciales y creación de audiencias. |
Purchase | | Cálculo del ROAS y creación de audiencias basadas en compras. |
Schedule | | Optimización de reuniones programadas. |
SearchButton | | Seguimiento de la intención de búsqueda. |
SearchInput | | Seguimiento de la intención de búsqueda. |
StartTrial | | Optimización de la conversión de pruebas. |
Subscribe | | Seguimiento de la conversión de suscripciones. |
SubmitApplication | | Seguimiento del embudo de solicitudes. |
ViewContent | | Seguimiento de la interacción en la parte superior del embudo. |
Este ejemplo es para un sitio web HTML. Consulta este artículo para ver cómo configurarlo en tu propia plataforma (por ejemplo, Webflow, Framer, etc.).
<!-- View Content button -->
<button class="action-btn-vc-019-pf">Read Article</button>Aplica estas clases a cualquier formulario.
Funciona con los siguientes tipos de eventos: AddPaymentInfo, CompleteRegistration, Contact, CustomizeProduct, Donate, Lead, PageView, Schedule, StartTrial, SubmitApplication y Subscribe.
Importante: añade info-frm-cntr-pf al contenedor de tu formulario primero
Elemento | Clase CSS |
|---|---|
Contenedor del formulario o elemento de formulario | |
Campo de nombre | |
Campo de apellido | |
Campo de nombre completo | |
Campo de correo electrónico | |
Campo de teléfono | |
Campo de valor o precio | |
Este ejemplo es para un sitio web HTML. Consulta este artículo para ver cómo configurarlo en tu propia plataforma (por ejemplo, Webflow, Framer, etc.).
<!-- Contact form -->
<form class="info-frm-cntr-pf">
<!-- Customer information -->
<input type="text" class="info-cust-full-name-pf" placeholder="Full Name" />
<input type="email" class="info-cust-em-pf" placeholder="Email" />
<input type="tel" class="info-cust-ph-pf" placeholder="Phone (optional)" />
<!-- Message fields -->
<input type="text" placeholder="Subject" />
<textarea placeholder="Your message..."></textarea>
<!-- Submit button -->
<button type="submit" class="action-btn-cntct-003-pf">Send Message</button>
</form>Usa estas clases para activar AddToWishList, AddToCart, InitiateCheckout y Purchase con datos de productos.
El seguimiento de eCommerce requiere una estructura anidada. Añade primero el contenedor principal, después los contenedores de productos y, por último, las clases correspondientes a los detalles individuales de cada producto.
Elemento | Clase CSS |
|---|---|
Contenedor de la lista de productos (añádelo al contenedor general de la lista de productos antes de añadir las demás clases que aparecen a continuación) | |
Elemento del importe total | |
Añade estas clases a cualquier elemento para realizar su seguimiento y enviarlo junto con el evento.
Elemento | Clase CSS |
|---|---|
Contenedor de un producto individual (añádelo al contenedor general del producto antes de añadir las demás clases que aparecen a continuación) | |
ID del producto | |
Precio del producto | |
Cantidad del producto | |
Después de añadir las clases, prueba tu configuración en PixelFlow y confirma que el evento aparece en tus registros.
<!-- Checkout container wraps form, order summary, and purchase button -->
<div class="info-chk-itm-ctnr-pf">
<!-- Add Payment Info Form (Optional) -->
<div class="info-frm-cntr-pf">
<!-- Customer information -->
<input type="text" class="info-cust-fn-pf" placeholder="First Name" />
<input type="text" class="info-cust-ln-pf" placeholder="Last Name" />
<input type="email" class="info-cust-em-pf" placeholder="Email" />
<input type="tel" class="info-cust-ph-pf" placeholder="Phone" />
<!-- Payment action -->
<button class="action-btn-pymt-001-pf">Save Payment Method</button>
</div>
<!-- Order summary -->
<div class="info-chk-itm-pf">
<div class="info-itm-id-pf">WH-001</div>
<div class="info-itm-prc-pf">$298.00</div>
<span class="info-itm-qnty-pf">2</span>
</div>
<div class="info-totl-amt-pf">$646.00</div>
<!-- Purchase button is directly inside checkout container -->
<button class="action-btn-plc-ord-018-pf">Complete Purchase</button>
</div>Usa estas clases para realizar el seguimiento de los eventos Search y FindLocation. Envuelve el campo de entrada y el botón con el elemento contenedor y, después, añade las clases correctas a cada elemento.
La clase contenedora info-srch-ctnr-pf debe envolver tanto el campo de entrada como el botón.
Elemento | Clase CSS |
|---|---|
Contenedor de búsqueda o ubicación | |
Campo de entrada de búsqueda | |
Botón de búsqueda | |
Campo de entrada para buscar una ubicación | |
Botón para buscar una ubicación | |
<!-- Input + Button (Horizontal) -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-srch-014-pf"
placeholder="Search products..."
/>
<button class="action-btn-srch-015-pf">Search</button>
</div>
<!-- Input + Button (Vertical) -->
<div class="info-srch-ctnr-pf" style="display: flex; flex-direction: column; gap: 0.5rem;">
<input
type="text"
class="action-inpt-srch-014-pf"
placeholder="What are you looking for?"
/>
<button class="action-btn-srch-015-pf" style="width: 100%;">
Search Products
</button>
</div>
<!-- Input Only (Enter key triggers search) -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-srch-014-pf"
placeholder="Search and press Enter..."
/>
</div><!-- Input + Button -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-loc-016-pf"
placeholder="Enter zip code or city..."
/>
<button class="action-btn-loc-017-pf">Find Stores</button>
</div>
<!-- Input Only (Enter key triggers search) -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-loc-016-pf"
placeholder="Enter address and press Enter..."
style="width: 100%;"
/>
</div>Cuando termines de configurar todo, usa Cómo probar y verificar la configuración de CAPI de PixelFlow para confirmar que todo funciona correctamente.