Création de sites web en éco-conception

24/04/2013 Décortiquer le code de suivi de Google Analytics.

Le code de suivi de Google Analytics est probablement le script JavaScript le plus utilisé au monde.

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-Y']); _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); })();

Disséquons-le ligne par ligne !

var _gaq = _gaq || [];

Déclaration d'une variable _gaq. Si une telle variable existait déjà (ce qui n'est pas improbable, plusieurs codes de suivi pouvant intégrés dans une même page), elle est utilisée, sinon, c'est un tableau vide.

_gaq.push(['_setAccount', 'UA-XXXXX-Y']); _gaq.push(['_trackPageview']);

Grâce à la fonction .push(), _gaq se voit pourvue de deux nouveaux éléments, en l'occurrence des tableaux. Pour info _gaq est la variable globale qui contient les paramètres de suivi.

Le bloc suivant peut déboussoler :

(function() {...})();

Il s'agit en fait d'une fonction anonyme lancée immédiatement après avoir été déclarée. Les anglophones appellent cela a self-invoking function ou self-executing function. Il faut savoir que var f=function(arg){};f('truc'); revient au même que (function(arg){...})('truc');. Cette technique - outre son côté esthétique - permet d'éviter les conflits de noms, toujours possibles lorsqu'une page appelle plusieurs bibliothèques JS différentes.

Passons au contenu de cette fonction.

var ga = document.createElement('script');

Elle crée un élément de type script :

Les trois instructions suivantes lui rajoutent des attributs afin qu'il soit de la forme <script type='text/javascript' async='true' src='...'></script>.

ga.type = 'text/javascript'; ga.async = true; ga.src = /* voir détail ci-dessous */

L'attribut async (nouveauté HTML5) permettra au script d'être lancé de manière asynchrone, c'est-à-dire une fois la page affichée : gain de performance en perspective...

L'attribut src sert quant à lui à inclure un script externe.

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

Le suivi des visiteurs de Google Analytics est effectué grâce à un script hébergé chez Google. L'instruction ci-dessus sert à définir la localisation de ce script externe, et ce en fonction du protocole de communication de la page courante. Ce dernier est-il sécurisé ("https:") ?

  • Oui ? l'URL du script sera https://ssl.google-analytics.com/ga.js ;
  • Non ? l'URL du script sera http://www.google-analytics.com/ga.js.

La syntaxe ( xxx ? yyy : zzz) est un opérateur ternaire, l'équivalent de if (xxx) {yyy} else {zzz}.

Passons à présent à l'insertion de cet élément dans le DOM.

var s = document.getElementsByTagName('script')[0];

Grâce à la fonction .getElementsByTagName() la première balise <script> du document est récupérée. Il y en a forcément au moins une : celle du présent script !

s.parentNode.insertBefore(ga, s);

.parentNode renvoie l'élément parent de cette balise ( par exemple) et .insertBefore() y insère notre nouvel élément ga (l'appel de script externe) juste avant s (la première balise <script> de la page).

Pour aller plus loin...

Si vous maîtrisez le JavaScript et que vous souhaitez réduire la taille du code de suivi de GA, je vous conseille l'article Optimiser le snippet GA (en anglais).

Commentaires

Ajouter un commentaire :