Event-Klassen auf WordPress

So kennzeichnen Sie spezifische Elemente auf Ihrer WordPress-Website und weisen ihnen Events zu

Informationen darüber, wie Sie Events durch Zuweisung zu einer bestimmten URL verfolgen, finden Sie in diesem Leitfaden.

Um spezifische Elemente auf Ihrer Website zu taggen, die Sie tracken möchten, folgen Sie der untenstehenden Anleitung.

So verwenden Sie Event-Klassen in WordPress

Fügen Sie die Klasse aus dem Klassen-Dokument zu dem jeweiligen Element in WordPress hinzu. Die Methode hängt davon ab, welchen Page-Builder oder Editor Sie verwenden:

Verwendung des WordPress Block-Editors (Gutenberg)

Der Standard-Editor von WordPress macht es einfach, benutzerdefinierte Klassen zu jedem Block hinzuzufügen:

1. Wählen Sie den Block aus (Button, Formular oder ein beliebiges Element), den Sie tracken möchten

2. Klicken Sie in der rechten Seitenleiste auf den Reiter Block, falls dieser noch nicht ausgewählt ist

3. Scrollen Sie nach unten zum Bereich Erweitert und klappen Sie diesen aus

4. Geben Sie im Feld Zusätzliche CSS-Klassen den PixelFlow-Klassennamen ein (zum Beispiel action-btn-sub-002-pf für ein Subscribe-Event)

5. Klicken Sie auf Aktualisieren oder Veröffentlichen, um Ihre Änderungen zu speichern

Verwendung von Elementor

Wenn Sie Elementor als Page-Builder verwenden:

1. Klicken Sie im Elementor-Editor auf das Element, das Sie tracken möchten

2. Klicken Sie im linken Panel auf den Reiter Erweitert

3. Suchen Sie das Feld CSS-Klassen (oder Zusätzliche CSS-Klassen, je nach Elementor-Version)

4. Geben Sie den PixelFlow-Klassennamen aus dem Klassen-Dokument ein

5. Klicken Sie auf Speichern, um Ihre Änderungen zu veröffentlichen

Verwendung anderer Page-Builder

Die meisten WordPress Page-Builder haben ähnliche Optionen zum Hinzufügen von CSS-Klassen:

• Divi Builder: Modul auswählen → Reiter Erweitert → Bereich CSS-ID & Klassen → Feld CSS-Klasse

• Beaver Builder: Modul auswählen → Reiter Erweitert → Bereich CSS-Selektoren → Feld Klasse

• WPBakery: Element bearbeiten → Reiter Design-Optionen → Feld Extra Klassennamen

• Kadence Blocks: Block auswählen → Reiter Erweitert → Feld Zusätzliche CSS-Klassen

Beispiel: Tracking eines Subscribe-Buttons

Wenn Sie ein „Subscribe“-Event jedes Mal erfassen möchten, wenn jemand auf einen bestimmten „Abonnieren“-Button auf Ihrer Website klickt:

1. Suchen Sie die Subscribe-Klasse im Klassen-Dokument: action-btn-sub-002-pf

2. Wählen Sie Ihren Subscribe-Button in Ihrem WordPress-Editor oder Page-Builder aus

3. Fügen Sie action-btn-sub-002-pf gemäß der für Ihren Editor beschriebenen Methode zum CSS-Klassenfeld hinzu

4. Speichern und veröffentlichen Sie Ihre Änderungen

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:

1. Fügen Sie info-frm-cntr-pf zu Ihrem Formular-Container oder Formular-Element hinzu

2. Fügen Sie die entsprechende Action-Klasse zu Ihrem Submit-Button hinzu (z. B. action-btn-lead-011-pf für ein Lead-Event)

3. Fügen Sie Klassen zur Datenextraktion zu Ihren Eingabefeldern hinzu:

   • info-cust-fn-pf für das Vorname-Feld

   • info-cust-em-pf für das E-Mail-Feld

   • info-cust-full-name-pf für das Feld des vollständigen Namens

   • info-cust-ph-pf für das Telefonnummer-Feld

   • info-cust-ln-pf für das Nachname-Feld

Überprüfung Ihres Setups

Nachdem Sie die Klassen zu Ihren Elementen hinzugefügt haben:

1. Besuchen Sie Ihre Seite auf der Live-Website (nicht im Vorschaumodus)

2. Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie Untersuchen oder Element untersuchen

3. Überprüfen Sie in den Entwicklertools, ob die PixelFlow-Klasse im HTML-Code für dieses Element erscheint

4. Testen Sie das Tracking, indem Sie das Event auslösen (auf den Button klicken, das Formular absenden usw.)

5. Überprüfen Sie Ihr PixelFlow-Dashboard, um zu bestätigen, dass das Event erfasst wurde

Häufige Probleme und Lösungen

Klassen erscheinen nicht auf der Live-Seite

• Leeren Sie Ihren WordPress-Cache, falls Sie ein Caching-Plugin verwenden

• Stellen Sie sicher, dass Sie nach dem Hinzufügen der Klasse auf Aktualisieren/Veröffentlichen geklickt haben

• Überprüfen Sie, ob Sie die Klasse dem richtigen Element hinzugefügt haben

• Vergewissern Sie sich, dass Sie die Live-Seite ansehen, nicht eine Vorschau oder einen Entwurf

Events werden im PixelFlow-Dashboard nicht getrackt

• Überprüfen Sie, ob das PixelFlow-Skript korrekt installiert ist (siehe WordPress-Einrichtungsleitfaden)

• Bestätigen Sie, dass Sie den exakten Klassennamen aus dem Klassen-Dokument verwenden

• Stellen Sie sicher, dass die Klasse dem klickbaren Element (Button, Link) hinzugefügt wurde und nicht einem umschließenden Div-Container

• Suchen Sie in der Browser-Konsole nach JavaScript-Fehlern, die das Tracking verhindern könnten

Formulardaten werden nicht erfasst

• Stellen Sie sicher, dass info-frm-cntr-pf zum Formular-Container hinzugefügt wurde

• Überprüfen Sie, ob die Klassen für Eingabefelder direkt den <input>-Elementen hinzugefügt wurden, nicht den Labels oder Wrappern

• Bei benutzerdefinierten Formular-Plugins müssen Sie die Klassen möglicherweise über Plugin-spezifische Einstellungen hinzufügen

Nächste Schritte

• Sehen Sie sich die vollständige Liste der verfügbaren Klassen im Klassen-Dokument an

• Erfahren Sie mehr über das Tracking von Events via URLs als alternative Methode

• Richten Sie die WooCommerce-Integration für automatisches E-Commerce-Tracking ein