Was ist Ihre Herausforderung?

Sprechen Sie direkt mit einem Experten unter +49 (0)30 611016610

Ich will News!

    Kontakt
    Virtuelle Dokumente als Symbol für Contact Form 7 auf Websites
    ANALYTICS

    So bindest du das Contact Form 7 über den GTM ein

    Kostenlosen Website-Check erhalten!
    Home Blog
    WEVENTURE 10/11/22

    Achtung, Nerd-Content voraus – und Tracking-Grundwissen vorausgesetzt: Wir erklären dir in diesem Blogartikel, wie du das Contact Form 7 (CF7) mit dem Google Tag Manager für deine Marketing-Kanäle tracken kannst.


    Was dich erwartet:

    Aktuell ist WordPress wohl eines der beliebtesten CMS für Websites. Und das aus gutem Grund, denn dort kann man Webprojekte relativ einfach umsetzen und viele (kostenfreie) Plugins unterstützen bei der Individualisierung der eigenen Website. Wer auf seiner WordPress-Seite auch ein Kontaktformular anbieten möchte, stößt bei der Recherche früher oder später auf Contact Form 7.

    Wir erklären dir jetzt, wie du das Tracking des WordPress-Plugins über den Google Tag Manager einbindest. Bitte denke daran, dass dieser Beitrag eher etwas für Tracking-Fortgeschrittene ist. Du solltest also Begriffe wie „DataLayer“ und „DOM Event“ zumindest schon grundlegend kennen.

    DataLayer.push für Contact Form 7 erstellen

    Contact Form 7 basiert auf AJAX, nach Absenden des Formulars wird die Website also nicht erneut geladen. Daher bietet das Plugin verschiedene DOM Events an, die wir im Tag Manager auslesen können.
    Die folgende Liste zeigt DOM Events, die bei erfolgreicher Formularübermittlung feuern und dir verschiedene Ergebnisse anzeigen:

    • wpcf7invalid – Es wurde keine E-Mail gesendet, da Felder mit ungültigen Eingaben vorhanden sind.
    • wpcf7spam – Es wurde aufgrund einer möglichen Spam-Aktivität keine E-Mail gesendet.
    • wpcf7mailsent – Die E-Mail wurde gesendet.
    • wpcf7mailfailed – Der E-Mail-Versand ist fehlgeschlagen.
    • wpcf7submit – Feuert bei der erfolgreichen Formularübermittlung, unabhängig von anderen Ereignissen.

    CF7 Event Listener

    Um das Tracking einzurichten, erstellst du zuerst ein Hilfs-Tag in deinem GTM-Container. Dieses Hilfs-Tag erzeugt den benötigten DataLayer für das CF7-Formular.
    Erstelle zuerst einen neuen Tag und benenne ihn. Wir nutzen gern den Helper ContactForm7 Listener.

    Contact Form 7 einbauen: Screenshot Event Listener

    Wähle in der Tag Configuration Custom HTML und füge das folgende Code Snippet ein. Der Trigger ist All Pages.

    <script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        dataLayer.push({
           'event' : 'wpcf7successfulsubmit',
           'CF7formID' : event.detail.contactFormId
        });
        }, false );
    </script>
    Screenshot Event Listener mit HTML-Code

    Listener im Debug-Modus testen

    Bevor du nun weitermachst, teste zuerst den eben erstellten Tag im Debug-Modus.

    Contact Form 7 einbinden: Screenshot Debug-Modus

    In der Übersicht siehst du, ob der eben erstellte Helper auf jeder aufgerufenen Seite auslöst.

    Screenshot Debug Modus 2

    Variable und Trigger für Contact Form 7 erstellen

    In den nächsten Schritten zeigen wir dir weitere sinnvolle oder notwendige Vorbereitungen.

    Formulare unterscheiden mit Hilfe von Variablen

    Falls du mehrere Formulare auf der Website nutzt, empfehlen wir dir, eine Variable für die FormID einzuführen. Die ID wird vom Plugin in WordPress für jedes einzelne Formular automatisch erstellt. Du kannst sie im Plugin unter „Formulare -> Kontaktformulare“ jederzeit einsehen.

    Contact Form 7 einbinden: Screenshot Variable 1

    Um diese eindeutige ID vom GTM mitsenden zu lassen, wird eine eigene Variable benötigt. Hierfür erstellst du eine benutzerdefinierte Variable mit der Konfiguration vom Typen Data Layer Variable. Wir empfehlen dir auch hier zwei eindeutige Benennungen, die den Zweck der Variable aufgreifen.

    Screenshot Variable 2

    Grundsätzlich ist es nur wenig Aufwand, die Form ID von Anfang an mit einzupflegen, auch wenn du aktuell nur ein Kontaktformular nutzt. Daher empfehlen wir, dies gleich mit zu implementieren.

    Trigger erstellen

    Der benötigte Trigger ist ein Custom Event. Der Eventname muss mit dem Namen im Helper übereinstimmen, bei uns ist es zum Beispiel „wpcf7successfulsubmit“. Hier kannst du grundsätzlich auch andere Eventnamen wählen.

    Contact Form 7 einbinden: Screenshot Trigger

    Du kannst statt All Custom Events auch Some Custom Events wählen und die eben erstellte Variable DataLayer – CF7formID nutzen, um ein bestimmtes Kontaktformular zu tracken.
    Falls du mit Some Custom Events arbeitest, geben wir dir noch einen kleinen Tipp: Benenne den Trigger, indem du entweder den Namen des Formulars oder die Seite, auf der es auslöst, mit in den Namen aufnimmst. So behältst du den Überblick, falls du mehrere Trigger nutzen möchtest.

    Der CF7-Tag für Google Analytics

    Die ersten wichtigen Schritte sind nun getan. Lassen wir den komplizierten Teil hinter uns und kommen zu der Erstellung der Verknüpfung zu Google Analytics.
    Die Erstellung des Tags für Google Ads oder andere wird mit unseren bisher vorbereiteten Events und Variablen ebenso durchgeführt. Beginnen wir mit dem alten Analytics, das zumindest noch bis Juli 2023 läuft (außer du nutzt die kostenpflichtige 360-Variante).

    Universal Analytics (GA3)

    In meinem Beispiel-Tag lassen wir außerdem als Label die Form ID mit zu Analytics übermitteln. Vor allem bei mehreren Formularen ist dies sinnvoll, um die Daten später sortieren und besser auswerten zu können.

    Tag TypeGoogle Analytics: Universal Analytics
    Track TypeEvent
    Categoryform submission
    Actionform submit
    Label{{DataLayer – CF7formID}}
    Google Analytics setting[deine Google Analytics Default Settings]
    Contact Form 7 einbauen: Screenshot Analytics GA3

    Google Analytics 4

    Google Analytics 4, der völlig zu Unrecht ungeliebte kleine Bruder von Universal Analytics, macht das Erstellen des GTM-Tags einfacher. Wir müssen uns dabei keine Category oder Action aus den Fingern saugen, die sich am Ende doppeln. Oder der Inhalt nicht so richtig zum Überbegriff passt. Möchte man zum Beispiel neben der ID mehrere andere Parameter anzeigen lassen, wird es sehr voll in den Bereichen und falls man alles in einen Bereich gliedert, lässt es sich schwierig sortieren.

    Aber schauen wir uns erstmal den grundlegenden Tag an: Hier benötigst du nur einen Eventnamen und, falls du möchtest, oben erwähnte Parameter. Ich habe mich sehr einfach für form_submission als Eventname entschieden und als Parameter schicke ich noch die Form-ID mit. Weitere mögliche Parameter sind z. B. Form-Name, Form-Sprache (bei multilingualen Webseiten) oder Pagepath.

    Contact Form 7 einbinden: Screenshot Analytics GA4

    Denke daran, deine Event- und Parameternamen kurz mit den Empfohlenen Ereignissen von Google abzugleichen, am besten die Google-übliche Nomenklatur zu verwenden und die Parameter in GA4 unter Custom Dimensions einzubinden.


    Der abschließende Test

    Nun bist du bereit, dein Formular-Tracking zu testen, bevor du es live schalten kannst. Ob du vorher all deine benötigten Tags, also auch für Google Ads oder Facebook, anlegst, bleibt dir überlassen. Denk aber vor dem Testen daran, den Tag Manager neu zu laden, und wechsle erneut in den Vorschau-Modus, um wirklich die aktualisierte Version zu prüfen.
    Such dir dein Formular, fülle es aus und sende es ab. Das Event muss nun im Debug-Modus zu sehen sein. Geschieht dies nicht, solltest du nochmal alle Benennungen prüfen. Hier kann es nämlich zu Schreibfehlern kommen, achte unbedingt auch auf Groß- und Kleinschreibung. Falls du mehrere Formulare mit unterschiedlichen Triggern nutzt, wiederhole dies mit allen weiteren Formularen oder den unterschiedlichen Seiten.
    Ein letzter Tipp: Nicht vollständig ausgefüllte Formulare sollten den Tag nicht auslösen. Teste daher auch dieses Szenario.

    Weitere Blogeinträge

    Viele sehr ähnliche Schafe auf einer Wiese
    SEO
    hreflang-Tag – Das Must-have bei internationalen Webseiten
    Holzwürfel mit Portrait-Icons als Symbol für Zielgruppe und Buyer-Persona
    Strategy
    Was ist eine Buyer-Persona und warum ist sie so wichtig?