El siguiente plugin esta destinado a ser usado en cualquier formulario. Necesita hacer uso de la librería jQuery y de la librería javascript de Google Analytics. Su función es empezar a capturar el tiempo cuando un usuario empieza a rellenar un formulario concreto de nuestra página y lanzar un evento de la Google Analytics Tracking Api con el tiempo total que se ha tardado en completarlo cuando el formulario se envía.
Para hacer más fácil el proceso usaremos el objeto TimeTracker, una ayuda para los eventos que nos brinda la Api de Google Analytics e integraremos su uso dentro de un plugin de jQuery. De esta forma este código va a ser replicable en cualquier web sin mucho esfuerzo.
Órden en el código
El orden en el cual cargar los elementos en nuestro HTML es importante. La librería jQuery y la iniciación del código de analytics pueden ir en cualquier lugar pero la carga del script del plugin debe ir siempre después de ambos scripts puesto que va a necesitar las funciones y objetos generados por ambas librerías. Mi consejo, sería cargar jQuery al principio del documento y al final de este colocar el código de analytics y justo tras el este plugin. La invocación al plugin se puede hacer en un $(document).ready() con lo que garantizamos que todas las librerías ya habrán sido cargadas.
<html>
<head>
<...>
<script type="text/javascript" src="/js/jquery.js"></script>
</head>
<body>
<...>
<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-12345678-9");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript" src="/js/trackWriteFormTime.jquery.js"></script>
</body>
</html>
El plugin
Al ser un plugin tan pequeño no lo he puesto en un archivo aparte sino que lo dejo en este mismo post para que pueda ser visto y modificado por cualquiera. Debería incluirse el código dentro de cualquier script que ya estemos usando o como un archivo aparte cargado con la etiqueta "script" en la página.
$.formTimeTracker = new TimeTracker();
$.formTimeTrackerStart = false;
(function($){
$.fn.trackWriteFormTime = function( googleAnalyticsObj ) {
if ( !this[0] ) this = document;
if ( this.is("form") ) form = this;
else form = this.find("form");
var inputs = form.find("input,select,textarea,button");
inputs.focus(function(){ if(!$.formTimeTrackerStart) $.formTimeTracker._recordStartTime(); });
inputs.click(function(){ if(!$.formTimeTrackerStart) $.formTimeTracker._recordStartTime(); });
inputs.keydown(function(){ if(!$.formTimeTrackerStart) $.formTimeTracker._recordStartTime(); });
form.submit(function(){
$.formTimeTracker._recordEndTime();
$.formTimeTracker._setHistogramBuckets([10000,20000,30000,60000,120000,180000,300000,600000,1200000,1800000,3000000]);
$.formTimeTracker._track(googleAnalyticsObj,"form write time");
});
};
})(jQuery);
Uso del plugin
Para usarlo solo tenemos que lanzar seleccionar con la función dolar ( $() ) cualquier formulario (o en su defecto cualquier elemento que en su interior contenga un formulario) y aplicarle el nuevo método que genera el plugin: "trackWriteFormTime()". Este método debe recibir como parámetro el objeto pagetracker que se genera en el código de analytics.
$(document).ready(function(){
$(form#mi-formulario).trackWriteFormTime( pagetracker );
});
hola, gracias por post, solo que tengo una duda, donde consigo el archivo:
trackWriteFormTime.jquery.js
Buenas alejandro,
El plugin no se descarga, tienes que copiarte el bloque de código que hay en la sección "el plugin" y guardarlo tu como un archivo en tu maquina. Para un código tan pequeño preferí no crear un archivo ya que por temas de velocidad de carga es mejor incluso copiar este código en tu JS de eventos o en el mismo en el que crees el $(document).ready()
Buenos días,
Muy interesante artículo, disculpa una pregunta: ¿existe alguna posibilidad de realizar esto en javascript "puro" sin usar JQuery?
Tengo que implementar unas restricciones en un sitio del trabajo pero no nos permiten usar plugins.
Gracias de antemano y saludos!!