Track user clicks on certain links

Posted

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:
this is a link
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:
this is a link
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):
type="text/javascript">

$(document).ready(function() { $("a.clicktrack").clicktrack("foo.php"); });
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).

Posted

3 comments

Aug 31, 2009
Prashanth said...
Hello Rebecca,
Thanks for this nice slim click tracking script. I beleive there will be no changes required to implement the same in Asp.net
Sep 05, 2009
Bill Bartmann said...
Hey good stuff...keep up the good work! :)
Nov 18, 2009
Jeremy said...
Is this working for you in Safari? I was having issues with one I rolled myself and thought I'd try this... both work fine in Firefox and IE but Safari never fires the call to the external script and instead just goes to the href location.

Leave a comment...