Event-Klassen in WordPress

In diesem Artikel wird erklärt, wie Sie bestimmte Elemente auf Ihrer WordPress-Website taggen und ihnen Events zuweisen.

Informationen dazu, wie Sie Events tracken, indem Sie ein bestimmtes Event einer bestimmten URL zuweisen, finden Sie in diesem Leitfaden.

Um bestimmte Elemente auf Ihrer Website zu taggen, die Sie tracken möchten, folgen Sie dem untenstehenden Leitfaden.

So verwenden Sie Event-Klassen in WordPress

Fügen Sie die Klasse aus dem Klassendokument 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-WordPress-Editor macht es einfach, jedem Block benutzerdefinierte Klassen hinzuzufügen:

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

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

3. Scrollen Sie nach unten zum Abschnitt Erweitert und klappen Sie ihn auf

4. Geben Sie im Feld Zusätzliche CSS-Klassen den PixelFlow-Klassennamen ein (z. B. 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 Bereich auf den Tab Erweitert

3. Suchen Sie das Feld CSS-Klassen (oder Zusätzliche CSS-Klassen, abhängig von Ihrer Elementor-Version)

4. Geben Sie den PixelFlow-Klassennamen aus dem Klassendokument ein

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

Verwendung anderer Page Builder

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

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

• Beaver Builder: Modul auswählen → Tab Erweitert → Abschnitt CSS-Selektoren → Feld Klasse

• WPBakery: Element bearbeiten → Tab Design-Optionen → Feld Zusätzlicher Klassenname

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

Beispiel: Tracking eines Subscribe-Buttons

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

1. Suchen Sie die Subscribe-Klasse im Klassendokument: 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 dem CSS-Klassenfeld hinzu, indem Sie die für Ihren Editor beschriebene Methode anwenden (siehe oben)

4. Speichern und veröffentlichen Sie Ihre Änderungen

Tracking von Formularabsendungen

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

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

2. Fügen Sie Ihrem Absendebutton die entsprechende Aktionsklasse hinzu (z. B. action-btn-lead-011-pf für ein Lead-Event)

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

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

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

   • info-cust-full-name-pf für das Feld vollständiger Name

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

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

Überprüfen Ihrer Einrichtung

Nachdem Sie Ihren Elementen Klassen 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 (Klicken des Buttons, Absenden des Formulars 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, wenn 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 betrachten und nicht eine Vorschau oder einen Entwurf

Events werden im PixelFlow-Dashboard nicht getrackt

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

• Bestätigen Sie, dass Sie den exakten Klassennamen aus dem Klassendokument verwenden

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

• Überprüfen Sie Ihre Browser-Konsole auf JavaScript-Fehler, die das Tracking verhindern könnten

Formulardaten werden nicht erfasst

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

• Überprüfen Sie, ob die Eingabefeld-Klassen den tatsächlichen <input>-Elementen hinzugefügt wurden, nicht Labels oder Containern

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

Was kommt als Nächstes?

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

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

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