blog.rebeccamurphey.com Adventures in front-end consulting

Track user clicks on certain links

By Rebecca | June 3, 2008

categories: analytics, howto, jquery, plugins

We recently added a new feature to dailystrength.org, and there was much debate about whether users would use it as we intended. To find out, I wrote a clicktrack ditty that sends some data to the server when a link is clicked. It was somewhat inspired by a post I wrote a while ago about tracking outbound links with Google Analytics and jQuery, but is actually even simpler. I've retooled my clicktrack script to work as a generic, 2.5k plugin, which you can download here.

Usage

To use this plugin, add a distinct classname to all links you would like to track. For example:

 
<a href="foo.html" class="clicktrack">this is a link</a>

You can also add additional classes to a link with a distinct prefix — the default prefix is "ct_". These classes will be passed to the server along with other clicktrack data:

 
<a href="foo.html" class="clicktrack ct_type_1">this is a link</a>

Then, include the script and a line of code to initialize it in the foot of your page. Note that you must at least pass a URL for the remote (server-side) script that will handle the clicktrack data ("foo.php" in the example below):

 
<script src="/includes/js/jquery.clicktrack.js">
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() { $("a.clicktrack").clicktrack("foo.php"); });
</script>

This will pass the following data to a script called "foo.php" on your server:

• source (string) the URL of the current page
• target (string) the HREF of the clicked link
• classes (array) classes on the link that matched the prefix (default prefix is "ct_")

Optional parameters

The only required parameter is the URL of the remote script. However, you can pass a more elaborate configuration object. The options and their defaults are as follows:

 
	var defaults = {
		remote_script: null,
		prefix: 'ct_',
		extraData: null,
		callback: function(){},
		dataType: null,
		sendOnce: true,
		preventDefault: false
	};

• remote_script the remote script that will handle the clicktrack data. this can be passed as a single, string argument to clicktrack(), or it can be passed as part of the configuration object, but it must be specified
• prefix the prefix for classnames that should be passed as part of the clicktrack data. defaults to "ct_".
• extraData additional data that should be passed as part of the clicktrack data.
• callback function to be executed upon successful execution of the remote script. you'll need to set preventDefault to true for this callback to get executed, and then redirect the user using window.location within the callback as required.
• dataType type of data you expect to be returned by the remote script. see the jQuery documentation on $.post() for details.
• sendOnce whether clicktrack data for a given link should be sent just once. defaults to true.
• preventDefault whether clicks on clicktrack links should be prevented from taking the user to the link destination. defaults to false (links will work as expected by default).

3 Comments »