« Web Analytics 2009 – in Deutschland, Österreich und der Schweiz | Start | Einführung und Tipps & Tricks für Google Analytics »

21. März 10

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

Abandonment_0
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.

Formularfeld-Abbruchmessung (Form Abandonment) mit Google Anlaytics

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):

Abandonment_1

Abandonment_1-2
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:

Abandonment_2 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.

Abandonment_3
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. 

TrackBack

TrackBack-Adresse für diesen Eintrag:
http://www.typepad.com/services/trackback/6a00e55058222388330120a95f9f53970b

Listed below are links to weblogs that reference Formularabbrüche und Ausstiegsfelder messen - auch mit Google Analytics:

Kommentare

Feed You can follow this conversation by subscribing to the comment feed for this post.

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?

@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)

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.

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

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

@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!

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

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?

@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.

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]);}

@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

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

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

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.

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!

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

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

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;
}
}
};

Super, vielen Dank :)

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

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)

Man sollte einfach kein feld mit den namen "name" definieren, dann klappt es auch mit dem tracking :)

Ich werde den asynchronen Code so wie er hier in den Kommentaren ist, für das Formular Tracking verwenden.
Der Post ist schon ziemlich alt. Hat sich in der Zwischenzeit einiges verändert?
Danke für die Hilfe.

Der Code im Kommentar vom 10.10.11 ist der selbe, der nun auch in der 3. Buchauflage drin ist (und dort noch etwas umschrieben wird). Mit sind keine Änderungen oder Probleme bekannt, nein.

Hallo,

ich würde gern den Code für den asynchronen Modus verwenden, habe diesen auch entsprechend eingebaut, jedoch wird nichts getrackt. Ein Feld namens "Name" gibt es auch nicht. Die URL ist www.ra-knauf.de/kontakt-formular.php. Irgend eine Idee?

Post a comment.

If you have a TypeKey or TypePad account, please anmelden.


Über das Blog | Impressum | Nutzungsbedingungen | Ihren Besuch aufzeichnen [?]


Web Analyticson


Das Buch zum Blog:

  • Buch
    Details zum Buch Buch bei Amazon.de bestellen

Die App zum Blog:

  • iPhone App
    Download

Über den Autor

  • Marco Hassler ist Business Unit Manager und Partner beim IT- und Web-Dienstleister Namics.

    marco.hassler (at) gmail.com

Ethik Code

  • Web Analytics Association Code of Ethics

Twitter Updates

    Web Analytics Fotos

    Web Analytics Association

    • Web Analytics Association