Pixelflow
Instrucciones específicas por plataforma

Clases de eventos en sitios web HTML

Recommended: Visual Tagger

Recomendamos usar el Etiquetador Visual como una opción más sencilla para configurar el seguimiento; tiene la misma funcionalidad en un widget simple

Click here to learn more about the visual tagger

Aprenda a etiquetar elementos específicos en su sitio web HTML y asignarles eventos Meta CAPI para un seguimiento preciso en el lado del servidor.

Para obtener información sobre cómo realizar el seguimiento de eventos mediante la asignación de un evento específico a una URL determinada, consulte esta guía.

Cómo usar clases de eventos en HTML

Agregar el seguimiento de eventos a su sitio web HTML es sencillo. Simplemente añada la clase PixelFlow adecuada a los elementos HTML de los que desea realizar el seguimiento.

¿Eres nuevo en el seguimiento de eventos? Explora el PixelFlow Tracking Playground para ver los eventos en acción. Haz clic en botones, completa formularios y observa exactamente qué datos se rastrean, incluyendo la estructura HTML y las clases CSS que necesitarás para tu sitio.

Implementación Básica

Agregue el nombre de la clase desde la tabla de clases de eventos directamente al atributo de clase de su elemento HTML:

<!-- Example: Track a Subscribe button -->
<button class="action-btn-sub-002-pf">Subscribe to Newsletter</button>

Puede combinar las clases de PixelFlow con sus clases CSS existentes:

<!-- Multiple classes - both your styling and PixelFlow tracking -->
<button class="btn btn-primary action-btn-sub-002-pf">
  Subscribe to Newsletter
</button>

Enlace como botón

También puede usar clases de PixelFlow en enlaces:

<a href="/subscribe" class="cta-link action-btn-sub-002-pf"> Subscribe Now </a>

Una vez que agregue la clase y publique su sitio web, PixelFlow rastreará automáticamente los eventos de suscripción (Subscribe) cada vez que los usuarios hagan clic en ese botón y enviará los datos a Meta.

Seguimiento de envíos de formularios

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

Seguimiento básico de formularios

Paso 1: Agregue info-frm-cntr-pf a su elemento de formulario o a un div envolvente:

<form class="info-frm-cntr-pf">
  <!-- form fields here -->
</form>

Paso 2: Agregue la clase de evento correspondiente a su botón de envío:

<button type="submit" class="action-btn-lead-011-pf">Submit</button>

Ejemplo de formulario completo con extracción de datos

Para capturar la información del usuario, añada clases de extracción de datos a sus campos de entrada:

<form class="contact-form info-frm-cntr-pf" action="/submit" method="post">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input
      type="text"
      id="firstName"
      name="firstName"
      class="form-control info-cust-fn-pf"
      required
    />
  </div>

  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input
      type="text"
      id="lastName"
      name="lastName"
      class="form-control info-cust-ln-pf"
    />
  </div>

  <div class="form-group">
    <label for="email">Email Address</label>
    <input
      type="email"
      id="email"
      name="email"
      class="form-control info-cust-em-pf"
      required
    />
  </div>

  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      class="form-control info-cust-ph-pf"
    />
  </div>

  <button type="submit" class="btn btn-primary action-btn-lead-011-pf">
    Send Message
  </button>
</form>

PixelFlow cifra automáticamente los datos de correo electrónico y teléfono antes de enviarlos a Meta, garantizando el cumplimiento del RGPD y altas puntuaciones de calidad en la coincidencia de eventos.

Ejemplo de formulario de registro

<form class="signup-form info-frm-cntr-pf" action="/register" method="post">
  <h2>Create Your Account</h2>

  <input
    type="text"
    placeholder="First Name"
    class="input-field info-cust-fn-pf"
    required
  />

  <input
    type="text"
    placeholder="Last Name"
    class="input-field info-cust-ln-pf"
    required
  />

  <input
    type="email"
    placeholder="Email"
    class="input-field info-cust-em-pf"
    required
  />

  <input type="tel" placeholder="Phone" class="input-field info-cust-ph-pf" />

  <input type="password" placeholder="Password" class="input-field" required />

  <button type="submit" class="btn-signup action-btn-reg-007-pf">
    Sign Up
  </button>
</form>

Seguimiento de eventos de búsqueda

PixelFlow admite el seguimiento de funciones de búsqueda estándar y de búsqueda basada en la ubicación.

Búsqueda estándar

Opción 1: Rastrear búsqueda al presionar la tecla Enter

Agregue la clase a su campo de entrada de búsqueda. PixelFlow rastreará la búsqueda cuando los usuarios presionen Enter:

<input
  type="text"
  placeholder="Search..."
  class="search-input action-inpt-srch-014-pf"
/>

Opción 2: Rastrear búsqueda al hacer clic en un botón

Para búsquedas con un botón dedicado, use un contenedor de búsqueda:

<div class="search-box info-srch-ctnr-pf">
  <input
    type="text"
    placeholder="Search..."
    class="search-input action-inpt-srch-014-pf"
  />
  <button class="search-button action-btn-srch-015-pf">Search</button>
</div>

Opción 3: Búsqueda solo con botón (sin seguimiento de entrada)

<div class="search-box">
  <input type="text" placeholder="Search..." class="search-input" />
  <button class="search-button action-btn-srch-015-pf">
    <i class="icon-search"></i>
  </button>
</div>

Búsqueda de ubicación

Para funciones de búsqueda basadas en la ubicación (localizadores de tiendas, búsqueda de direcciones, etc.):

<div class="location-search info-srch-ctnr-pf">
  <input
    type="text"
    placeholder="Enter your location..."
    class="location-input action-inpt-loc-016-pf"
  />
  <button class="find-button action-btn-loc-017-pf">Find Nearby</button>
</div>

Ejemplo de formulario de búsqueda completo

<form class="search-form" onsubmit="return false;">
  <div class="search-container info-srch-ctnr-pf">
    <input
      type="text"
      name="query"
      placeholder="What are you looking for?"
      class="search-field action-inpt-srch-014-pf"
      autocomplete="off"
    />
    <button type="submit" class="btn-search action-btn-srch-015-pf">
      <svg><!-- search icon --></svg>
      Search
    </button>
  </div>
</form>

Asegúrese de haber instalado el script de seguimiento de PixelFlow en la sección <head> de su HTML antes de agregar las clases de eventos. Sin el script, no se realizará el seguimiento de los eventos.

Próximos pasos

Después de agregar las clases de eventos a sus elementos HTML:

¿Te fue útil?
¿Te fue útil?