Damien Katz

Clicky: Instantly track all outgoing clicks

I've created a little Javascript library I'm calling Clicky (get it here), that when inserted into a page it will automatically log the external links your users click. It requires no special server, client or reporting software. Clicky logs the clicks right to your own web server log file, so if you have access to your log then you can use Clicky. And the coolest thing is it will not break the link, so you don't have to worry about things like redirect scripts breaking or servers going down, it's unlikely to break the users experience under any cirumstances.

So, for example, if someone clicks this link Poo Poetry, before loading the new page Clicky will attempt to load an image (for approx. 1 second) at the following url:

http://damienkatz.net/clicky/link:http://poopoetry.com
--text:Poo%20Poetry?stamp=1111004763457

Which will leave a record in my server's log file. I can then view this information using Webalizer, AwStats or whatever log reporting tool I wish.

Here is a bit of what the clicks for Boing Boing looks like in Webalizer:

In this example it Clicky registered 6 clicks for Boing Boing.

How to install Clicky:

Step One:
Upload clicky.js your webserver.

Step Two:
Add the following to your HTML, just before the closing body tag (</body>):

<script type='text/javascript' src='/YOUR/UPLOAD/PATH/clicky.js'></script>

You are done!

Ok, not quite. There is one more thing you probably want to do, since by default these Clicky urls will show up a 404 errors in your log file, which means the reporting tools will treat the data differently. If you are using Apache you can fix it by creating an empty file named blank.txt adding the following to your .htaccess file:

RewriteEngine On
RewriteRule ^clicky/(.*)$ blank.txt

The "RewriteEngine On" line is only necessary once, so if it's already in the file don't add it again. If you aren't running Apache then you can modify other variables in the library and have Clicky report to a different url path, such as a CGI script. See the script for more details.

How does Clicky work?

It simply listens for all left clicks on the page where it's loaded. If someone clicks a link that will lead offsite, Clicky will encode the click information into a special url and attempt to load that URL from your site. It waits for about a second (to give time for it to make the request) then it returns and finishes executing the event normally. In this time, it should have made a successful connection to your server to load the image, which will cause the url request path to get logged. If it fails, then the click doesn't get recorded, but the user still gets to visit the link normally.

What if the browser doesn't have Javascript?

Then the page loads normally and nothing unusual happens. Clicky simply doesn't activate and the user's clicks don't get reported.

What if the Clicky code is broken or something goes wrong?

If the Clicky code encounters any error, it will simply abort itself and let the click event continue normally. The user won't see any errors.

Credit

I got the idea for Clicky when I saw this service MyBlogLog, which basically does the same thing but the clicks get reported to them, and they track and report the information for you. When I figured out how their library worked, I decided to write my own version that logs to my server. If you can't use Clicky for some reason, then you may be able to use MyBlogLog.

Clicky is in the public domain. Have fun.

Posted March 17, 2005 10:05 AM