Onclick event handler in A HREF’s? 11 juni 2007
Posted by Frank Goossens (futtta) in javascript, vraagje, Web development.trackback
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.
This post has been moved to: http://blog.futtta.be/2007/06/11/onclick-event-handler-in-a-hrefs/
webwerkers groepsblog 
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?
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 https://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 :)
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).
Volgens de principes van toegankelijk ontwerp en unobtrusive javascripting wel opletten dat de link nog werkt met javascript disabled, hé.