1 maart 2010

Door: Jan Ooms

Naar aanleiding van het weblog bericht op Webanalisten (Gratis PDF beschrijft 20 goedkope usability tools), waarin een aantal tools wordt beschreven die het bezoek van je website in kaart brengen, heb ik eens besloten om zelf te kijken hoe ingewikkeld het is om zo'n tracking applicatie te schrijven.

 

Een van de applicaties die wordt beschreven is ClickTale, waarin de muisbewegingen en clicks van de gebruiker worden bijgehouden en opgeslagen. De eigenaar van de website kan daarna per gebruiker precies terugzien welke handelingen deze gebruiker heeft uitgevoerd en dit exporteren naar een filmpje. Hoewel het voor een eigenaar / ontwikkelaar uiterst waardevolle informatie is, zet het je wel aan het denken. Hoeveel websites die ik heb bezocht, hebben die informatie opgeslagen?

 

Daarom werd besloten om zelf maar eens een simpele proof-of-concept te schrijven die in de basis hetzelfde moet kunnen als ClickTale.

 

De basis is als volgt. Er JavaScript klasse wordt geinitialiseerd:

 

var visitors = new RealTimeVisitors("save.php", 15);

 

Bij het initialiseren van deze klasse wordt de url naar een PHP-script opgegeven en een waarde na hoeveel gegevens alles moet worden verstuurd naar het PHP-script. Als de 2e waarde ‘1' wordt gegeven, kan een gebruiker real-time gevolgd worden maar is de belasting bij de gebruiker vrij groot. Daarom is een getal tussen de 10-50 een acceptabele waarde.

 

Deze klasse zorgt er automatisch voor dat er eventhandlers aan het document worden gekoppeld (onmousemove, onmousedown, onmouseup, onscroll) en in deze eventhandlers worden alle gegevens samengevoegd tot een samenhangend geheel en via AJAX doorgestuurd naar een PHP-script die alles opslaat in de database (en gegroepeerd per sessie).

 

De basis van het proof-of-concept is snel in elkaar gezet en ondersteunt alleen muisbewegingen en geen toetsaanslagen (iets wat ClickTale wel ondersteunt).

 

Nu alle gegevens al worden opgeslagen, is het zaak om de opgeslagen gegevens weer terug te halen. Ook dit gebeurt tijdelijk met een JavaScript applicatie, deze wordt gevoed doormiddel van een JSON string die door PHP wordt aangevoerd.

 

De JavaScript player laadt de URL van de website in in een IFrame en plaatst daarover een DIV met daarin een afbeelding van een cursor. Deze DIV wordt door JavaScript verplaatst volgens de gegevens uit de JSON data.

 

Uit de proof-of-concept blijkt dat het toch wel gemakkelijk is om die gegevens te versturen naar andere domeinen. Alleen in Internet Explorer krijg je een melding dat er potentieel privacy-gevoelige gegevens worden verstuurd (naast alle minpunten voor Internet Explorer dus eindelijk toch een pluspunt).

 

Het project staat inmiddels weer in de koelkast omdat er betere alternatieven zijn voor de proof-of-concept en het is geen corebusiness voor Softmedia Interactive. Mocht een klant echter ooit een wens hebben om zoiets te gaan gebruiken, kunnen we altijd kijken of we nog iets hebben aan de geschreven code.

 

Terug naar overzicht