Teil 4: Kontaktformulare
Update: Dieser Guide wurde für die Google Tag Manager-Version 1 geschrieben. Lesen Sie unser neues Tutorial für die GTM-Version 2.
Im vierten und letzten Teil unseres Google Tag Manager Guides zeigen wir Ihnen, wie Sie das Ausfüllen von Kontaktformularen messen. Mit wenigen Anpassungen können Sie nicht nur messen, wie viele Male ein Kontaktformular übermittelt wurde, sondern auch, welche Felder ausgefüllt wurden.
In unserem Beispiel messen wir ein Kontaktformular, bei dem zudem der «Contact Type» aus einem Drop-Down-Menü ausgewählt werden kann. Unser Beispiel zeigt, ob «General Inquiry» oder «Request a Quote» ausgewählt wurde.
Da der 4. Teil auf den vorangehenden Teilen unseres Google Tag Manager Guides aufbaut, gehen wir davon aus, dass Sie Teil 1, 2, und 3 bereits gelesen haben und über die Basics zu Event Listeners, Regeln und Makros Bescheid wissen.
1. Formularübermittlungs-Listener
Wenn Sie in Teil 3 unseres Google Tag Manager Guides bereits einen Formularübermittlungs-Listener erstellt haben, müssen Sie keinen zweiten erstellen, sondern können diesen Schritt überspringen.
2. Regel für das Kontaktformular
Wie wir bereits gelernt haben, wird in einer Google Tag Manager Regel definiert, auf welcher Seite sich das Formular befindet, das gemessen werden soll. Die Seite muss eindeutig identifizierbar sein, sei dies über eine spezifische URL oder über ein Attribut (class oder id) im HTML Code. (Details dazu finden Sie im Teil 3.)
In unserem Beispiel befindet sich das Kontaktformular auf der Seite mit der Endung «/contact». Wir können nun einfach eine Regel für das Kontaktformular erstellen, indem wir einen regulären Ausdruck verwenden, der nur auf diese Seite zutrifft:
- Klicken Sie auf «Neu» und wählen Sie im Drop-Down-Menü die Option «Regel».
- Geben Sie «Kontakt Formular» als Regel-Namen ein.
- Geben Sie die folgenden Bedingungen ein:
- {{url path}} stimmt überein mit dem regulären Ausdruck «.+/contact «
- {{event}} ist gleich «gtm.formSubmit»
- Klicken Sie auf «Speichern».
3. Kontakt-Typ Makro
Als nächstes erstellen wir ein Makro, das die Auswahl aus dem Drop-Down-Menü für den «Contact Type» erfasst. Dazu ist JavaScript Code erforderlich, der nach dem «id» Attribut des Menüs «Contact Type» sucht.
Der Code des Kontaktformulars sieht folgendermassen aus:
Das Drop-Down-Menü (im HTML-Code ist es der <select> Tag) verfügt über die id «contact type». Zudem hat jede Option ein «value» Attribut. Das können wir im folgenden JavaSript Code nutzen, um den «value» des ausgewählten «contact types» zu erfassen:
document.getElementById('contact-type').value;Um das Beispiel für Ihre Webseite anzupassen, können Sie im JavaScript Code die «id» für Ihr Drop-Down-Menü anpassen:
document.getElementById('HIER IHRE ID').value;Wenn Ihr Kontaktformular über keine «id» verfügt, können Sie stattdessen «class» oder «name» verwenden:
- Um das Makro zu erstellen, führen Sie die folgenden Schritte durch:
- Klicken Sie auf «Neu» und wählen Sie im Drop-Down-Menü die Option «Makro».
- Geben Sie «kontakt-typ» als Makro-Namen ein.
- Wählen Sie den folgenden Makro-Typ: Custom Javascript.
- Kopieren Sie die folgenden Code-Zeilen und geben Sie sie im Eingabefeld für Custom Javascript ein:
function() {
var choice = document.getElementById('contact-type').value;
return choice;
}
- Klicken Sie auf «Speichern».
4. Kontaktformular-Absenden-Tag
Als letztes brauchen wir wieder einen Event Tracking Tag, um die Aktion an Google Analytics zu übermitteln:
- Klicken Sie auf «Neu» und wählen Sie im Drop-Down-Menü die Option «Tag».
- Geben Sie «Kontaktformular Absenden» als Tag-Namen ein.
- Wählen Sie den folgenden Tag-Typ aus: Google Analytics > Universal Analytics ODER Klassisches Google Analytics (abhängig davon, welche Version Sie für Ihre Webseite verwenden).
- Tragen Sie die Google Analytics Web-Property-ID Ihrer Webseite ein.
- Wählen Sie die folgende Auslösungsregel: Kontakt Formular.
- Wählen Sie den folgenden Erfassungstyp: Ereignis.
- Geben Sie die Ereignis-Tracking-Parameter an: (Hier können Sie selber entscheiden, was für Sie sinnvolle Namen sind und wie die Ereignisse in Google Analytics erscheinen sollen.)
- Kategorie: kontakt
- Aktion: formular
- Label: {{kontakt-typ}}
- Klicken Sie auf Speichern.
Am Schluss wie immer debuggen, eine Version speichern und veröffentlichen.
Sie sehen also, dass der Google Tag Manager zwar über viele eingebaute Funktionen verfügt, es aber trotzdem erforderlich ist, dass Sie verstehen, wie Ihre Webseite funktioniert. Um den Google Tag Manager zu benutzen, müssen Sie bereit sein, zumindest mit den Browser Developer Tools den Code zu analysieren. Für fortgeschrittene Benutzer steht zudem der Google Tag Manager dataLayer zur Verfügung.
Am Ende unseres Google Tag Manager Guides angelangt, hoffen wir, dass wir Sie dazu animiert haben, den Google Tag Manager zu benutzen und ihn für die Events auf Ihrer Webseite anzupassen.
