טריק: לקשר לאתר חיצוני דרך קאונטר, מבלי להפריע לסטטוס-בר

לפעמים אנחנו רוצים לספור כמה קליקים הגולשים לחצו על לינק מסויים באתר, בין אם זה לינק לעמוד פנימי ובעיקר כשזה לינק לאתר חיצוני. השיטה הנפוצה היא יצירת עמוד מגשר שיקלוט את ה-ID של הלינק ויעדכן את הקאונטר בבסיס נתונים.

הבעיה בשיטה הזו היא שאם הגולש עובר עם העכבר על הלינק – הוא יראה בסטטוס-בר את הקישור הפנימי של עמוד הקאונטר, במקום את הלינק האמיתי אליו הוא יועבר.

אמנם לא יוצא לי להיתעסק עם זה ע”ב יומי, אבל עד היום כשהייתי צריך להיתמודד עם כזה מקרה הייתי מחפש איך משטלתים על הסטטוס-בר של הגולש ומציגים לו לינק מזוייף, כלומר את הלינק האמיתי אליו הוא יועבר בסופו של דבר ולא את הלינק לעמוד המגשר שמבצע את הספירה.

השבוע כשעלה לי צורך כזה הבריק לי רעיון קצת יותר יצירתי: ב-href של הלינק אני שם את הקישור הרגיל אליו בסופו של דבר הלינק יקשר, ומצמיד לתג A אירוע mousedown שישנה את הקישור – שניה לפני שהגולש משחרר את האצבע מהעכבר ומועבר פיזית ללינק.

<a href="http://ynet.co.il" onmousedown="this.href='http://google.com';">Click Here</a>

יוצא שבסטטוס בר יוצג הלינק הסופי, אבל בפועל הגולש יגיע אליו רק דרך העמוד המגשר שלי.

חשוב לזכור להצמיד ללינק גם אירוע mouseout שיחזיר את הלינק לקדמותו, אחרת במידה והלינק נפתח בעמוד חדש – במעבר עכבר הבא הגולש כבר יראה את הקישור אליו שינינו.

הצמדת האירוע לכל הלינקים יחד

ע”מ לשמור את הקוד נקי מאירועי inline, קיימת אפשרות לבצע את הצמדת האירועים הללו באופן מרכזי באמצעות לולאה בתחתית העמוד. אתן דוגמא באמצעות jQuery, כשלצורך הדוגמא והניקיון אני אשתמש במאפייני data ע”מ לתאם בכל לינק מה הלינק האמיתי שלו ומה הלינק לקאונטר:

<a class="ext" href="http://ynet.co.il"
	data-counter-href="LinkCounter?id=13"
	data-real-href="http://ynet.co.il">Click Here</a>
 
<a class="ext" href="http://google.com"
	data-counter-href="LinkCounter?id=43"
	data-real-href="http://google.com">Click Here</a>
 
<a class="ext" href="http://walla.co.il"
	data-counter-href="LinkCounter?id=18"
	data-real-href="http://walla.co.il">Click Here</a>
 
<script type="text/javascript">
	$(".ext").mousedown(function(){
		$(this).attr("href",$(this).attr("data-counter-href"));
	}).mouseout(function(){
		$(this).attr("href",$(this).attr("data-real-href"));
	});
</script>