Suchmaschinenoptimierung • Webdesign • Internet-Services

Tutorial zur Einrichtung des Google Tag Managers V2 zum Tracking von Wordpress-Formularen mit Contact Form 7

Anleitung: GTM & Contact Form 7 Tracking

Google Tag Manager Contact Form 7 Tracking

In Google Analytics den Formular-Versand erfassen

Die Vorteile des Google Tag Managers sollten sich bereits herum gesprochen haben. Wer noch nicht mit dem GTM V2 arbeitet, findet auf den Seiten von Onpage.org passende Argumente zur Nutzung dieses Tools.

Was ist der Google Tag Manager?

Kurz gesagt handelt es sich hierbei um ein von Google kostenlos bereitgestelltes Tool, mit dem sich Code-Snippets verwalteten und in eine Website einbinden lassen. Hierfür stellt der GTM einen Container bereit, der, einmal direkt nach dem body-Tag eingebunden, ohne künftige Anpassungen am Seiten-Quellcode das Einfügen, Modifizieren und Entfernen von Programmcode zulässt. Dies können einfache HTML-Bestandteile, komplexe JavaScripts oder auch Tracking-Codes bzw. Erweiterungen hierfür sein.

Wer also unabhängig von seiner IT/ seinem Programmierer, Webentwickler etc. Veränderungen an der Website vornehmen oder selbst weniger direkt im Seitenquellcode arbeiten möchte, findet hierfür im Google Tag Manager die „Eierlegende Wollmilchsau im Baukastensystem“.

Google selbst bietet eine gute Einstiegshilfe rund um die Begrifflichkeiten im Google Tag Manager 2 und beantwortet eine Vielzahl häufig gestellter Fragen.

So lässt sich das Tracking für Contact Form 7 im GTM V2 einrichten

Ich gehe in diesem Tutorial davon aus, dass der GTM-Container bereits korrekt in WordPress eingebunden wurde und es an dieser Stelle „nur“ um das Tracken des Formularversands geht. Hier auf weihmann.de befindet sich unter dem Menüpunkt Kontakt das nun vorgestellte Beispiel.

1. Trigger einrichten

Der Trigger, also der Auslöser für ein Ereignis, stellt sozusagen den Schalter bereit, um einen Code-Schnipsel auf der Website zu starten. Diesen, wie im Screenshot zu sehen, wie folgt anlegen:

Trigger einrichten - Google Tag Manager WPCF7

Trigger einrichten – Google Tag Manager WPCF7

  1. einen Namen z.B. „Kontaktformular WPCF7“ geben
  2. als Ereignis „Formular“ auswählen
  3. Trigger konfigurieren: „auf Tags warten aktivieren“, „Wartezeit“ auf 2.000 ms belassen und „Bestätigung überprüfen“ abwählen
  4. Aktivieren bei: „Page URL“ – „enthält“ – „kontakt“ (Bei mir ist die Seiten-URL „/kontakt“ und muss entsprechend angepasst werden, wenn das bei anders ist.)
  5. Auslösen bei: „Form Classes“ – „enthält“ – „wpcf7-form“ (Anm. „Form Classes“ muss ggf. noch als „Variable“ hinzugefügt werden.)
  6. im letzten Schritt nun den Trigger speichern
Google Tag Manager Variablen hinzufügen, entfernen

Google Tag Manager Variablen hinzufügen, entfernen

2. Tag einrichten

Wechselt im Menü nun auf die Tags und erstellt hier einen mit dem Namen „Analytics Kontaktformular“, „UA Contact“ oder wie es euch beliebt. Das Tag ist ebenso schnell konfiguriert, wie der Trigger:

  1. bei Produkt „Google Analytics“ auswählen
  2. als Tag-Typ sollte es heutzutage eigentlich immer „Universal Analytics“ sein
  3. das Tag konfigurieren, indem die zur Website gehörende Tracking-ID (z.B. UA-966707-XX) eingetragen wird (Hinweis: lässt sich in Google Analytics selbst ablesen)
  4. wer Display-Werbung nutzt, sollte den entsprechenden Haken setzen
  5. „Erfassungstyp“ ist ein „Ereignis“
  6. „Kategorie“ bekommt einen für euch sinnvollen Namen, um letztendlich in Google Analytics das Ereignis (Event) zuordnen zu können
  7. die „Aktion“ ist eine Bezeichnung für das Abschicken des Formulars
  8. als „Label“ nutze ich „{{Page URL}}“, um bei einer möglichen Verwendung mehrerer Formulare oder bei der Einbindung auf mehreren Seiten zuordnen zu können, von aus es abgeschickt wurde
  9. „Treffer ohne Interaktion“ wird auf „falsch“ gesetzt
  10. weitere mögliche Einstellungen sind hierfür nicht mehr notwendig
  11. der letzte Punkt ist das „Auslösen bei“ Typ „Formular“ – und hier kommt jetzt der eben erstellte Trigger zum Einsatz: in meinem Fall demnach „Kontaktformular WPCF7“
  12. Tag speichern
Tag einrichten - Google Tag Manager WPCF7 Tracking

Tag einrichten – Google Tag Manager WPCF7 Tracking

Container veröffentlichen

Wie immer im Google Tag Manager ist nicht jede Änderung sofort live, sondern muss durch einen Klick auf „Veröffentlichen“ bestätigt werden.

Google Tag Manager Container veröffentlichen

Google Tag Manager Container veröffentlichen

Überprüfen und Testen

Der Formularversand sollte getestet werden. In Google Analytics sollte in den Echtzeit-Berichten sofort unter „Ereignisse“ die Aktion erkennbar sein. Etwas später dann natürlich auch im Tagesbericht „Verhalten/ Ereignisse“.

Ereignis-Berichte in Google Analytics

Ereignis-Berichte in Google Analytics

Fazit


Das Arbeiten mit dem Google Tag Manager bedarf etwas einarbeit. Hat man sich aber eine Weile damit beschäftigt, gelingen interessante Dinge ohne direkt im Quellcode der Seite bzw. des Themes herum zu doktern. Wer Fragen zur Einrichtung des Contact Form 7 Trackings hat, kann hierfür gern die Kommentarfunktion unterhalb dieses Tutorials nutzen.

Wer mag, darf natürlich auch von der eigenen Seiten, dem eigenen Blog, aus Foren oder den sozialen Netzwerken hierauf verweisen.

Veröffentlicht unter: BlogTags: , , ,

3 Responses

  1. Anthony sagt:

    Thank You, translated from German to English – worked like a charm, I originally was not using the „Wait for Tags“ configuration.

    CHEERS from the USA.

Kommentare

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.