Onclick event handler in A HREF’s?

De collega’s van marketing willen bij sommige URL’s onclick event handlers laten toevoegen die elke klik loggen bij een web analytics aanbieder. De Onclick-javascript functie haalt wat gegevens op en voegt die toe aan een request voor een -onzichtbare- image.

Mijn eerste gedacht; niet doen, de onclick wordt eerst uitgevoerd en als de request voor die image te lang duurt (op basis van onze ervaring gingen we uit van ongeveer 0,6 seconden) moet de gebruiker ook extra lang wachten op de pagina die hij/zij opvroeg (want eerst onclick en dan pas request voor de feitelijke pagina in de href). Ik leek hier ook bevestiging voor te vinden op quirksmode dus niet doen?

Dit weekend begon ik me echter af te vragen of dit wel kon kloppen; alle wordpress-blogs bijvoorbeeld, houden klikgedrag op ongeveer die manier (wel niet de traditionele onclick, maar met echte events) bij. En die web analytics aanbieder, zouden die zoiets in productie zetten als dat een probleem zou zijn? Een testje dan maar, met volgende code:

<html>
<head>
<script>
function exec_me() {
//bust cache
rnd=Math.floor(Math.random()*1000000);
url=’http://florentsmet.be/distel.jpg?n=’ + rnd;
//wait a few seconds and then fetch image
setTimeout(“loadimg(url)”,192);
}
function loadimg(url) {
//declare image
var i=new Image(1,1);
//load image
i.src=url;
}
</script>
</head>
<body>
<a href=”http://www.google.com/” onClick=”exec_me();”>gogoogle</a>
</body>
</html>

Ik ga dan in de logs van florentsmet.be (site van mijn vrouwken over haar overleden grootvader die kunstschilder was) kijken en zie dat die image in FF perfect geladen wordt als die timeout op een laag cijfer staat (onder de 190 milliseconden) en nooit als die boven die 195 ms. In MSIE lijkt 215 zo een beetje het punt tot waar dat werkt.

Is dat nu een race-condition? En hangt die dan af met welke browser je werkt? Heeft iemand hier ervaring mee, of een paar goeie links waarin dit beschreven wordt? En vooral, op basis van deze tests zou ik besluiten dat die onclick-logging van geklikte links geen probleem is. Iedereen akkoord daarmee dan?

3 thoughts on “Onclick event handler in A HREF’s?

  1. pcoucke

    Ik denk dat het probleem vooral is dat de onclick en het volgen van de link tegelijkertijd gebeurt. Ik heb hier ooit ook al eens mee ge-experimenteerd en kwam tot iets als het volgende (de code hieronder is uit het hoofd, dus waarschijnlijk niet helemaal correct). Het principe is dat je de href van de link leeg maakt en de waarde in een variabele bijhoudt. De onclick roept dan de image op en volgt de link.

    // toevoegen van de code aan de links, dit haalt
    // alle <a> tags op in het document
    body.onload = function() {
    var links = document.getElementsbyTagName('a');
    for (var i = 0; i < links.length(); i++) {
    links[i].url = links[i].href;
    links[i].href = "javascript:;";
    links[i].onclick = followlink;
    }
    }


    function followlink() {
    var image = new Image();
    image.src = ...
    // Ik ben niet zeker of er hier een timeout moet komen
    document.location.href = this.url;
    return true;
    }

    PS 1: Ik heb behoorlijk wat miserie gehad om deze code in dit comment te krijgen zonder dat wordpress moeilijk deed…
    PS 2: Weet iemand hoe je makkelijk kan inloggen op deze blog, nu ga ik steeds via de wordpress homepage
    PS 3: Frank, is er een mogelijkheid om de auteur te tonen bij een post?

    Reply
  2. futtta

    interssante methode, je bent in principe zeker dat je onclick methode uitgevoerd wordt en dat je dan proper naar je target url gaat. anderzijds blijft de mogelijke vertraging van de uitvoering van onclick voordat de eigenlijke URL geladen wordt, een issue?

    net een testje gedaan waarbij ik de vertraging niet meer in javascript heb (die settimeout), maar aan serverkant (een klein wrapper-php-script dat x seconden wacht en dan de image doorstuurt). in FF en MSIE op winXP werkt dit perfect, zelfs met grote wachttijd; je krijgt direct de target-pagina en seconden daarna (zonder dat je daar in de browser iets van merkt) wordt de request proper gelogged aan serverkant.

    ik denk al bij al dus dat gebruik van die onclick-link-click-logging weinig tot geen problemen met zich meebrengt.

    ivm PS2; als je naar http://webwerkers.wordpress.com/wp-admin/index.php gaat, daar inlog met vinkje ‘onthou login’ (of hoe noemen ze dat), zou dat in orde moeten zijn?

    ivm PS3; het theme kan geen auteursnamen displayen. zal straks eens een ander jasje voor de webwerkers zoeken :)

    Reply
  3. futtta

    ok, laat ons dit theme anders even gebruiken; auteur wordt vermeld en ziet er ok uit in FF en MSIE.

    wie zich geroepen voelt, mag me een -toepasselijk- image bezorgen om hierboven te gebruiken (741 x 142 pixels, geen tekst want die voegt wordpress toe).

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *