Pixelflow
Ereignis-Tracking via Klassen

So verfolgen und lösen Sie Events mit „Klassen“ aus

Zwei Möglichkeiten, Events auszulösen

Es gibt zwei verschiedene Möglichkeiten, Events auf Ihrer Website zu verfolgen und auszulösen:

  1. Event-URL-Tracking – Löst ein Event aus, wenn eine bestimmte Seite geladen wird (z. B. IhreSeite.de/erfolg)

  2. Elementklassen-Tracking – Fügen Sie Elementen (Buttons, Formulare usw.) CSS-Klassen hinzu, um ein Event bei Klicks etc. auszulösen.

So funktioniert das Tracking von Elementklassen

Sie weisen Elementen auf Ihrer Website spezielle CSS-Klassen (einen Code-Schnipfel) zu, damit PixelFlow weiß, welche Aktion stattgefunden hat. Häufige Beispiele sind:

  • Button-Klicks – Verfolgen Sie, wenn Benutzer auf einen „Abonnieren“- oder „Kontakt“-Button klicken

  • Formularübermittlungen – Erfassen Sie Lead-Events, wenn Benutzer Formulare absenden

  • E-Commerce-Aktionen – Verfolgen Sie automatisch die Events „In den Warenkorb“, „Checkout“ und „Kauf“

In Aktion erleben: Besuchen Sie den PixelFlow Tracking Playground, um Live-Beispiele für jeden Event-Typ zu erkunden. Der Playground zeigt die exakte HTML-Struktur und die benötigten Klassen sowie einen Echtzeit-Event-Monitor, damit Sie sehen können, welche Daten an Meta gesendet werden.

Klassenkategorien

PixelFlow-Klassen fallen in drei Kategorien:

  • Allgemeine Events – Diese werden Buttons oder interaktiven Elementen hinzugefügt, um ein Event auszulösen

  • Formular-Events – Diese werden Formulareingaben hinzugefügt, um Benutzerdaten zu erfassen (name, email, phone)

  • Kauf-Events – Diese werden E-Commerce-Elementen hinzugefügt, um Produktinformationen für die Events Add To Wish List, Add To Cart, Initiate Checkout und Purchase zu verfolgen

Die Art und Weise, wie Sie diese Klassen anwenden, variiert je nach Plattform. Prüfen Sie vor der Implementierung immer die plattformspezifischen Anweisungen unten.

Plattformspezifische Anweisungen

Lesen Sie zuerst die Anleitung für Ihre Website-Plattform, um zu verstehen, wie Sie diese Klassen korrekt anwenden:

Allgemeine Event-Klassen

Wenden Sie diese Klassen auf Buttons oder interaktive Elemente an, um spezifische Meta-Events auszulösen:

Event-Name

CSS-Klasse

Verwendung in Facebook für

AddPaymentInfo

action-btn-pymt-001-pf

Optimierung zahlungsbezogener Werbekampagnen, Retargeting unvollständiger Checkouts und Aufbau von Zielgruppen mit hoher Kaufabsicht.

AddtoCart

action-btn-cart-005-pf

E-Commerce-Optimierung, Erstellung dynamischer Produktanzeigen und Retargeting von Warenkorbabbrechern zur Umsatzsteigerung.

AddtoWishlist

action-btn-wl-006-pf

Interessenbasiertes Targeting, personalisierte Anzeigeempfehlungen und Pflege langfristiger Käuferbeziehungen.

CompleteRegistration

action-btn-reg-007-pf

Optimierung der Nutzerakquise, Tracking von Registrierungs-Funnels und Erstellung von Zielgruppen für Onboarding-Kampagnen.

Contact

action-btn-cntct-003-pf

Lead-Nurturing, Zuordnung von Demo-Anfragen oder Support-Interaktionen zu Kampagnen und Aufbau von Kontakt-Zielgruppen.

CustomiseProduct

action-btn-cstm-008-pf

Personalisierte E-Commerce-Anzeigen und Verständnis von Nutzerpräferenzen in dynamischen Produktkatalogen.

Donate

action-btn-don-009-pf

Messung des Spendenverhaltens für Kampagnen gemeinnütziger Organisationen, Optimierung von Spendenanzeigen und Aufbau von Spenden-Retargeting-Listen.

FindLocationButton

action-btn-loc-017-pf

Anzeigen für lokale Dienstleistungen, Optimierung des Geotargetings und Zuordnung von Ladenbesuchen.

FindLocationInput

action-inpt-loc-016-pf

Anzeigen für lokale Dienstleistungen, Optimierung des Geotargetings und Zuordnung von Ladenbesuchen.

InitiateCheckout

action-btn-buy-004-pf

Identifizierung von Kaufabsichten, Reduzierung von Warenkorbabbrüchen via Retargeting und Optimierung für Conversions in der Mitte des Funnels.

Lead

action-btn-lead-011-pf

Optimierung der Lead-Generierung, Bewertung hochwertiger Leads in Anzeigen und Erstellung von Custom Audiences für Follow-up-Nurturing.

Purchase

action-btn-plc-ord-018-pf

ROAS-Berechnung, Full-Funnel-Conversion-Optimierung und Erstellung von kaufbasierten Lookalike/Exclusion-Audiences.

Schedule

action-btn-schedule-010-pf

Dienstleistungsbasierte Anzeigen, Optimierung für gebuchte Termine und Retargeting von Nicht-Erschienenen.

SearchButton

action-btn-srch-015-pf

Verständnis der Suchintentions-Abfragen, Inhalts-/Anzeigenoptimierung für Suchbegriffe und Aufbau suchbasierter Zielgruppen.

SearchInput

action-inpt-srch-014-pf

Verständnis der Suchintentions-Abfragen, Inhalts-/Anzeigenoptimierung für Suchbegriffe und Aufbau suchbasierter Zielgruppen.

StartTrial

action-btn-trial-012-pf

Optimierung für SaaS/Freemium-Conversions und Retargeting von Testnutzern für Upgrades.

Subscribe

action-btn-sub-002-pf

Messung von Newsletter-/Dienstleistungsanmeldungen, Optimierung von Abonnements-Funnels und Erstellung von Lookalike Audiences aus Abonnenten.

SubmitApplication

action-btn-submit-013-pf

Personalbeschaffungsanzeigen, Zuordnung von Einstellungen zu Kampagnen und Optimierung für qualifizierte Bewerber-Funnels.

ViewContent

action-btn-vc-019-pf

Awareness am oberen Ende des Funnels, Messung der Inhaltsperformance und Retargeting engagierter Besucher.

Formular-Event-Klassen (zu jedem Formular hinzufügbar)

Fügen Sie diese Klassen Formular-Containern und Eingabefeldern hinzu, um Benutzerinformationen zu erfassen. Funktioniert mit den Events AddPaymentInfo, CompleteRegistration, Contact, CustomizeProduct, Donate, Lead, PageView, Schedule, StartTrial, SubmitApplication und Subscribe.

Um Benutzerdaten wie Name oder E-Mail zu erfassen, müssen Sie zuerst die Klasse info-frm-cntr-pf zu Ihrem Formular-Container hinzufügen. Fügen Sie dann die spezifischen Feldklassen den einzelnen Eingabefeldern hinzu.

Element

CSS-Klasse

Formular-Container oder Formular-Element

info-frm-cntr-pf

Vorname-Eingabefeld

info-cust-fn-pf

Nachname-Eingabefeld

info-cust-ln-pf

Vollständiger Name-Eingabefeld

info-cust-full-name-pf

E-Mail-Eingabefeld

info-cust-em-pf

Telefon-Eingabefeld

info-cust-ph-pf

Wert- oder Preisfeld

info-val-pf

Such- / Standort-Event-Klassen

Nutzen Sie diese Klassen, um Such- und Standortsuche-Events zu verfolgen. Umschließen Sie Ihre Such- oder Standort-Eingabefelder und Buttons mit dem Container-Element und fügen Sie dann die entsprechenden Klassen dem Eingabefeld und dem Button hinzu.

Die Container-Klasse info-srch-ctnr-pf sollte sowohl Ihr Eingabefeld als auch Ihren Button umschließen. Wenn auf den Button geklickt wird, extrahiert PixelFlow die Daten aus dem Eingabefeld und sendet sie mit dem Event.

Element

CSS-Klasse

Such- / Standort-Container-Element (umschließt Eingabefeld und Button)

info-srch-ctnr-pf

Such-Eingabefeld (Nutzer gibt Suchtext hier ein)

action-inpt-srch-014-pf

Such-Button (Event wird mit extrahierten Daten gesendet, wenn dieser Button geklickt wird)

action-btn-srch-015-pf

Standortsuche-Eingabefeld (Nutzer gibt Standort hier ein)

action-inpt-loc-016-pf

Standortsuche-Button (Event wird mit extrahierten Daten gesendet, wenn dieser Button geklickt wird)

action-btn-loc-017-pf

E-Commerce-Event-Klassen

Nutzen Sie diese Klassen, um Produktinformationen für E-Commerce-Events zu verfolgen: Add To Wish List, Add To Cart, Initiate Checkout und Purchase.

Wenden Sie diese auf Elemente in Ihrem Warenkorb, Checkout oder auf der Bestellbestätigungsseite an.

E-Commerce-Tracking erfordert eine verschachtelte Struktur. Sie müssen zuerst die Haupt-Container-Klasse hinzufügen, dann die einzelnen Produkt-Container-Klassen und schließlich die spezifischen Produktdetail-Klassen.

Container-Struktur

Element

CSS-Klasse

(ERFORDERLICH) Produktlisten-Container, der alle Produkte und den Button enthält

info-chk-itm-ctnr-pf

(OPTIONAL) Gesamtsummen-Element

info-totl-amt-pf

Klassen auf Produktebene

Element

CSS-Klasse

(ERFORDERLICH) Einzelner Produkt-Container

info-chk-itm-pf

Produkt-ID

info-itm-id-pf

Produktpreis

info-itm-prc-pf

Produktmenge

info-itm-qnty-pf

Für Produkt-IDs: Verwenden Sie dieselbe ID, die in Ihrem CMS/Datenbank und im Meta-Produktkatalog vorhanden ist. Sie können dies als verstecktes Feld hinzufügen, wenn es für Benutzer nicht sichtbar sein soll.

Hilfe erhalten

Wenn Sie Unterstützung bei der Implementierung dieser Klassen auf Ihrer spezifischen Plattform benötigen oder Probleme beim Tracking beheben müssen, lesen Sie Ihre plattformspezifische Anleitung oder kontaktieren Sie den PixelFlow-Support.

Sobald Sie die entsprechenden Klassen hinzugefügt haben, testen Sie Ihr Tracking, indem Sie die Aktionen auf Ihrer Website durchführen und die PixelFlow-Event-Logs prüfen, um zu bestätigen, dass die Events korrekt ausgelöst werden. Sie können Ihr eigenes Tracking-Skript auch im PixelFlow Tracking Playground testen, bevor Sie es auf Ihrer Live-Seite implementieren.

War das hilfreich?