Ausstiegfelder oder Formularabbruch messen in Google Analytics

Lange musste ich suchen bis ich endlich eine gute Lösung gefunden habe ausgefüllte/abgebrochene Formularfelder in Google Analytics auszulesen.

Hierbei bin ich auf die Webseite http://www.distilled.co.uk gestoßen mit dem Artikel “Using Jquery and Google Analytics events to track form abandonment.”

Davor habe ich folgenden Code versucht nur leider hat Google den Analytics Code geändert und schon hat der Code nicht mehr funktioniert. http://www.web-analytics-nutzen.de/web_analytics/2010/03/formularabbr%C3%BCche-und-ausstiegsfelder-messen—auch-mit-google-analytics.html

Auf Distilled wird erklärt wie mithilfe von JQuery Bewegungen in Formularfeldern gemessen und als Event an Google Analytics übermittelt werden könne.

Das Problem bei mir war, dass es auf keiner meiner Webseiten funktioniert hat. Einmal habe ich es zum laufen gebracht, nur habe ich da JQuery abgeschossen. Also habe ich gesucht warum es nur dann funktioniert und bin dank eines Freundes(@jkamlowski) darauf gekommen.

Hier nun das Tutorial von Distilled mit der Quellcodeänderung von mir damit es auch wirklich bei allen funktioniert.

Schritt 1:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

Fügt nun hier eure UA-ID von Google Analytics ein und ersetzt den  Standard Code den Ihr aus den Einstellungen von Google Analytics habt.

Schritt 2:

Bindet euch nun die aktuelle JQuery Libary ein. Am einfachsten die von Google verwenden.

<script type="text/javascript"> src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
</script>

Schritt 3: Den Quellcode von http://www.distilled.co.uk mit einer kleinen Ergänzung von mir:

Ladet euch noch folgende Datei herunter und speichert diese in euer htdocs Verzeichnis.

https://github.com/allmarkedup/jQuery-URL-Parser/blob/master/jquery.url.js

Fügt nun folgenden Code in die gewünschte Seite ein.

 <script type="text/javascript" src="/jquery.url.js"></script> <script type="text/javascript"> jQuery.noConflict(); (function($) { $(document).ready(function() { var currentPage = jQuery.url.attr("path"); $(':input').blur(function () { if($(this).val().length > 0){ pageTracker._trackEvent("Form: " + currentPage, "input_exit", $(this).attr('name')); } }); }); })(jQuery); </script>

Was habe ich nun anders gemacht? Die Fett Markierten 2 Zeilen hinzugefügt ob ihr es glaubt oder nicht die 2 Zeilen haben mir viele Stunden Kopfzerbrechen bereitet.

Viele werden bei WordPress/Joomla das gleiche Problem haben wie ich. Ihr habt jquery & z.B. mootools lightbox etc. eingebunden. Nur weiß euer Quellcode nicht immer welche Libary er nun nehmen soll.

Mit den 2 Zeilen Code sagt Ihr der Funktion er soll JQuery nehmen und schon gehts.

Ihr seht jetzt welche Felder von den Nutzern ausgefüllt werden. So könnt ihr besser verstehen warum der Nutzer eigentlich geht. Denn wenn er mit dem Cursor gerade auf Name geklickt hat und es kam gerade der Chef rein und er die Seite verläst sagen die Daten nicht viel aus.

Wenn Ihr aber erfasst dass der User immer 7 von 10 Felder ausfüllt könnt ihr prüfen warum die 3 anderen Felder nie ausgefüllt werden und diese löschen oder ansprechender gestalten.