Pixelflow
Ereignis-Tracking via Klassen

Event-Klassen auf HTML-Websites

Erfahren Sie, wie Sie spezifische Elemente auf Ihrer HTML-Website kennzeichnen und ihnen Meta CAPI-Events für ein präzises serverseitiges Tracking zuweisen.

Informationen darüber, wie Sie Events durch Zuweisung eines spezifischen Ereignisses zu einer bestimmten URL tracken können, finden Sie in diesem Leitfaden.

So verwenden Sie Event-Klassen in HTML

Das Hinzufügen von Event-Tracking zu Ihrer HTML-Website ist unkompliziert. Fügen Sie einfach die entsprechende PixelFlow-Klasse zu den HTML-Elementen hinzu, die Sie tracken möchten.

Grundlegende Implementierung

Fügen Sie den Klassennamen aus der Tabelle der Event-Klassen direkt zum Klassenattribut Ihres HTML-Elements hinzu:

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

Sie können PixelFlow-Klassen mit Ihren bestehenden CSS-Klassen kombinieren:

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

Sie können PixelFlow-Klassen auch für Links verwenden:

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

Sobald Sie die Klasse hinzugefügt und Ihre Website veröffentlicht haben, wird PixelFlow automatisch „Subscribe“-Events tracken, wann immer Nutzer auf diesen Button klicken, und die Daten an Meta senden.

Tracking von Formularübermittlungen

Um Formularübermittlungen zu tracken und Benutzerdaten (Name, E-Mail, Telefon) zu erfassen, müssen Sie Klassen sowohl zum Formular-Container als auch zu den einzelnen Eingabefeldern hinzufügen.

Grundlegendes Formular-Tracking

Schritt 1: Fügen Sie info-frm-cntr-pf zu Ihrem Formular-Element oder einem Wrapper-Div hinzu:

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

Schritt 2: Fügen Sie die entsprechende Event-Klasse zu Ihrem Submit-Button hinzu:

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

Vollständiges Formularbeispiel mit Datenextraktion

Um Benutzerinformationen zu erfassen, fügen Sie Datenextraktionsklassen zu Ihren Eingabefeldern hinzu:

<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 hasht E-Mail- und Telefondaten automatisch vor dem Senden an Meta, um die DSGVO-Konformität und hohe Match-Quality-Scores zu gewährleisten.

Beispiel für ein Registrierungsformular

<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>

Tracking von Such-Events

PixelFlow unterstützt das Tracking von Standard-Suchen und standortbasierten Suchfunktionen.

Standardsuche

Option 1: Suche bei Drücken der Enter-Taste tracken

Fügen Sie die Klasse zu Ihrem Such-Eingabefeld hinzu. PixelFlow trackt die Suche, wenn Nutzer die Enter-Taste drücken:

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

Option 2: Suche bei Button-Klick tracken

Verwenden Sie für Suchvorgänge mit einem eigenen Button einen Such-Container:

<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>

Option 3: Suche nur über Button (ohne Tracking der Eingabe)

<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>

Standortsuche

Für standortbasierte Suchfunktionen (Händlersuche, Adresssuche, 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>

Beispiel für ein vollständiges Suchformular

<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>

Stellen Sie sicher, dass Sie das PixelFlow-Tracking-Skript im <head>-Bereich Ihrer HTML-Seite installiert haben, bevor Sie Event-Klassen hinzufügen. Ohne das Skript werden keine Events getrackt.

Nächste Schritte

Nachdem Sie Event-Klassen zu Ihren HTML-Elementen hinzugefügt haben:

War das hilfreich?