Allgemein

Google Tag Manager: AJAX-Formulare tracken

Das Tracking von Formularen, die per AJAX nachgeladen und versandt werden, ist mit zwei Problemstellungen verbunden:

  1. Das Warten auf Elemente, die per AJAX nachgeladen werden
  2. Buttons oder Links, deren standardmässiger Klick durch JavaScript unterdrückt werden

Wie das Tracking dennoch funktioniert zeigen wir anhand eines Beispiels.

Als Ausgangslage dienen vier Dateien subscription.php, ajax_form.php, success.php und jquery.form.min.js, die als ZIP-Datei heruntergeladen und auf einen eigenen Webserver kopiert werden können.

Die Basis bildet eine simple Seite (subscription.php), die ein Formular per AJAX nachlädt (ajax_form.php).

Google Tag Manager Ajax Formular

Beim Klicken auf den „Submit“-Button wird das E-Mail-Feld auf eine korrekte E-Mail-Adresse geprüft und der standardmässige Klick durch JavaScript unterdrückt, z.B. über return false oder preventDefault().Wenn eine keine korrekte E-Mail-Adresse eingegeben wurde, erscheint ein Hinweis, dass die E-Mail-Adresse nicht korrekt ist, andernfalls wird die success.php angezeigt.

Google Tag Manager Ajax Formular Meldung

Wenn in Google Tag Manager nun ein Form-Submit- oder Click-Listener auf dieser Seite ausgelöst ist, so werden diese kein abgesandtes Formular und keinen Click verzeichnen, wenn der „Submit“-Button geklickt wird. Wenn die Anzahl dieser Klicks jedoch interessiert, geht man wie folgt vor:

1) Tag anlegen

Name vergeben (z.B. Subscription Click Handler) und bei Tag Type „Benutzerdefinierte HTML-Tag“ auswählen.

Folgenden Code im HTML-Feld eingeben (Tracking ID mit Ihrer ID austauschen nicht vergessen):

function defer(method) {
if (window.$) {
$(method());
} else {
setTimeout(function() {
defer(method)
}, 50);
}
}

defer(function() {
$( document ).ajaxComplete(function() {
$(‹input#buttonToTrack›).each(function(){
$(this).on(‹click.clicktracking›, function(){
ga(‹create›, ‹UA-XXXXX-X›);
ga(’send›, ‹event›, ‹category-subscribe›, ‹action-subscribe›, ‹label-subscribe›); // signal GA that this is an event
});
});
});
});

Google Tag Manager Tag anlegen

Dieser Code bewirkt, dass zuerst so lange gewartet wird, bis das Formular nachgeladen ist. Ist dies der Fall und es findet ein Klick auf „Submit“-Button statt, wird ein Event an Google Analytics gesendet. Die Kategorie, Aktion und die Bezeichnung des Events lassen sich nach eigenem Befinden anpassen.

2) Neue Auslösungsregel anlegen

Wenn dieser Tag nur auf der Subscription-Seite auslösen soll, wählen Sie folgende Parameter

{{url}}         Entsprechende RegExp      .*subscription.php.*

Google Tag Manager Neue Auslösungsregel anlegen

3) Tag mit Regel verknüpfen

Danach muss der Tag noch mit einer Regel verknüpft werden. Dazu geht man zu unserem Tag zurück und klickt oben rechts auf „Hinzufügen“ bei den Auslösungsregeln. Dann die eben angelegte Regel wählen.

Google Tag Manager Tag mit Regel verknüpfen Google Tag Manager Regel hinzufügen

4) Kontrolle

Um sicherzustellen, dass der Event korrekt getrackt wird, muss der GTM-Container noch veröffentlicht und das Ereignis ausgelöst werden. Wenn in Google Analytics Echtzeit-Ansicht das Ereignis angezeigt wird, hat alles funktioniert.

Google Tag Manager Kontrolle in der Echtzeit-Ansicht

Wenn Sie in Google Tag Manager noch nicht so sicher sind, ist unser ausführlicher Guide genau das richtige für Sie.