[Webdesign] Comment externaliser le script Google Analytics et accélérer le chargement de vos pages?


Lorsqu’on souhaite mettre en place un site professionnel capable d’accueillir un grand nombre de visiteurs, le respect des bonnes pratiques du webdesign est indispensable.

L’une de ces pratiques consiste à embarquer les scripts dans des fichiers externes et à placer des appels à la fin du corps de la page.

carnet-webdesign

Or il arrive qu’il ne soit pas possible de le faire, notamment si l’on n’a pas la main sur le script en question. C’est le cas par exemple du script de Google Analytics (ga.js ou urchin.js), qui est hébergé sur les serveurs de Google, et qui nous oblige à placer plusieurs instructions directement dans la page.

...
<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
	var pageTracker = _gat._getTracker("UA-12345678-9");
	pageTracker._setDomainName(".websourcing.fr");
	pageTracker._trackPageview();
</script>
</body>
</html>

Le problème avec ce script, c’est qu’il est intrusif pour ne pas dire envahissant. En effet, il oblige d’abord à coller du code JS en ligne dans la page (voir ci dessus), ce qui est en contradiction avec les bonnes pratiques. Ensuite, il nous rend aussi dépendent des performances des serveurs de Google Analytics pour servir le script, d’autant que celui-ci n’est pas mis en cache.

Dans la suite de cet article, vous allez voir comment déplacer ce bout de script dans un fichier externe et à le rendre non-bloquant, c’est à dire le charger lorsque votre page est entièrement exécutée (sans document.write en plus).

1 – Récupérez votre code GA

La première étape consiste à récupérer le bout de code que Google vous demande de coller dans vos page.

Si vous utilisez un plugin (pour WordPress par exemple), récupérez simplement votre ID de tracker (UA-12345678-9) et remplacez le (voir l’exemple de code ci-dessus). Désactivez votre plugin également.

Comme vous pouvez le voir, il y a deux parties:

  • La première consiste à charger le fichier externe hébergé chez Google en utilisant du javascript pour déterminer s’il est sur un serveur sécurisé (https://ssl.) ou non (http://).
  • La seconde assigne l’ID du tracker et appelle des fonctions du script.

2 – Externalisez le script

Maintenant il faut rentrer dans le vif du sujet. Il faut créer un fichier JS, pour lequel vous insèrerez une référence là où vous le faite pour vos autres scripts (dans le header ou mieux le footer)..

<script type="text/javascript" src="http://blog.websourcing.fr/js/googleAnalytics.js"></script>
ou pour WordPress
<script type="text/javascript" src="/wp-content/themes/montheme/js/googleAnalytics.js"></script>


3 – Le code du fichier externe

Pour externaliser le déclenchement du script Google Analytics à la fin du chargement, il faut capturer l’évènement de fin de chargement du DOM de la page.
Ici, on se base sur l’implémentation proposée par Simon Willisons: addLoadEvent

Le principe de ce script est de proposer un script qui délègue des appels à d’autres scripts, comme celui de GA.

function addLoadEvent(func,arg){
 if (!arg) {
   var oldonload = window.onload;

   if (typeof window.onload != 'function') {
     window.onload = func;
   } else {
     window.onload = function() {
       oldonload();
       func();
     }
  }
 } else {
  if (arg){
    oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func(arg);
    }
    window.onload = function() {
       oldonload();
       func(arg);
    }
  }
 }
}

Je vous le livre tel quel car il est facile à comprendre.
Il ne reste plus qu’à créer une fonction pour charger le script GA:

function loadGAScript(){
  /*Vérification du navigateur pour la compatiblité DOM*/
  if (!document.getElementsByTagName)
    return false;

  /*choix du protocole (https ou http)*/
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

  /*on insère maintenant le script source vers Google Analytics*/
  var gaScript = document.createElement("script");
  gaScript.setAttribute("src",gaJsHost +"google-analytics.com/ga.js");
  gaScript.setAttribute("type","text/javascript");

  var domHead = document.getElementsByTagName("head")[0]
  domHead.appendChild(gaScript);
}
/*chargement de la délégation de script*/
loadGAScript();

Il faut maintenant ajouter la seconde partie du script au chargement de la page:

function callGA(){   
  var pageTracker = _gat._getTracker("UA-12345678-9");
  pageTracker._initData();
  pageTracker._trackPageview();
}

et une fois que le DOM est chargé, alors on appelle cette fonction:

addLoadEvent(callGA);

4 – Conclusion

C’est fini. Avec cette astuce, vous n’aurez plus de code en vrac dans vos pages. Tout se trouvera dans un fichier externe et se fera automatiquement, sans aucun code dans la page (même pas un appel).

Tout ce code doit se trouver dans un seul et même fichier, lequel sera référencé dans vos pages (de manière classique).

Il n’est plus nécessaire de référencer le script de Google Analytics puisque la référence sera dynamiquement insérée par le script précédent.

Des suggestions? Des questions? N’hésitez pas.

via