Click tracking with AJAX, Javascript – external/outbound links
Sometimes you want to log when the user clicks an outbound link, just like Google does. Here’s a solution to do this. It adds onclick events to outbound links marked rel=”external” and makes a log request when users click the link.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Tracking clicks on outbound links</title>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript">
/*
Change to suitable way of finding all external links.
$$ can be timeconsuming.
*/
function AddLogFunctionality() {
var links = $$(‘a[rel=external]‘),
referer = document.location;
for (var i = 0, l = links.length; i < l; i++) {
var link = links[i];
link.addEvent(‘click’, function(e) {
e.stop();
TrackClick(this, e, referer);
});
}
}/*
This should point to your log page where you handle the information.
The log page should return an empty HTML page (HTTP status = 200).
*/
var _logUrl = "/Log.aspx?",
_timestampParam = "×tamp=",
_urlParam = "&url=",
_refererParam = "&referer=";function TrackClick(link, event, referer) {
var linkurl = link.href;
/*
Here’s where Mootools comes in handy, making the AJAX request.
onSuccess triggers when response (HTTP status = 200) is received.
*/
var htmlRequest = new Request.HTML({
url: _logUrl + _urlParam + linkurl + _refererParam + referer + _timestampParam + (new Date()).getTime(),
onSuccess: function() {
window.location = linkurl;
}
}).get(); } </script>
</head>
<body onload="AddLogFunctionality()">
Here’s an outbound link: <a href="http://www.netlight.se" rel="external">Netlight Consulting AB</a>
</body>
</html>
I used Mootools, but you can also use jQuery just as well.
I tried this approach first:
<a href="somepage.htm" onclick="(new Image()).src = ‘log.aspx?url=somepage.htm×tamp=’ + (new Date()).getTime()">Some page</a>
But this doesn’t work because the request to the log page is cut short when the request to somepage.htm starts and the server never receives any log request.
Google has a whole API for tracking that provides data through Google Analytics, if you use that. I haven’t tried this yet, but to use it for tracking clicks on outbound links seems pretty easy.
Excuse the bad format of the code above. WordPress and I are not the best of friends… yet. Also, let me know if you feel this post is wrong in any way or you have something useful to add.
EDIT:
There’s a bug in Mootools that appears if you do window.open() in onSuccess event on Request.HTML in Google Chrome. You will get a “ghost” frame in Chrome that you can’t see. I discovered it because the page I opened with window.open had a video clip on it that played some music.
1 Comment »
Leave a Reply
-
Recent
- Canonical urls
- Dynamic dates in Selenium IDE
- Microsoft Coded UI vs Selenium
- Identifying controls and values in Selenium IDE
- Firefox localhost slow debug fix
- Selenium RC and .NET C#, how to get started
- How to commit website suicide from an SEO point of view
- IIS log in ASP.NET Development Server
- Click tracking with AJAX, Javascript – external/outbound links
- SEO – keywords placement
- Remote access to Visual Studio Development Server
- SEO – duplicate content
-
Links
-
Archives
- October 2011 (1)
- February 2011 (1)
- December 2010 (1)
- August 2010 (1)
- July 2010 (3)
- April 2010 (2)
- March 2010 (8)
- January 2010 (1)
- May 2009 (1)
- April 2009 (1)
- March 2009 (3)
-
Categories
-
RSS
Entries RSS
Comments RSS
[...] log in ASP.NET Development Server In my earlier post Click tracking with AJAX, Javascript – external/outbound links I explained how to make a log request to the web server when clicking a link. I use Visual Studio [...]