Das Tracking von Formularen, die per AJAX nachgeladen und versandt werden, ist mit zwei Problemstellungen verbunden:
- Das Warten auf Elemente, die per AJAX nachgeladen werden
- 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).
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.
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
});
});
});
});
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.*
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.
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.
Wenn Sie in Google Tag Manager noch nicht so sicher sind, ist unser ausführlicher Guide genau das richtige für Sie.
