Google Analytics et le mode debug (ga_debug.js)

Introduction

Dans le cadre de la migration vers la version asynchrone de Google Analytics, de la mise en place d’évènements personnalisés ou encore de l’intégration des outils de partage AddThis dans Google Analytics, une phase de debug est nécessaire. Afin de ne pas travailler en aveugle et ne pas implémenter directement en production des scripts non fonctionnels, Google Analytics propose des modes "debug".

Cet article s’adresse aux concepteurs qui n’ont jamais abordé le débogage avec Google Analytics et souhaitent rapidement diagnostiquer un dysfonctionnement avec Google Analytics (évènements, etc.).

Pré-requis : 2 navigateurs, au choix, sont indispensables au débogage de Google Analytics

• Google Chrome et ses outils de développement.
• FireFox et l’extension FireBug.

Dans le contexte de cet article, la version de debug de Google Analytics a été utilisée pour la première fois au cours de la migration vers la version asynchrone de Google Analytics pour le site SQLPAC suite à des dysfonctionnements : Google Analytics - Migration en mode javascript asynchrone

Les outils de développement de Chrome et FireFox

Chrome propose en natif des outils de développement : "OutilsOutils de développement" ou Ctrl+Maj+I.

La version de debug de Google Analytics renvoie les informations dans l’onglet Console.

Pour FireFox, il faut installer l’extension Firebug si ce n’est pas encore le cas : Extension FireBug pour FireFox . Comme pour Chrome, la version de debug de Google Analytics retourne les informations dans l’onglet Console de l’extension Firebug.

Déboguer avec ga_debug.js en local

Basculer vers la version de debug ga_debug.js de Google Analytics

La conception du site SQLPAC est réalisée en local sur un nom virtuel de domaine www.sqlpac.dev grâce à Apache.

L’utilisation d’un nom de domaine virtuel www.sqlpac.dev local n’empêche en rien l’utilisation du script ga_debug.js qui est la version de débogage de Google Analytics. Cette version de débogage affiche les informations, avertissements et erreurs dans la console Javascript de Chrome ou Firefox/FireBug.

Pour basculer en mode debug pour Google Analytics, au lieu d’appeler classiquement le script Google Analytics ga.js, c’est le script /u/ga_debug.js qui est appelé :

<script type="text/javascript" 
   async="true"
   src="http://www.google-analytics.com/ga.js">
</script> 

<script type="text/javascript" 
   async="true"
   src="http://www.google-analytics.com/u/ga_debug.js">
</script>

Un exemple d’erreur

Voici un exemple d’erreur obtenu dans la console : au lieu d’appeler la méthode _trackPageview, _tracPageview est appelée et cette fonction n’existe pas :

_gaq.push(['_setAccount',gaCode]);
_gaq.push(['_tracPageview']);
_gaq.push(['_trackPageLoadTime']);
          _gaq.push processing : "[_setAccount,UA-xxxxxxx-x]"            ga_debug.js:20
_gaq.push processing : "[_tracPageview]"                       ga_debug.js:20
x _tracPageview is not a function.                             ga_debug.js:20
_gaq.push processing : "[_trackPageLoadTime]"                  ga_debug.js:20
Track Page Load Time                                           ga_debug.js:20

Les autres informations retournées intéressantes par le mode debug (méthodes obsolètes, etc.)

Le succès d’une notification envoyée vers Google Analytics est consigné dans la console avec le mot clé "Tracking beacon sent!".

Tracking beacon sent!

Le mode debug de Google Analytics renvoie des informations très précieuses, comme les avertissements sur les méthodes obsolètes :

! Method _getTracker is deprecated. Use _createTracker instead.         ga_debug.js:12

les propriétés du client (page référente, résolution, etc.) :

Tracking beacon sent!

Page Title               : Google Analytics - Migration en mode javascript asynchrone
Host Name                : www.sqlpac.com
Page                     : /referentiel/docs/google-analytics-migration-en-mode-javascript-asynchrone.htm
Referring URL            : -
 ...
Language                 : fr
Encoding                 : ISO-8859-1
Flash Version            : 10.3 r181
Java Enabled             : true
Screen Resolution        : 1024x768
Color Depth              : 32-bit
Ga.js Version            : 4.9.5d

Afin d’éviter les erreurs, le mode debug avec ga_debug.js est également particulièrement utile lorsque des évènements personnalisés sont envoyés vers Google Analytics.

Tracking beacon sent!
 ...
Event Name               : addthis
Event Type               : facebook
Event Label              : ...
 ...

Déboguer avec ga_debug.js en "live" grâce à Google Chrome

Depuis Juin 2011, le navigateur Google Chrome va encore plus loin en proposant une nouvelle extension : Google Analytics Debugger (by Google).

Cette nouvelle extension permet le débogage de Google Analytics en direct, sans devoir basculer du script ga.js vers /u/ga_debug.js et directement sur son site en production si malheureusement cela s’avère nécessaire.

Une fois l’extension installée, une nouvelle icône apparaît en haut à droite du navigateur Google Chrome : le mode debug de Google Analytics est activé et désactivé en cliquant sur cette icône. Le libellé ON indique le mode debug de Google Analytics activé.

Les informations de debug sont retournées classiquement dans la console des outils de développement de Google Chrome (Ctrl+Maj+I).

L’utilisation de ga_debug.js est forcée par cette extension avec le code ci-dessous dans la page :

 <script id="chrome-ga-debug" type="text/javascript" 
    src="chrome-extension://jnkmfdileelhofjcijamephohjechhna/ga_debug.js"></script>