Formular-Conversions tracken (GTM)

Erfolgreiche Formular-Absendungen im eingebetteten Formular an Google Tag Manager und eigene Skripte melden

Wenn du ein Formular auf deiner Website einbettest, läuft es in einem iframe auf der SimpliServ-Domain. Dein Tracking-Code (Google Tag Manager, Google Analytics, …) läuft dagegen auf deiner Domain – beide können aus Sicherheitsgründen nicht direkt aufeinander zugreifen.

Damit du eine erfolgreiche Absendung trotzdem messen kannst, meldet das Formular jede erfolgreiche Einsendung an die umgebende Seite. Beim Skript-Widget wird daraus automatisch ein dataLayer-Event – du brauchst in GTM nur einen Trigger anzulegen.

Das Tracking funktioniert zuverlässig nur mit dem Skript-Widget (embed.js), nicht mit dem einfachen iframe. Das Widget läuft auf deiner Seite und kann deshalb in deinen dataLayer schreiben. Für das einfache iframe gibt es weiter unten eine manuelle Variante.

Mit Google Tag Manager

Voraussetzung: Das Formular ist über das Skript-Widget eingebettet:

<div data-simpliserv-form="TOKEN" data-simpliserv-slug="SLUG"></div>
<script src="https://simpliserv.app/embed.js" async></script>

Sobald jemand das Formular abschickt, schreibt das Widget folgendes Event in den dataLayer deiner Seite:

window.dataLayer.push({
  event: 'simpliserv_form_submit',
  simpliserv: {
    formId: 123,          // ID des Formulars
    formToken: 'abc…',    // öffentlicher Token des Formulars
    submissionId: 456,    // ID dieser Einsendung
  },
})

Einrichtung in GTM

Trigger anlegen

Lege in GTM einen neuen Trigger vom Typ Benutzerdefiniertes Ereignis an. Trage als Ereignisname exakt ein:

simpliserv_form_submit

Der Trigger feuert dann bei jeder erfolgreichen Formular-Absendung.

Variablen anlegen (optional)

Wenn du Formular- oder Einsendungs-ID an dein Analytics-Tool weitergeben willst, lege je eine Datenschicht-Variable an:

Variablentyp	Name der Datenschichtvariable
Datenschicht-Variable	`simpliserv.formId`
Datenschicht-Variable	`simpliserv.submissionId`

Tag verknüpfen

Erstelle dein Tag (z. B. ein GA4-Ereignis „generate_lead" oder eine Conversion deiner Werbeplattform) und weise ihm den Trigger simpliserv_form_submit zu. Über die Variablen aus Schritt 2 kannst du formId / submissionId als Event-Parameter mitgeben.

Testen

Öffne im GTM den Vorschaumodus (Tag Assistant), lade deine Seite mit dem eingebetteten Formular und schicke es testweise ab. Im Tag Assistant muss das Ereignis simpliserv_form_submit erscheinen und dein Tag auslösen. Anschließend Veröffentlichen nicht vergessen.

Ohne Tag Manager (eigenes Skript)

Du kannst das Ereignis auch direkt mit JavaScript abfangen – etwa um eine Danke-Seite anzuzeigen oder eine eigene Tracking-Funktion aufzurufen.

Mit Skript-Widget löst embed.js auf deiner Seite zusätzlich ein DOM-Event aus:

<script>
  window.addEventListener('simpliserv:form:submit', function (event) {
    // event.detail = { formId, formToken, submissionId }
    console.log('Formular abgeschickt', event.detail)
  })
</script>

Beim einfachen iframe (ohne embed.js) hörst du stattdessen direkt auf die postMessage-Nachricht des Formulars. Prüfe immer event.origin, damit nur Nachrichten von SimpliServ verarbeitet werden:

<script>
  window.addEventListener('message', function (event) {
    if (event.origin !== 'https://simpliserv.app') return
    var data = event.data
    if (!data || data.type !== 'simpliserv:form:submit') return
    // data.formId, data.formToken, data.submissionId
    console.log('Formular abgeschickt', data)
  })
</script>

Ersetze https://simpliserv.app durch die Domain, von der du das Formular bzw. embed.js lädst, falls SimpliServ unter einer eigenen Domain läuft.