Suivi des variables personnalisées Analytics avec Blogger

Si vous utilisez Blogger, vous vous êtes sans doutes empressé à intégrer le tracking Google Analytics de vos visiteurs. Si le suivi du nombre de vos visiteurs, de leurs origines géographique, des liens et mots clés d'entrée sur votre blog, des pages les plus visitées etc... vous passionne, alors vous serez certainement intéressé par la mise en place de mesures personnalisés au moyen des custom variables ou variables personnalisées.

Les variables personnalisées Google Analytics permettent de suivre des valeurs quelconques pour des variables que vous définissez vous mêmes. Le suivi des valeurs pouvant se faire :

• Par visiteur unique
• Par session de navigation
• Par impression de page

Pour une explication exhaustive sur les variables personnalisées, je vous renvoie à la documentation Google Analytics. Nous allons maintenant voir comment les utiliser pour effectuer le suivi des tags les plus populaires sur votre blog Blogger.

Vous avez sans doute déjà ajouté le code de suivi Analytics au template de votre blog :

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXX-Y']);

(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);
})();

_gaq.push(['_trackPageview']);

La directive _gaq.push(['_trackPageview']); permet d'envoyer les données suivies pour la page affichée vers votre compte Analytics. Pour effectuer le suivi des tags les plus populaires de votre blog, il va falloir ajouter le code suivant avant cette directive _gaq.push(['_trackPageview']); :

if (/(http:\/\/){0,1}avianey.blogspot.com\/[0-9]{4}\/[0-9]{2}\/.*\.html/.test(window.location)) {
    var libellesSpan;
    var continuer = false;
    if (document.getElementsByClassName) {
        var labels = document.getElementsByClassName('post-labels');
        if (labels && labels!=null && labels.length>0) {
            libellesSpan = labels[0];
            continuer = true;
        }
    } else {
        var blog = document.getElementById('Blog1');
        if (blog && blog!=null && blog.getElementsByTagName) {
            var spans = blog.getElementsByTagName("span");
            continuer = true;
            for (var i = 0; i < spans.length; i++) {
                if (spans[i].className=='post-labels') {
                    libellesSpan = spans[i];
                    break;
                }
            }
        }
     }
     if (continuer && libellesSpan.getElementsByTagName) {
         var links = libellesSpan.getElementsByTagName('a');
         for (var i = 0; i < links.length; i++) {
             _gaq.push(['_setCustomVar', 1, 'Tag', links[i].innerText.replace(/%20/g,' '),  3]);
         }
     }
}

La première partie du code permet de récupérer les tags associés au post du blog qui est affiché :

1. Vérification de l'URL afin de s'assurer qu'elle correspond à celle d'un post. Le suivi n'est pas effectué pour la page principale, l'historique du blog ou la liste des posts par tag.
2. Si l'on est sur la page d'un post : récupération des tags du blog en utilisant getElementsByClassName sur les navigateurs compatibles ou en navigant dans le DOM pour les autres (Internet Explorer...)
3. Enfin, enregistrement d'une valeur personnalisée pour chaque tag associé au post : _gaq.push(['_setCustomVar', 1, nom, valeur, 3]);

Il ne reste plus qu'à attendre quelques jours (et oui c'est plutôt long) avant de voir apparaître les premières statistiques dans votre interface Analytics :