Firebug est un plugin pour Firefox qui peut s’avérer très utile dans plusieurs situations : “Il permet d’éditer en direct, déboguer et inspecter les codes CSS, HTML et JavaScript de n’importe quelle page web”.

Il va nous servir à surveiller les informations envoyées aux serveurs de Google par le GATC (Google Analytic Tracker Code)…

1. Lancer Firebug

Tout d’abord, téléchargez et installez Firebug (car vous utilisez Firefox bien sûr !?!) puis rendez-vous sur la page de la première démo Flex de GAFF.

Ceci fait, vous trouverez un petit cafard en bas de votre fenêtre Firefox. Cliquez dessus :

S’ouvrira alors tableau de bord de Firebug. Activez la panneau Réseau :

2. Surveiller des requêtes effectuées par le navigateur

La page va se recharger et vous allez voir apparaitre plusieurs lignes dans la console. Chacune correspond à une requête effectuée par le navigateur (fichiers HTML, CSS, JS, XHR, image ou Flash).

On repère dans l’image ci-dessous :

• ligne 1 : la page HTML (01, la page chargée à la racine du dossier demo/01).
• ligne 2 : le JavaScript SWFObject (swfobject.js).
• ligne 3 : le JavaScript de Google Analytics (ga.js).
• ligne 4 : une image au format GIF (de 1px²… ça se dit ?) récupérée chez Google Analytics (__utm.gif). L’url de cette image comprends tout un tas de paramètres en méthode GET (url?param=value). Cette requête a été effectuée par l’appel de la fonction trackPageview() du code de suivi JavaScript que vous avez copié-collé dans la page.
• ligne 5 : l’application Flex (GAFFDemo01.swf).

Sur la droite de la console, vous pouvez voir le temps de chargement de chaque requête, ainsi que le total pour la page. Ici 614ms.

Dans un autre cas cette information pourrait vous permettre de savoir ce qui ralenti l’affichage de vos page :

3. Surveiller les faits et gestes de l’application Flex

Si maintenant vous changez de page dans l’application. Une requête est envoyée par le GATC.

Vous avez un aperçu de l’intitulé dans le bas de l’application (merci Sylvain pour cette idée) :

4. Lire les informations d’une requête

Dans la console de Firebug, une nouvelle image GIF a été chargée :

En dépliant la ligne, vous accédez à la liste des paramètre transmis par la requête. On y retrouve l’URL créée dans l’application Flex :

L’information a donc été transmise aux serveurs de GA, ça marche !

Un dernière petite astuce, vous pouvez filtrer les requêtes par type. Ici en sélectionnant “Images” vous n’aurez que les GIF de Google Analytics, car aucune autre image n’est chargée.