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.

  <...>
  


  <...>
  
  
  

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