jQuery.gaTracker.js adds 2 features to standard Google Analytics script :
- Asynchronous Tracking ( tracking start once page load is complete )
- Allow to track dynamic pages on full ajax websites

Implementation
Load the last version of jQuery.

To init your UA-ID and track the current page, you can use it like this :
[sourcecode]

jQuery(document).ready(function($) {
$.gaTracker.init("YOUR-UA-ID");
}) ;
[/sourcecode]

Firstly, this will init the goggle analytics tracker with your Google Analytics Account ID.
Secondly, it will track the current page after ga.js load.

Track with jQuery binds
If you use dynamic navigation in Ajax, you normally already bind clicks on links in order to override standard navigator implementations.
To track those clicks with analytics, simply call $.gaTracker, passing the url in parameter, like this :
[sourcecode]jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
e.preventDefault() ;
$.gaTracker.track($(this).attr('href')) ;
}) ;
}) ;[/sourcecode]

Download
Download jQuery.gatracker.js v1.0 : source code & minified version

Vous le savez, jQuery est génial, c'est la classe américaine ce truc et cependant, j'avais encore un soucis avec des requetes ajax synchrone qui bloquaient le navigateur le temps du retour de la réponse et quand cette requête est exécutée toutes les 10 secondes et que le browser est bloqué 2s sur les 10s, ça le fait pas trop...

Et bien j'ai la solution et elle se nomme 'jsonp'.


But What is 'jsonp' ? JSONp c'est du json et le 'p' pour 'padding' (formatage). Cette technique est utilisée par de nombreux gros voir très gros comme google, yahoo ou facebook...

Dans l'idée, celà permet d'effectuer une requete ajax en GET asynchrone (donc ne bloque pas le navigateur) et quand la réponse est disponible, jQuery créait une fonction javascript tempraire (callback) qui sera exécutée en passant le json en paramètre.

Vous allez voir, c'est dans simplicité angélique :

1. La requête jQuery :

[sourcecode language='js']
jQuery(document).ready(function() {
// To manage ajax req and be able to abort one
var ajax_req = {} ;

// The refresh function
var refresh_div = function() {
if ( ajax_req.refresh_div ) ajax_req.refresh_div.abort() ;
ajax_req.refresh_div = jQuery.ajax({
type: 'GET',
url: '/url_to_the_page/',
cache: false,
async: true,
dataType: 'jsonp',
success: function(data) {
// Request is complete and returned a json result
console.log(data) ;
}
});
}

// The updater dameon every 10 seconds
if ( timer_d ) clearInterval(timer_d);
timer_d = setInterval(function() {
refresh_div() ;
}, 10000) ;
});
[/sourcecode]

2. La page en php qui va recevoir la requete ajax et produire le json

[sourcecode language='php']

[/sourcecode]

distributed raman amplifier3. A ce point, tout est fini ou presque et jQuery fera le reste en exécutant le callback 'success' de la requete ajax.

Voilou, j'espère avoir pu vous aider quelque peu.
Attention tout de même, il vous faut au minimum jquery 1.2.1 et comme je n'ai que des navigateurs à jour, je ne sais pas ce que ça donne sur des navigateurs comme IE6...

Un petit bout de script qui devrait ravir ceux qui adorent les graphs.

Et oui, voici un outil qui devrait en surprendre plus d'un, permettant de dessiner de beaux graphiques en flash ou direct en gif avec une particularité tout de même : ils ont de la gueule !

Et ouais, ça peut-être interessant de référencer son nouveau site avant mise en ligne !

Généralement on fait ça au moment où tout est prêt et les débuts sont assez difficiles... (Pourquoi ce post n'est pas paru 1 mois avant ?... ;))

Allé, bonne lecture et n'hésitez pas à commenter votre expérience : http://www.arkantos-consulting.com/