Event-Klassen auf Webflow

So markieren Sie bestimmte Elemente auf Ihrer Webflow-Website und weisen ihnen Events zu

Für Informationen dazu, wie Sie Events durch Zuweisung zu einer bestimmten URL verfolgen, folgen Sie diesem Leitfaden.

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

So verwenden Sie Event-Klassen auf Webflow

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

Verwendung des Webflow Designers

Der Webflow Designer macht es einfach, benutzerdefinierte Klassen zu jedem Element hinzuzufügen:

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

2. Suchen Sie in der rechten Seitenleiste das Style-Panel

3. Klicken Sie oben im Style-Panel in das Selector-Feld (wo Sie Klassennamen hinzufügen)

4. Geben Sie den PixelFlow-Klassennamen ein (zum Beispiel action-btn-sub-002-pf für ein Subscribe-Event) und drücken Sie Enter

5. Klicken Sie oben rechts auf Publish, um Ihre Änderungen zu speichern

Verwendung des Webflow CMS

Wenn Sie Webflow CMS-Elemente verwenden:

1. Wählen Sie das CMS-Element, das Sie tracken möchten, im Webflow Designer aus

2. Klicken Sie im Style-Panel in das Selector-Feld

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

4. Drücken Sie Enter, um die Klasse anzuwenden

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

Beispiel: Einen Subscribe-Button tracken

Wenn Sie jedes Mal ein „Subscribe“-Event tracken möchten, wenn jemand auf einen bestimmten „Subscribe“-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 im Webflow Designer aus

3. Fügen Sie action-btn-sub-002-pf im Selector-Feld des Style-Panels hinzu (siehe oben)

4. Drücken Sie Enter, um die Klasse anzuwenden

5. Veröffentlichen Sie Ihre Website

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:

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 Absende-Button hinzu (z. B. action-btn-lead-011-pf für ein Lead-Event). Eine vollständige Liste der Action-Klassen finden Sie hier

3. Fügen Sie Klassen für die Datenextraktion zu Ihren Eingabefeldern hinzu:

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

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

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

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

Webflow eCommerce Events tracken

Für Webflow eCommerce-Seiten bietet PixelFlow automatisches Tracking für Checkout- und Kauf-Events:

• Automatische Datenextraktion: Aktivieren Sie die automatische Extraktion von Produktdaten (Währung, Wert, Produkt-IDs) von Ihren Webflow-Checkout-Seiten. Siehe Webflow eCommerce Events automatisch tracken für die Einrichtungsanleitung.

• Produktkatalog-Synchronisierung: Gleichen Sie Ihre Webflow-Produkt-IDs mit Facebook Catalog Ads ab, um Dynamic Product Ads zu ermöglichen. Siehe So synchronisieren Sie Webflow eCommerce Produkt-IDs mit Facebook Catalog Ads für detaillierte Schritte.

Überprüfung Ihrer Einrichtung

Nachdem Sie Klassen zu Ihren Elementen hinzugefügt haben:

1. Besuchen Sie Ihre 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 dieses Elements erscheint

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

5. Prü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-Website

• Leeren Sie Ihren Browser-Cache und erzwingen Sie eine Aktualisierung der Seite (Cmd+Shift+R oder Strg+Shift+R)

• Stellen Sie sicher, dass Sie nach dem Hinzufügen der Klasse auf „Publish“ geklickt haben

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

• Stellen Sie sicher, dass Sie die live veröffentlichte 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 Webflow Setup-Leitfaden)

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

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

• Prüfen Sie Ihre Browserkonsole 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 Klassen für Eingabefelder den tatsächlichen <input>-Elementen hinzugefügt wurden, nicht Labels oder Wrappern

• Stellen Sie bei Webflow-Formularen sicher, dass Klassen sowohl auf den Formularblock als auch auf die einzelnen Eingabefelder angewendet werden

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 über URLs als alternative Methode

• Richten Sie automatisches eCommerce-Tracking für Webflow-Shops ein

• Konfigurieren Sie die Produktkatalog-Synchronisierung für Dynamic Product Ads