Comment vérifier le tracking d’un évènement avec Firebug ?

Il est utile de tracker des évènements après le chargement de la page web pour mieux comprendre le comportement des internautes : clics sur un élément de la page, défilement en bas de page, survolement par la souris d’une zone.

Chaque évènement correspond à une action de l’internaute et à l’éxécution d’une fonction javascript. C’est donc à l’aide de la fonction javascript éxécutée que le tracking sera mis en place.

La fonction javascript peut être apelée de 3 façons :

  • elle peut être mise directement dans le code HTML

Exemple 1:

<html>
<head> </head>
<body>

<script language= »Javascript » type= »text/javascript »>
function test() {
var url = « http://www.google.com &raquo;;
window.open(url, « _blank »);
}
</script>

<div id= »Bouton »>
<input type= »button » value= »Cliquez ici » onclick= »test(); »>
</div>

</body>
</html>

  • elle peut être mise dans un fichier externe qui sera appelée via le HTML

Exemple 2:

Code HTML =

<html>
<head> </head>
<body>

<script language= »Javascript » type= »text/javascript » src= »script.js »>
</script>

<div id= »Bouton »>
<input type= »button » value= »Cliquez ici » onclick= »test(); »>
</div>

</body>
</html>

Et dans un fichier script.js externe =

function test() {
var url = « http://www.google.com &raquo;;
window.open(url, « _blank »);
}

  • elle peut être créé à l’aide du gestionnaire d’évènement du DOM en créant un « listener ». Ce listener va être créé via une fonction javascript qui va détecter l’évènement du noeud DOM précisé et éxécuter la fonction correspondante

Exemple 3 :

code HTML =

<html>
<head> </head>
<body>

<div id= »Bouton »>
<input type= »button » value= »Cliquez ici »>
</div>

<script language= »Javascript » type= »text/javascript » src= »listener.js »>
</script>

</body>
</html>

Et dans un fichier listener.js externe =

function test(event) {
var url = « http://www.google.com &raquo;;
window.open(url, « _blank »);
}

var element = document.getElementById(« Bouton »);
element.addEventListener(« click », test, false);

Dans les exemples ci-dessus, la fonction javascript charge google.com dans une nouvelle fenetre. Pour mettre en place un tracking, il s’agit de mettre le code correspondant dans la fonction appelée.

Pour vérifier le tracking des évènement, il est possible de vérifier l’envoi du hit. Et il est également possible de vérifier le code de la fonction javascript (plus en amont dans le process). Cet article va parler du 2eme point : vérifier la fonction javascript liée à l’évènement.

Firebug permet de voir rapidement le code de la fonction associée à un évènement. Nous allons voir pour chacun des exemples ci-dessus, comment retrouver la fonction associée dans Firebug.

Exemple 1 avec le code javascript dans le code HTML

On voit qu’un évènement clic existe en allant dans l’onglet « Events ». Et le noeud DOM (élément HTML) concerné est précisé.

En cliquant dessus, on visualise le code HTML correspondant dans le volet à droite.

Si on clique sur l’élément sélectionné, on est alors redirigé dans l’onglet HTML où on peut visualiser dans le volet à droite le détail de l’évènement « click » (on observe alors le code javascript correspondant, ici la fonction test() )

Et si on souhaite avoir plus de détail sur cette fonction test, on peut aller la rechercher dans le DOM (dans l’onglet DOM)

Et en cliquant dessus, on est redirigé dans l’onglet « Script » pour visualiser le code javascript correspondant (pour cet exemple, c’est le code du fichier HTML test.html qui est affiché)

Exemple 2 avec le code javascript dans un fichier externe

On retrouve de la même facon l’évènement dans l’onglet « Events », on peut visualiser le code HTML correspondant dans l’onglet HTML qui nous informe qu’une fonction javascript test() est appelée.

Et on peut visualiser cette fonction en allant la rechercher dans le DOM et en cliquant dessus pour visualiser le code dans l’onglet « Script » : le fichier javascript correspondant s’affiche alors (« sc.js »)

Exemple 3 avec le gestionnaire d’évènement DOM

C’est pareil, sauf que l’élément associé au clic est différent puisque dans ce cas le « listener » est associé à la balise div ayant l’id « bouton ». Il faut donc sélectionner cet élément pour voir les infos de l’élément (si on sélectionne la balise input, aucun évènement ne sera affiché).

Pour + d’infos :

Firebug

Les evènements Javascript

Le gestionnaire des evènements DOM

Pour rajouter l’onglet Events dans Firebug

Web analytics Article écrit par

Vous avez une remarque ? une idée ? Laissez un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s