Dec 05 2008

HelpSemaforoQuesto semaforo indica il livello difficoltà del post
semaforo verde - articolo per tutti semaforo giallo - articolo avanzato semaforo rosso - articolo per esperti

Validare le form tramite Google Analytics

autore: categoria: javascript

Una form è pur sempre una form, e molti utenti non amano questa forma di interazione che invece spesso è fondamentale per entrare in possesso di informazioni più o meno vitali per la vita del proprio sito web. Ci sono centinaia di pagine e scritti sull’usabilità delle form e sulle best-practice per invogliare l’utente a compilarle, o per non distruggere la sua esperienza sul nostro sito.

Uno dei passi principali del processo di ottimizzazione dei moduli è quello che porta all’eliminazione dei campi “inutili”, dove per inutili si includono anche i campi non obbligatori che gli utenti non compilano. Se l’informazione richiesta ci serve, converrà rendere la compilazione del campo obbligatoria, altrimenti dovremo arrenderci all’evidenza che la form non funziona. Ma come possiamo rendercene conto? con uno strumento di web analytics, ad esempio. In questo caso un post su e-nor.com ci illustra come piegare Google Analytics a questa esigenza, come asservirlo alle esigenze di progettisti e di coloro che hanno a cuore la user experience degli utenti.

il primo passo è quello di aggiungere una un evento onClick ogni volta che la form viene inviata
<input type="submit" name="Submit" value="Submit" onClick="return validate(this.form);"/>

il contenuto della funzione validate() è invece il seguente


function validate() 
{ 
isEntered(document.getElementById('name'),'name');
isEntered(document.getElementById('email'),'email');
isEntered(document.getElementById('phone'),'phone');
isEntered(document.getElementById('company'),'company');
isEntered(document.getElementById('comments'),'comments');

frm.action='/thankyou.aspx?src=contact_us.htm'; 
} 

function isEntered(el, field_name)
{ 
     if((el.value=="") || (el.value==null))
     {
     pageTracker._trackPageview('/contact_us.htm/empty/'+field_name); 
     }

     else
     {
     return false;
     }
}

ovviamente serve una riga per ogni campo della vostra form, e gli id devono corrispondere. Non è molto differente dalle molte funzioni di validazione delle form che si trovano in giro per il web, ma questa ha la particolarità di aggiungere una chiamata a _trackPageview() ogni volta che uno dei campi risulta vuoto al momento dell’invio. La scelta in questo caso è di creare una pagina /contact_us.htm/empy/nome-del-campo.

Per leggere i dati l’articolo consiglia anche di creare un profilo-copia e di mettere un filtro di inclusione solo per i dati provenienti dalle form inviate, in modo da non perdere troppo tempo a cercare i risultati nei report. Il filtro sarebbe fatto così:

Nome: URL Filter – Contact Us Form
Tipo: filtro personalizzato, di inclusione
Campo filtro: URI della richiesta
Pattern filtro: contact_us\.htm
Maiuscole Minuscole: No

il report CONTENUTI PRINCIPALI di un profilo con questo filtro applicato conterrebbe solo URL riferiti alla pagina di contatto, con le evidenze del numero di volte in cui ogni campo è stato inviato vuoto, permettendoci di trarre le dovute conseguenze sul proseguo della vita della nostra form.

Come nota personale aggiungo che la soluzione mi piace, ma non mi fa impazzire. Ne ho in testa una versione evoluta, che permetterebbe anche di conoscere quante volte le persone cliccano su ogni campo per compilarlo o quanto tempo viene impiegato per la compilazione della form e del singolo campo. E’ uno dei tanti progetti che prima o poi riuscirò a realizzare.

Condividi l'articolo:

4 Commenti

  1. Semplicemente Geniale.. Complimenti!

  2. vorrei inserire nel mio sito questo tuo form di contatto,
    io uso i form docs di google rimodificati per contenere lo spazio, ma una volta inviati Google mi riaggiorna il sito con il suo form, mi puoi dare qualche indicazione

  3. non conosco a fondo i form di google docs, ma non credo che ti diano la possibilità di manipolare il codice html, per cui temo non si possa fare…

  4. Grazie per la veloce risposta

Scrivi un Commento