Formularabbrüche und Ausstiegsfelder messen - auch mit Google Analytics
Schöne Features und überragende Grafiken zeigen Web Analytics Tool-Hersteller immer gerne wieder, um potenzielle Käufer von ihrem Produkt zu überzeugen. Normalerweise bin ich gegenüber solchen „Beauty-Contest“-Features eher skeptisch, da sie im täglichen Gebrauch später kaum mehr eingesetzt werden. Ein allerdings tatsächlich sehr nützliches dieser Schönheits-Features ist die Messung der exakten Ausstiegspunkte innerhalb einem Formular. Wenn ein potenzieller Kunde das Bestellformular beim Feld zur Eingabe der E-Mailadresse abbricht, dann ist das nicht nur aus businesssicht kritisch, sondern bringt auch an den Tag, wo gewichtige Usability-Hürden liegen. Ein solches Feature zur Darstellung der Ausstiegsfelder (Form Abandonment) hatte die Firma WebSideStory (später von VisualSciences, dann Omniture, dann Adobe aufgekauft) bereits zur Jahrtausendwende eingeführt – mit einer visuell sehr nützlichen Darstellung im Website-Overlay direkt über dem Formular
Unerklärlicher- und bedauerlicherweise ist dieses Feature etwas aus der Mode gekommen – nur wenige Produkthersteller bieten heute etwas Vergleichbares out-of-the-ox an. Auch wer auf Google Analytics setzt, musste auf eine solch hilfreiche Funktion in der Verbesserung des Online-Angebots bislang verzichten. Diese Lücke möchte ich mit diesem Post füllen und einen Weg aufzeigen, wie man die Messung von Ausstiegspunkten in einem Formular auch mit Google Analytics einfach messen kann.
Die Basis für die Messung von Form Abandonments stellen die Event-Messung dar, wie sie an dieser Stelle bereits einige Male beschrieben wurde. Beginnt ein Besucher mit dem Ausfüllen eines Formulars und navigiert nachher zu einer anderen Seite, ohne dass er das Formular abgesendet hat, wird ein Event ausgelöst. Dieser Event prüft, auf welchem Feld der Cursor des Besuchers stand, bevor er das Ausfüllen abgebrochen hat. Füllt also ein potenzieller Käufer mehrere Felder eines Bestellformulars aus, hört dann aber beim Feld „Geburtsdatum“ plötzlich auf (z.B. weil er sein Alter nicht angeben mag), dann wird diese Cursorposition beim Verlassen der Seite an Google Analytics gesendet.
Damit dies so funktioniert, ist eine kleine Erweiterung von Google Anlaytics notwendig. Und zwar muss auf jeder Formularseite (auch auf jeder Seite möglich) neben Google Anlaytics folgender JavaScript-Code eingebaut werden:
Im <head>-Bereich der Seite:<script>
window.focussedFormElement = null;
window.focussedForm = null;
function checkFormAbandonment()
{
if (window.focussedFormElement) // Formular begonnen
{
if (window.focussedFormElement.type!="submit" && window.focussedFormElement.type!="button") //abgebrochen
{ pageTracker._trackEvent('Formularfelder', window.focussedForm.name, window.focussedFormElement.name);
pageTracker._trackEvent('Formularversand', window.focussedForm.name, 'abgebrochen', 0);}
else // abgesendet
{pageTracker._trackEvent('Formularversand', window.focussedForm.name, 'gesendet', 1);}}
}
window.onload = function() {
var n = function() {window.focussedFormElement = this.form.focussedElement = this; window.focussedForm = this.form.focussedForm = this.form;},
p = function() {window.focussedFormElement = this.form.focussedElement = null; window.focussedForm = this.form.focussedForm = null;};
for(var i = 0, f = document.forms; i < f.length; ++i)
{f[i].focussedElement = null;
for(var j = 0, e = f[i].elements; j < e.length; ++j)
{e[j].onfocus = n;
e[j].onblur = p;}}};
</script>
Der <body>-Tag muss wie folgt um einen auslösenden Event ergänzt werden:
<body onunload="checkFormAbandonment()">Diese paar Zeilen Code reiche, damit automatisch der Name des Formulars sowie der Name des Ausstiegfeldes an Google Analytics gesendet werden. Die Auswertung en ermöglichen anschliessend folgende Darstellungen (zu Finden unter Content -> Ereignis Tracking):
In ersten Beispiel wurde zum Beispiel sieben Mal beim Feld „Geburtsdatum“ abgebrochen, je einmal bei „Ort“ und „Postleitzahl“. Verschiedene Formulare (z.B. Bewerbungsformular, Kontaktformular etc.) werden automatisch separat ausgewiesen wie untenstehende Abbildung zeigt:
Ein schöner Nebeneffekt, den man sich gleich noch zu Nutze machen kann, ist die Messung der Absenderate sämtlicher (oder bestimmter) Formulare auf der Website. Die folgende Darstellung zeigt nämlich das Verhältnis von angefangenen zu abgesendeten Formularen. Die Newsletter-Anmeldung wurde demnach in 77% der Fälle abgesendet, das Bewerbungsformular sendeten dagegen lediglich 56% der Besucher ab, welche mit dem Ausfüllen begonnen hatten.
Diese Kennzahlen sind wahrlich Juwelen, wenn man sich an die Usability-Verbesserung von wichtigen Website-Prozessen macht. Schade, dass sie Google Analytics nicht im Standard integriert – aber immerhin sei hiermit nun ein Workaround gefunden. Mehr solcher Tipps&Tricks zu Google Analytics finden sich übrigens in der kürzlich erschienenen Neuauflage meines Buchs „Web Analytics – Metriken auswerten, Besucherverhalten verstehen, Website optimieren“. Ein neues Kapitel mit über 100 Seiten beschreibt darin die Einführung und Nutzung von Google Analytics und zeigt einige selbst herausgefundene und undokumentierte Tricks für Power User.
Vielen Dank für dieses erhellende Posting! Im Event-Tracking liegt die Zukunft.
Eine Frage noch: Wie gelange ich an die Durchschnittswerte für das Verhältnis von angefangenen zu abgesendeten Formularen und was genau sagt er aus?
Geschrieben von: Lukas O. | 22. März 10 um 11:20 Uhr
@Lukas: Die Werte für abgesendete/angefangene Formulare werden ebenfalls mittels obigem JavaScript übermittelt. Dem Tracking-Event wird der Wert 1 mitgegeben, wenn das Formular erfolgreich abgesendet wird, bzw. der Wert 0 bei einem abgebrochenen Formular. Google Analytics errechnet anschliessend automatisch daraus Durchschnittswerte zu solchen Events (in der letzten Abbildung im Post dargestellt) - und dieser Durschnittswert ist dann nichts anderes als die Kennzahl "Completition Rate" eines Formulars (abgeschlossene Formulare / angefangene Formulare). Eine hohe Completition Rate > 85% ist gut sagt aus, dass viele Besucher ein angefangenes Formular auch absenden. Eine tiefe Completition Rate lässt dagegen auf Probleme bei einem bestimmten Formularfeld schliessen und verlangt nach einer Detailanalyse (z.B. anschauen, bei welchem Feld genau abgebrochen wurde)
Geschrieben von: Marco Hassler | 22. März 10 um 12:21 Uhr
Hallo Marco Hassler,
Finde es beeindruckend, wie Sie das mit Google Analytics lösen - von Ihnen kann man sehr viel lernen.
Danke für diesen und auch vorherige Beiträge.
Geschrieben von: Mario Casarano | 22. März 10 um 19:23 Uhr
Hallo und vielen Dank für den Beitrag.
Wo bzw. wie unterscheidet Anayltics die unterschiedlichen Formulare?
Muss ich das hinterlegen oder greift Analytics auf den Formularcode zurück?
Vielen Dank für die Info!
Gruss
Daniel
Geschrieben von: Daniel | 07. April 10 um 13:45 Uhr
Hallo Marco Hassler
Ich finde die Idee sehr interessant und habe sie (da das Javascript so direkt nicht lief) für Mootools neu geschrieben: http://mootools.net/shell/us56p/2/
Zu bemerken ist vielleicht noch, dass man sich klar werden muss, was in Google Analytics genau als Bounce gezählt werden soll. Wenn nämlich eine Interaktion mit einem Formularfeld geschieht, wird über _trackEvent auch ein (zweites) _trackPageview ausgelöst.
Danke für Ihren Beitrag -
Gruss
Josua
Geschrieben von: Schmijos | 12. April 10 um 10:23 Uhr
@Daniel: Das obige Script uebermittelt automatisch der HTML-Name des betreffenden Formulars an Google Analytics. D.h. einfach schauen, dass das Formular (im HTML-Code) einen sprechenden Namen hat, dann erscheint dieser in den GA-Auswertungen.
@Josua: Vielen Dank fuer deine Ergaenzungen!
Geschrieben von: Marco Hassler | 13. April 10 um 17:02 Uhr
Hallo Herr Hassler,
noch mal eine Frage: Wir probieren ihr Skript grad mit einem Testformular aus.
Dabei fällt mir auf, dass man nun die beiden Kategorien "Formularfelder" und "Formularversand" hat, unter denen dann als Aktionen die Formularnamen stehen. Ich finde es andersherum eigentlich logischer, denn dann kann man für jedes Formular isoliert die Felder betrachten, in denen abgebrochen wurde.
Besonders wichtig ist das, weil man dann nicht das Problem hat, dass in manchen Formularen bestimmte Felder evt. gleich lauten und man nicht mehr weiß, ob sich der Abbruch in Feld "Nachname" nun auf Formular x oder y bezieht.
btw: Dieses Kommentarfeld ist sehr schmal und klein. :)
Lukas
Geschrieben von: Lukas O. | 09. Juni 10 um 19:25 Uhr
hallo,
ich habe mir den neuen Asynchronous Code von Analytics eingebaut. Der unterscheidet sich ja vom alten Code. Würde Ihr Script da auch funtionieren?
Geschrieben von: drazen | 15. Juli 10 um 17:27 Uhr
@drazen: Der obige Code tut nur mit dem herkömmlichen synchronen Code. Für das asynchrone Tracking müsste im Skript die Aufrufe "pageTracker._trackEvent('...', '...', '...');" mit "_gaq.push(['_trackEvent', '...', '...', '...']);" angepasst werden.
Geschrieben von: Marco Hassler / Web Analytics nutzen | 15. Juli 10 um 18:32 Uhr
Hallo Marco,
danke für den Tip am 15. Juli gehe ich richtig der Annahme dass der Codepart nun so aussehen muss?
function checkFormAbandonment()
{
if (window.focussedFormElement) // Formular begonnen
{
if (window.focussedFormElement.type!="submit" && window.focussedFormElement.type!="button") //abgebrochen
{ _gaq.push(['_trackEvent','Formularfelder', window.focussedForm.name, window.focussedFormElement.name]);
_gaq.push(['_trackEvent','Formularversand', window.focussedForm.name, 'abgebrochen', 0]);}
else // abgesendet
{_gaq.push(['_trackEvent','Formularversand', window.focussedForm.name, 'gesendet', 1]);}
Geschrieben von: Alex | 19. Juli 10 um 22:46 Uhr
@Alex: Genau, bzw. ich habs nicht getestet, aber ich hätts jetzt mal genau so versucht.
Eine gute Dokumentation für das Event-Tracking gibts übrigens hier: http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html
Geschrieben von: Marco Hassler / Web Analytics nutzen | 20. Juli 10 um 19:43 Uhr
hallo Marco,
ich habe den Code jetzt geändert. Leider trackt er nicht.
window.focussedFormElement = null;
window.focussedForm = null;
function checkFormAbandonment()
{
if (window.focussedFormElement) // Formular begonnen
{
if (window.focussedFormElement.type!="submit" && window.focussedFormElement.type!="button") //abgebrochen
{ _gaq.push(['_trackEvent','Formularfelder', window.focussedForm.name, window.focussedFormElement.name]);
_gaq.push(['_trackEvent','Formularversand', window.focussedForm.name, 'abgebrochen', 0]);}
else // abgesendet
{_gaq.push(['_trackEvent','Formularversand', window.focussedForm.name, 'gesendet', 1]);}}
}
window.onload = function() {
var n = function() {window.focussedFormElement = this.form.focussedElement = this; window.focussedForm = this.form.focussedForm = this.form;},
p = function() {window.focussedFormElement = this.form.focussedElement = null; window.focussedForm = this.form.focussedForm = null;};
for(var i = 0, f = document.forms; i
Geschrieben von: drazen | 22. Juli 10 um 13:20 Uhr
Hallo,
habe den Code eingebaut aber leider wird nichts getrackt.
Muss der eigentliche Google Analytics auch in den Header oder kann er im Footer stehen bleiben?
Wenn er auch in den Header muss: über oder unter Ihr Script?
Ich würde mich über eine Rückmeldung sehr freuen!
Beste Grüße,
Oliver
Geschrieben von: Oliver | 21. März 11 um 12:59 Uhr
Hallo Oliver,
Hast du eine Beispielseite, wo man den eingebauten Code sieht?
Der GA-Code kann am Ende der Seite bleiben, das spielt im Normalfall keine Rolle (im Optimalfall würde der GA-Code allerdings vor dem Formular-Tracking-Code stehen)
Zum Formular-Tracking-Code selber noch folgende Anmerkungen: Im Post selbst (mit etwas älterem Datum) wird noch der synchrone Tracking Code von GA verwendet. Heute ist der synchrone Tracking-Code standard, der aber nicht mehr mit dem Script im Post kompatibel ist...). Ein Versuch für die Umschreibung für den asynchronen Code hat Drazen im Comment oben gemacht.
Geschrieben von: Marco Hassler | 25. März 11 um 11:14 Uhr
Hallo Oliver,
danke für das tolle Script. Leider trackt es bei meiner Wordpress Installation nicht. Das Beispiel findest Du unter http://axel-schroeder.de/kontakt-zur-unternehmensberatung/
Kannst Du Dir bitte mal ansehen, was falsch läuft bzw. Dein Posting um den ansynchronen Code zwischen script und /script ergänzen? Der Schipsel von drazen ist doch nicht vollständig, oder?
Danke!
Geschrieben von: Axel Schröder | 16. Juni 11 um 08:37 Uhr
Hallo Axel,
Mein Formular-Script tut aktuell nur mit der alten synchronen Tracking Code von Google Analytics, nicht mit deinem asynchronen.
Ich werds auf den neuen Code bei Gelegenheit anpassen, bislang müsstest du noch den alten Tracking Code verwenden, falls du das Skript nutzen möchtest
Marco
Geschrieben von: Marco Hassler | 16. Juni 11 um 11:00 Uhr
Hallo Marco,
funktioniert der Code mittlerweile mit dem neuen Tracking-Code? Oder hast du evtl. einen Link zu einem Code, der mit dem neuen Tracking Code funktioniert?
Danke,
Jan
Geschrieben von: Jan | 05. Oktober 11 um 23:36 Uhr
Die Verwendung des Codes für den Asynchronen Tracking Code wird in der 3. Auflage meines Buchs (Ab Dez. 2011) beschrieben sein. Hier schon mal den nackten Code vorneweg:
//im -Bereich folgendes Skript unterbringen:
window.focussedFormElement = null;
window.focussedForm = null;
function checkFormAbandonment()
{
if (window.focussedFormElement) // Formular begonnen
{
if (window.focussedFormElement.type!="submit" && window.focussedFormElement.type!="button") //abgebrochen
{ _gaq.push(['_trackEvent', 'Formularfelder', window.focussedForm.name, window.focussedFormElement.name]);
_gaq.push(['_trackEvent', 'Formularversand', window.focussedForm.name, 'abgebrochen', 0]);}
else // abgesendet
{_gaq.push(['_trackEvent', 'Formularversand', window.focussedForm.name, 'gesendet', 1]);}
}
}
window.onload = function() {
document.getElementsByTagName('body')[0].setAttribute('onunload', 'checkFormAbandonment()');
var n = function() {window.focussedFormElement = this.form.focussedElement = this; window.focussedForm = this.form.focussedForm = this.form;},
p = function() {window.focussedFormElement = this.form.focussedElement = null; window.focussedForm = this.form.focussedForm = null;};
for(var i = 0, f = document.forms; i < f.length; ++i)
{f[i].focussedElement = null;
for(var j = 0, e = f[i].elements; j < e.length; ++j){
e[j].onfocus = n;
e[j].onblur = p;
}
}
};
Geschrieben von: Marco Hassler | 10. Oktober 11 um 09:16 Uhr
Super, vielen Dank :)
Geschrieben von: Jan | 10. Oktober 11 um 20:36 Uhr
Hallo Marco,
ich habe den obigen Code eingebaut, jedoch ohne zählbaren Erfolg.
Gibt es an diesem Code noch spezielle Anpassungen, die man vornehmen muss?
Gruß
Stefan
Geschrieben von: Stefan | 26. Oktober 11 um 07:50 Uhr
Hallo Stefan,
Eigentlich ist keine Anpassung notwendig, nein. Du hast den Code im Head-Bereich untergebracht und du verwendest den asynchronen Tracking-Code? (ggf. kurz URL zur Seite mit dem eingebauten Code mailen, dann schau ich mir das mal an)
Geschrieben von: Marco Hassler | 26. Oktober 11 um 18:21 Uhr
Man sollte einfach kein feld mit den namen "name" definieren, dann klappt es auch mit dem tracking :)
Geschrieben von: Stefan | 31. Oktober 11 um 10:21 Uhr