Récapitulatif des faits.

Google Analytics (nommé GA ci dessous) est un utilitaire de Google qui propose après insertion d'un code javascript dans vos pages de scruter les allées et venues des visiteurs et dresse pour vous un état des lieux des visites de votre site. C'est gratuit, c'est efficace et avec un tel niveau de compétence, Xiti, Piwik et autres logiciels concurrents ont fort à faire.

Au chargement de la page de votre site web, le code Javascript de GA va de lui même charger d'autres informations, rien de choquant à première vue sauf que dans la pratique, le chargement de ces données bloque le chargement de votre page. Et c'est là où le bât blesse.

La première solution est de mettre le code Javascript de GA en bas de votre code, juste au dessus de </body></html> afin de tromper l'utilisateur, il a l'impression que la page est chargée car le navigateur web a affiché le contenu de la page, alors qu'en réalité la page se charge toujours.

C'est donc une méthode un peu douteuse...

Histoire d'enfoncer le clou, Google a fait savoir récemment qu'a contenu équivalent, les sites les plus rapides seraient également les mieux référencés, voilà c'est dit : il nous faut donc absolument modifier tout ça !

Donc quoi qu'on faisons nous donc ?

C'est google qui l'a proposé en catimini : la mise à disposition d'un code JS équivalent mais qui fonctionne cette fois ci en mode asynchrone. Concrètement c'est le même traitement des données qui est réalisée, sauf que cette fois ci le chargement de votre page ne sera pas interrompu par le travail du javascript de GA qui se fait de manière indépendante et sans bloquer votre page.

L'installation de ce code dans Cms Made Simple se fait comme d'habitude :

  • pensez à bien supprimer l'ancien code de votre gabarit
  • créez un contenu global du nom de GAasynchrone

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

remplacez UA-XXXXX-X par votre propre identifiant Google Analytics, enregistrez le tout.

Dans votre gabarit juste avant </head> cette fois ci, ajoutez le code d'appel à votre contenu global

{global_content name='GAasynchrone'}

Enregistrez et testez :)