jquery – Digitalistic http://www.digitalistic.com Mashup or die trying Sun, 27 Apr 2014 04:03:01 +0000 en-US hourly 1 Click Tracking with jQuery http://www.digitalistic.com/2009/09/16/click-tracking-with-jquery/ http://www.digitalistic.com/2009/09/16/click-tracking-with-jquery/#comments Wed, 16 Sep 2009 08:56:10 +0000 http://www.digitalistic.com/?p=341 Generally I use only Google Analytics for the stats of my web apps, but for one of my current projects (Bröllopia – sökmotorn för ditt bröllop – a swedish wedding site) I needed a bit more. I wanted to have detailed statistics for links leading to other sites to use these stats in the app itself. One way of doing this is of course to make all these links go to a page on my site and then when this page loads I record all the stats I want and then redirects to the external site, for example the link www.digitalistic.com/tracker.php?id=123 loads tracker.php and logs a click on the link with the id “123” (this id needs to be mapped to a link in the database) and then forwards to www.webhostninja.com. The link on my site would then look like this:

<a href='http://www.digitalistic.com/tracker.php?id=123'>WebHostNinja</a>

The problems with this is that it is slow (one more page load) and that the link the user sees does not lead to the page, ie the link text “WebHostNinja” and then the user expects the link to be something like “http://www.webhostninja.com” and nothing else. I don’t like this from a usability point of view. Not that I have any evidence for it, but I suspect that relevant outgoing links help the sites Google juice. Definitly it helps the Page Rank of the site I link to, and why should I not help them?

My solution is to use some jQuery magic. Download and install jQuery (btw, if you like jQuery, then take a look at the fantastic jQuery tools). Then add the class “track_this_link” to each link tag that you want to track as well as give each link tag an unique id (so you can track which link is which). The href attribute should point to the external site directly and not to some internal page. The link above would now look like this:

<a href='http://www.webhostninja.com' id='123' class='track_this_link'>WebHostNinja</a>

Next step is to add a some javascript that adds an onClick event to all the links with the class “external_link”:

$(document).ready(function(){
$('a.track_this_link').click(function() {
$.post(http://www.digitalistic.com/tracker.php, {id:this.id});
return true;
});
});

This means that each time an external link is clicked a post request is sent to digitalistic.com/tracker.php with a unique id for the link in question. What is left is to implement the tracker.php script so that it can handle the post and save the data you are interested in to the database in a secure and correct way. I am happy to just summarize the number of clicks per link on a daily basis, but if you want to save detailed data for each click.

Do you have a better solution to this problem? Let me know!

]]> http://www.digitalistic.com/2009/09/16/click-tracking-with-jquery/feed/ 12 Pimp my Coda http://www.digitalistic.com/2009/03/31/pimp-my-coda/ http://www.digitalistic.com/2009/03/31/pimp-my-coda/#comments Tue, 31 Mar 2009 09:23:41 +0000 http://www.digitalistic.com/2009/03/31/pimp-my-coda/ Coda is the best IDE I have ever used, and one (if not the biggest one) reason I am really happy with moving to Mac (sorry folks, Coda is Mac only). It does all the stuff I need, such as syntax highligthing, FTP, source control etc. At the same time it is skipping all the stuff that just clutters up the interface (like all the stuff Eclipse is full of). Some people might want more bells and whistles, but I am happy with a development tool that does just what it should and not more. I am mostly using Coda for writing things in the PHP Framework CodeIgniter or in the Python Framwork Django, but Coda can handle most languages quite nicely.

Coda

Even of Coda is great, it is not so great that it can not be made greater (so much for simplicity, hehe), which is pretty simple since Coda allows for plugins. In the Coda Developer Zone there are a number of plugins listed, and if you look around on the web you can find even more. Also, you can easily add new code completion, reference books and other goodies. This is a list of the stuff the extra stuff I have used and am very happy with so far…

URL Encode
This is a a very simple but very practical plugin that allows you to highlight some text in your HTML files and then URL Encode it. As a Swede using a lot of words with åäö it is very usefull.

PHP Toolkit
This plugin makes it easy to validate and clean up PHP files.

PHP Toolkit

CodeIgniter Syntax Mode
Code completion with CodeIgniter classes and functions, a must if you are using Coda to develop CodeIgniter applications. You can download the file here and read more about it in this thread in the CodeIgniter forums. I have made this syntax mode my default one for PHP files since I hardly do any PHP that is not CodeIgniter anymore.

Extra books
It is easy to include help files about programming languages etc in Coda in the form of “books”. Out of the box Coda comes with books about PHP, HTML, CSS and Javascript, but it is easy to add more. Here is a great list of more books you can include in Coda, complete with icons and all. Personally I have added CodeIgniter and jQuery so far, but I am sure some Django, Drupal and WordPress will sneak in as time goes by.

What are your favourite add ons to Coda? Please let me know if I have missed something I just must have!

]]> http://www.digitalistic.com/2009/03/31/pimp-my-coda/feed/ 6