Pixelflow
Plattformspezifische Anleitungen

Event-Klassen auf HTML-Websites

Recommended: Visual Tagger

Wir empfehlen die Verwendung des Visual Tagger als einfachere Option für die Einrichtung des Trackings – er bietet dieselbe Tracking-Funktionalität in einem einfachen Widget.

Click here to learn more about the visual tagger

Erfahren Sie, wie Sie bestimmte Elemente auf Ihrer HTML-Website taggen und ihnen Meta CAPI-Events für ein genaues 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 auf 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 Schaltflächen, 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 Event-Klassen-Tabelle 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 vorhandenen 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, trackt PixelFlow automatisch „Subscribe“-Events, wann immer Benutzer auf diese Schaltfläche klicken, und sendet die Daten an Meta.

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.

Basisfunktion für Formular-Tracking

Schritt 1: Fügen Sie info-frm-cntr-pf zu Ihrem Formularelement 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 Ihrer Senden-Schaltfläche hinzu:

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

Beispiel für ein vollständiges Formular 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, bevor sie an Meta gesendet werden. Dies gewährleistet die DSGVO-Konformität und hohe Scores für die Event-Übereinstimmungsqualität.

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.

Standard-Suche

Option 1: Suche beim Drücken der Eingabetaste tracken

Fügen Sie die Klasse zu Ihrem Such-Eingabefeld hinzu. PixelFlow trackt die Suche, wenn Nutzer die Eingabetaste 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 Suchanfragen 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: 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:

  • Veröffentlichen Sie Ihre Website-Änderungen

  • Testen und verifizieren Sie Ihr Setup im PixelFlow-Dashboard

  • Überprüfen Sie die Event-Payloads im Meta Events Manager auf Übereinstimmungsqualitäts-Scores

  • Prüfen Sie die vollständige Event-Klassen-Referenz für alle verfügbaren Tracking-Optionen

War das hilfreich?
War das hilfreich?