Event-Klassen auf Webflow

Diese Anleitung erklärt, wie Sie Elemente auf Ihrer Webflow-Website mit einer „Klasse“ kennzeichnen, die es PixelFlow ermöglicht, dieses bestimmte Element, diesen Abschnitt oder diese Daten zu verfolgen, um ein Event auszulösen oder zusammen mit einem Event an Meta zu senden.

Klicken Sie hier, um alle Möglichkeiten zum Tracken und Auslösen von Events auf Ihrer Website anzuzeigen.

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

Webflow-Buttons tracken

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

1. Suchen Sie die Lead-Klasse im Klassen-Dokument: action-btn-lead-011-pf

2. Wählen Sie Ihren Button im Webflow Designer aus

3. Fügen Sie action-btn-lead-011-pf in das Selector-Feld im Style-Panel ein (siehe oben)

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

5. Veröffentlichen Sie Ihre Website

Formularübermittlungen in Webflow tracken

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 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 den Eingabefeldern Klassen zur Datenextraktion hinzu:

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

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

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

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

Webflow eCommerce-Events tracken

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

• 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.

Ihre Einrichtung überprüfen

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 (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-Website

• Leeren Sie Ihren Browser-Cache und laden Sie die Seite neu (Cmd+Shift+R oder Strg+Shift+R)

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

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

• Stellen Sie sicher, dass Sie die live veröffentlichte Website ansehen, keine Vorschau oder einen Entwurf

Events werden nicht im PixelFlow-Dashboard getrackt

• Überprüfen Sie, ob das PixelFlow-Skript korrekt installiert ist (siehe die Webflow-Einrichtungsanleitung)

• Vergewissern Sie sich, dass Sie den exakten Klassennamen aus dem Klassen-Dokument verwenden

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

• Ü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 zum Formular-Container hinzugefügt wurde

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

• Achten Sie bei Webflow-Formularen darauf, dass die 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