Pixelflow
Ereignis-Tracking via Klassen

Event-Klassen auf HTML-Websites

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

Informationen zum Tracking von Events durch Zuweisung eines spezifischen Events zu einer bestimmten URL 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.

Neu beim Event-Tracking? Erkunden Sie den PixelFlow Tracking Playground, um Events in Aktion zu sehen. Klicken Sie auf Buttons, füllen Sie Formulare aus und sehen Sie genau, welche Daten getrackt werden – einschließlich der HTML-Struktur und der CSS-Klassen, die Sie für Ihre Website benötigen.

Basisimplementierung

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 Nutzerdaten (Name, E-Mail, Telefon) zu erfassen, müssen Sie Klassen sowohl zum Formular-Container als auch zu den einzelnen Eingabefeldern hinzufügen.

Basis-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 Absende-Button hinzu:

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

Beispiel für ein vollständiges Formular mit Datenextraktion

Um Nutzerinformationen 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 Event 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-Suchfunktionen sowie 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 Suchen mit einem dedizierten 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: Nur Button-Suche (ohne Eingabe-Tracking)

<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 usw.):

<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 in Ihrem HTML-Abschnitt <head> 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?