Analytics Ereignisse zum richtigen Zeitpunkt im Formular auslösen

So stellst du sicher, dass du nur valide Ereignisse in Google Analytics erfasst

Ich sehe immer wieder, wie Frontend-Entwickler ein Google Analytics Ereignis beim Klick auf den "Absenden"-Button auslösen.

Warum das völliger Schwachsinn ist? Das erkläre ich dir in diesem kleinen Beitrag.

Ein Formular ist in der Regel an Pflichtfelder gebunden. Das bedeutet, dass der Benutzer zum Beispiel dringend seine Email-Adresse eintragen muss.

Irgendwie muss man den Interessenten ja kontaktieren können.

Nun stell dir vor, dass der Interessent eine fehlerhafte Adresse angibt. Danach klick er auf den "Absenden"-Button.

Das Formular sollte nun überprüfen, ob die angegebene Adresse korrekt ist.

Das Ereignis ist schon längst bei Google, da die Validierung erst nach dem Klick auf den Button stattfindet.

Der Benutzer ändert die Email-Adresse ab und klickt erneut auf den Button. Ein weiteres Ereignis wird an Google gesendet.

Und nun bemerkst du, dass in Google Analytics mehr Formular-Ereignisse enthalten sind, als du tatsächlich bekommen hast...

Eine "Vielen Dank"-Seite ist klasse. Du kannst dich beim Interessent für eine Anfrage bedanken. Weitere Informationen zu Produkte und Beiträge können den Besucher nach der Anfrage dazu bewegen, noch ein paar andere Bereiche deiner Webseite anzusehen.

Und so eine Danke-Seite ist doch perfekt für den Versand eines Google Analytics Ereignisses geeignet!

Nicht wirklich ...

Der Benutzer hat viele Möglichkeiten auf die Danke-Seite zu gelangen:

1. Dein Benutzer wird nach dem Versand eines Formulars auf die Danke-Seite weitergeleitet. (Klar, ist ja auch gut so!)
2. Der Besucher lädt die Danke-Seite aus irgendeinem Grund neu. Natürlich wird das Ereignis dadurch erneut gesendet.
3. Nach einiger Zeit möchte er deine Webseite erneut besuchen. Die URL der Danke-Seite ist noch im Browser-Verlauf gesichert.
4. Du hast vergessen die Indexierung der Danke-Seite zu deaktivieren. Deshalb wird die Danke-Seite auch auf Google indexiert. Und natürlich wird das deine meist-besuchte Seite 😉

Das ist die undankbarste Variante der Validierung. Dir bleiben sehr nur wenige Möglichkeiten für dein Tracking:

1. Das Tracking wird auf die Danke-Seite eingebunden. Wie bereits beschrieben ist das eine schlechte Idee, da die Ereignisse verfälscht werden können.
2. Google kann das Ereignis auch per Measurement Protocol erhalten. Das Problem dabei ist jedoch, dass dein Server die Client-ID nicht kennt. Dazu müsstest du sie an den Server übermitteln. Das ist meiner Meinung nach zu viel Aufwand für das Tracking und als ungeübter PHP-Entwickler relativ schwer zu erlernen.

Solltest du keine andere Möglichkeit haben die Validierung umzuschreiben, empfehle ich dir eine hybride Lösung: Zunächst lässt du die Daten per OnSubmit und den Patterns vom Browser validieren. Danach kann der Server eine zweite Validierung vornehmen.

Achte nur darauf, dass die Pattern deines Formulars mit denen auf dem Server übereinstimmen. Das Ereignis-Tracking wird dann nach der JavaScript-Validierung ausgeführt.

Das ist eine sehr gute Methode, um Standard-Formulare ein Ereignis-Tracking zu geben.

Dafür benötigen deine Felder nur die Attribute required und type. Damit kannst du die Überprüfung des Formulars ganz dem Browser überlassen.

Hier findest du ein gutes Beispiel für ein sehr einfaches Formular:

<form action="vielen-dank.php" method="POST" onsubmit="ga( 'send', 'event', 'Formular', 'Anfrage' )">
	<label for="name">Dein Name *</label>
	<input type="text" name="name" id="name" required placeholder="Dein Name" />
	
	<label for="email">Deine Email-Adresse *</label>
	<input type="email" name="email" id="email" required placeholder="Deine Email-Adresse" />
	
	<label for="termin">Dein gewünschter Termin</label>
	<input id="termin" name="termin" type="date" />
	
	<input type="submit" value="Absenden" />
</form>

Der Browser weiß durch das Feld "required", dass das Feld dringend benötigt wird. Mit dem "type" definierst du ein Pattern. Das könntest du auch ohne Probleme per RegEx selbst definieren.

Ein schöner Nebeneffekt: Der Browser benachrichtigt den Benutzer automatisch bei einer Falsch-Angabe. Die Sprache wird automatisch vom Browser eingestellt. Jedoch kann man die "Du"-Form nicht verwenden. Die Benachrichtigungen sind immer in der "Sie"-Form.

Eine JavaScript-Validierung kann in 2 verschiedenen Formen umgesetzt werden. Die meisten Formular-Erweiterungen verwenden eine Validierung, die vom Browser des Benutzers vorgenommen wird. Die zweite Methode erkläre ich dir danach.

Die JavaScript-Validierung im Browser des Benutzers

Die Validierung kann durch einen "OnSubmit" individuell vom Entwickler programmiert werden. Dadurch kann zum Beispiel die Ausgabe der Fehlermeldungen nach Kunden-Wunsch umgesetzt werden.

Viele Formular-Erweiterungen berücksichtigen aber nicht den Versand eines Ereignis-Trackings. Dadurch ist es so gut wie unmöglich die Validierung sauber zu erweitern.

Wenn du das JavaScript deines Formulars selbst programmiert hast, sollte es einfach sein das Tracking hinzuzufügen.

Solltest du das Script nicht selbst programmiert haben, wird es schwierig. Du kannst überprüfen, ob die Erweiterung sog. Event-Listener verwenden. Contact Form 7 verwendet zum Beispiel solche Funktionen.

Solltest du nicht in JavaScript geübt sein, kannst du auch mein CF7 Event Tracker Plugin für WordPress verwenden.

So verwendest du den Event-Listener für Contact Form 7:

var wpcf7 = document.querySelector( '.wpcf7' );
wpcf7.addEventListener( 'wpcf7submit', function( event ) {
	ga( 'send', 'event', 'Formular', 'Anfrage' );
}, false );

Die JavaScript-Validierung per AJAX über den Server

Im Grunde funktioniert das Ereignis-Tracking bei der AJAX-Validierung wie bei der normalen JavaScript-Validierung.

Der Unterschied ist, dass die Daten an den Server übermittelt werden, der die Validierung vornimmt. Der Server sendet danach ein "OK" oder "Error" an den Browser zurück.

Führe das Eregnis-Tracking nur aus, wenn der Server ein "OK" zurückgibt. Andernfalls sendest du invalide Anfragen in deinem Analytics-Konto. Vergleichbar mit dem "Absenden"-Button Problem am Anfang.

So könnte ein ordentliches Tracking nach einer AJAX-Anfrage aussehen:

var request = new XMLHttpRequest();
request.open( 'GET', '/my/url', true );

request.onload = function() {
	if( this.status >= 200 && this.status < 400 ) {
		if( JSON.parse( this.response ) == "OK" ) {
			// Der Server antwortete mit einem "OK", also kann das Ereignis ausgelöst werden
			ga( 'send', 'event', 'Formular', 'Anfrage' );
		}
	}
	else {
		// Ein Fehler wurde ausgelöst
	}
};

request.onerror = function() {
	// Verbindungs-Fehler
};

request.send();

Beachte, dass das nur ein Beispiel ist. Deine AJAX-Abfrage kann auch mit jQuery umgesetzt werden. Zudem werden keine Daten in diesem Beispiel an den Server übertragen.

Wenn du ein sauberes Ereignis-Tracking für deine Formulare erstellen möchtest, solltest du nicht Kopflos an die Sache rangehen. Überlege dir 2 Mal, ob das Tracking ordentlich durchgeführt werden kann.

Sobald du die falsche Stelle für dein Tracking verwendest, kann das zu Problemen führen und Ergebnisse verfälschen.

Teste lieber 10 Mal, falls du Zweifel an deinem Tracking haben solltest. Beim Testing ist eine Staging-Umgebung der Webseite und ein Test-Konto von Google Analytics sehr hilfreich.

---

Analytics Ereignisse zum richtigen Zeitpunkt im Formular auslösen

Zu den Beiträgen

 

Das konnte dich auch interessieren

Atomare Webseiten-Struktur mit HTML und PHP

PHP Array_Diff für Multidimensionale Arrays

Apache Hotlinking Protection