📊 Tracking

propform kann mit drei Analytics-Tools direkt sprechen. Alle drei sind unabhängig voneinander aktivierbar in den Formulareinstellungen.


Inhalt


Google Tag Manager (GTM)

Aktiviere GTM in den Formulareinstellungen und hinterlege deine GTM-Container-ID (Format GTM-XXXXXXX). propform pusht dann folgende Events in den dataLayer:

Event Wann ausgelöst?
form_onload Formular wird geladen
form_onpageshow Formular wird angezeigt (auch beim Zurückkommen aus dem Browser-Cache)
form_start_input Besucher beginnt mit der ersten Eingabe
form_abort Besucher verlässt das Formular nach begonnener Eingabe, ohne abzusenden
form_submit Absende-Button wird geklickt (vor der Server-Validierung)
form_next_step / form_previous_step Bei Multi-Step: Schritt vor bzw. zurück (mit Schritt-Nummern und -Namen)
onload_thank_you_page Danke-Seite wird nach erfolgreicher Absendung geladen
onpageshow_thank_you_page Danke-Seite wird angezeigt (auch aus dem Browser-Cache)

Jedes Event enthält zusätzlich formSlug und formCustomSlug, die Schritt-Events außerdem departureStep/arrivalStep samt Schritt-Namen.

Beispiel-Trigger in GTM

In GTM kannst du Trigger basierend auf den Events anlegen — z.B. eine Conversion an Google Ads oder ein Meta-Lead-Event bei onload_thank_you_page, oder ein Re-Engagement-Pixel bei form_abort.

⚠️ Für Conversions onload_thank_you_page verwenden: form_submit feuert bereits beim Klick auf den Absende-Button — also auch dann, wenn die Absendung z.B. an einem Pflichtfeld scheitert. Die Danke-Seite erreicht ein Besucher dagegen nur nach erfolgreich gespeicherter Absendung.

Feldwerte im Submit-Event mitschicken

Aktiviere in den Feld-Einstellungen eines Feldes die Option „Wert in Tracking-Events übergeben" — der aktuelle Wert des Feldes wird dann beim Absenden an das form_submit-Event angehängt (im dataLayer und in der postMessage an die Eltern-Seite), unter dem Schlüssel trackingFields.<feldname>:

  • Auswahlfelder (Single-/Multi-Select, Radio, Checkboxen) liefern den Options-Schlüssel und das sichtbare Label, z.B. trackingFields.ind_Stelle_123.value = ind_Schl_5905 und trackingFields.ind_Stelle_123.label = Sales Manager (m/w/d)
  • Text- und Zahlfelder liefern nur value
  • Leere Felder werden weggelassen

In GTM greifst du darauf mit Datenschichtvariablen zu (z.B. trackingFields.ind_Stelle_123.value) und hängst sie als Event-Parameter an deine Tags. Typischer Use-Case: Bewerbungsformular mit Stellen-Auswahl — das Tracking sieht, welche Stelle beworben wurde.

⚠️ Datenschutz: Markiere keine Felder mit personenbezogenen Daten (Name, E-Mail, Telefon …), wenn dafür keine Einwilligung der Besucher vorliegt — die Werte fließen in dein Tag-Management und ggf. an dessen Empfänger.

💡 Multi-Step-Schritt-Tracking: Pro Umbruch-Feld kannst du im Feld-Editor einen Step-Namen vergeben (z.B. „Step 2: Kontaktdaten"). Dieser landet in den form_next_step-/form_previous_step-Events und ermöglicht detailliertes Funnel-Tracking.


Facebook Pixel

Aktiviere Facebook Pixel in den Formulareinstellungen und hinterlege deine Pixel-ID (15–16-stellige Zahl aus dem Meta Events Manager). propform lädt dann den Meta-Basiscode direkt im Formular und löst bei jedem Seitenaufruf ein PageView-Event aus — sowohl auf dem Formular selbst als auch auf der Danke-Seite nach erfolgreicher Absendung.

Conversions messen: Custom Conversion auf die Danke-Seite

Die Danke-Seite hat eine eigene URL, die auf /thankyou endet. Lege im Meta Events Manager eine benutzerdefinierte Conversion (Custom Conversion) an:

  • Ereignis: PageView
  • Regel: URL enthält thankyou

Diese Conversion zählt exakt die erfolgreichen Absendungen und lässt sich in Anzeigengruppen als Conversion-Ziel auswählen.

💡 Standard-Event Lead gewünscht? (z.B. für Lookalike Audiences oder Kampagnen-Optimierung auf „Lead"): Nutze dafür den Google Tag Manager — Meta-Basiscode als Custom-HTML-Tag auf allen Seiten plus ein Tag mit fbq('track', 'Lead'); und Trigger auf das Custom Event onload_thank_you_page. Den propform-eigenen Pixel-Schalter in dem Fall nicht zusätzlich aktivieren, sonst feuert PageView doppelt.


Etracker

Aktiviere Etracker und hinterlege deinen Etracker-Account-Code. Praktisch, wenn du eh schon Etracker für deine Hauptseite nutzt und Formular-Events ins gleiche Reporting laufen sollen.

CSS-Klasse track-submit für Multi-Step-Conversion-Tracking

Bei Multi-Step-Formularen trägt der finale Submit-Button zusätzlich die CSS-Klasse track-submit — die Weiter-/Zurück-Buttons zwischen den Schritten haben sie nicht.

Damit kannst du in deiner Etracker-Konfiguration (oder anderen Tracking-Tools) gezielt nur den echten Conversion-Klick zählen, ohne die Navigations-Klicks zu missdeuten:

// Beispiel: Etracker-Event nur am finalen Submit
document.querySelector('.track-submit')?.addEventListener('click', function() {
  _etracker.sendEvent(new et_UserDefinedEvent('FormConversion', 'Anfrage', 'Submit', null));
});

💡 Bei Single-Page-Formularen ist track-submit ebenfalls vorhanden — der Selector funktioniert universell.


⚠️ Cookie-Consent ist deine Verantwortung

propform-Formulare haben bewusst keinen Cookie-Consent-Banner. Wenn du Tracking aktivierst (egal ob GTM, Pixel oder Etracker), bist du als Formularbetreiber dafür verantwortlich, dass eine entsprechende Einwilligung der Besucher vorliegt.

Praktische Lösung:

  • Wenn das Formular als iFrame in deine Hauptseite eingebunden ist, regelt typischerweise der Cookie-Banner deiner Hauptseite die Einwilligung.
  • Wenn das Formular als Standalone-URL läuft, musst du eigenständig dafür sorgen — z.B. über deine Datenschutzerklärung, die du in den Formulareinstellungen unter „Impressum" verlinkst.

Weiter zu Webhooks 👉