Mon code google analytics est-il valide?

Bonjour à tous,

Après avoir visité des sujets concernant le suivi des liens sortants dans GA (google analytics), je me permets de vous demander de l'aide car mon niveau en JS, étant proche de 0, je n'arrive pas à savoir si j'ai écris quelque chose de propre.

Le code JS est installé dans un fichier externe. Le fichier est appelé en dernier, juste avant la balise </head> avec :

<script type="text/javascript" src="js/google-analytics.js"></script>

Contenu du fichier google-analytics.js :

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-moncode-1']);
  _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);
  })();
	
	var pageTracker = _gat._getTracker('UA-11619174-1');
	pageTracker._trackPageview();
	
  function recordOutboundLink(link, category, action) {
	try {
    var pageTracker = _gat._getTracker('UA-11619174-1');
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100)
	}catch(err){}
  }

Le lien à surveiller :

<a href="http://www.lien.com" onclick="recordOutboundLink(this, 'Liens sortants', 'www.lien.com');return false;">

Installation faite d'après :
http://www.google.com/support/analytics/bin/answer.py?hl=fr&answer=55527

- Le xHTML est valide d'après W3C
- GA prend en compte le reste des stats, il manque juste les événements.

Voyez vous une erreur quelque part?

Hello,

Mon seul essai avec la méthode _trackEvent de Google Analytics n'avait pas été concluant non plus. Mais ça doit pouvoir se faire correctement, j'imagine.

Déjà ça m'étonne un peu de voir une deuxième fois la ligne suivante:
var pageTracker = _gat._getTracker('UA-11619174-1');
(dans la fonction recordOutboundLink). Je ne crois pas que ça soit nécessaire vu que tu as déjà une variable globale nommée pageTracker qui correspond au même objet.

Après, et même en laissant tel quel, ça peut être intéressant de voir s'il y a des erreurs JavaScript.
Pour ça, tu peux à priori remplacer ce code:

}catch(err){}

par celui-ci:

}catch(err){if(console.log){console.log(err)}}

Et voir si tu as des erreurs affichées dans la console d'erreur JavaScript du navigateur (ou celle de Firebug sous Firefox, ou Web Inspector sous Safari ou Chrome).

Pour être franc, si ton niveau en JS est proche de zéro ça va être chaud à débuguer cette histoire.

C'est vrai, c'est très souvent pénalisant de ne pas pouvoir comprendre le JS, j'ai des résultats qui arrive en ayant modifiant la catégorie :

Avant :

<a href="http://www.lien.com" onclick="recordOutboundLink(this, '', 'www.lien.com');return false;">

Après :

<a href="http://www.lien.com" onclick="recordOutboundLink(this, 'Liens sortants', 'www.lien.com');return false;">

Je vais essayer ta technique, qui si je comprends bien, permet de générer un log d'erreur d'un code JS.

Voila l'erreur renvoyé, je suppose qu'elle provient du double emploi de

var pageTracker = _gat._getTracker('UA-11619174-1');

http://img443.imageshack.us/img443/4764/temphy.th.jpg

Voila ce que renvoi ie8 : la même chose

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Horodateur : Fri, 12 Nov 2010 19:16:48 UTC

Message : '_gat' est indéfini.
Ligne : 11
Caractère : 2
Code : 0
URI :  http://www.bluebox-chartres.com/js/google-analytics.js
 

Avec ce code, pas d'erreur détectée mais je ne le comprend pas, il est la le probleme. Pourrais m'accorder quelque seconde précieuse de ton temps pour le commenter que je comprenne un minimum le fonctionnement...

Te remerciant par avance

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

	
  function recordOutboundLink(link, category, action) {
	try {
    var pageTracker = _gat._getTracker('UA-11619174-1');
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100)
	}catch(err){if(console.log){console.log(err)}}
  }

Alors le problème que tu as avec le premier code, c'est au moment où tu appelles la variable _gat pour la première fois. C'est une variable globale définie dans le script de Google Analytics (celui hébergé sur les serveurs de Google). Il faut donc que ce script sont chargé et interprété pour que tu puisses l'utiliser.

Ton code de départ ressemble à ça:

// 1. Je définis une variable
var _gaq = ...;
 
// 2. Je déclare une fonction anonyme qui va se déclencher directement
// et qui rajoute un élément SCRIPT dans le DOM, élément qui pointe vers
//  http://www.google-analytics.com/ga.js  (pour simplifier un peu)
(function() { 
   ... 
})();

// 3. Je fais appel à la variable _gat définie dans  http://www.google-analytics.com/ga.js
 
var pageTracker = _gat.unemethode('des', 'paramètres');

Ton code JS est exécuté dans l'ordre, et apparemment à la troisième étape ça coince.
Je ne sais pas exactement comment se comportent les navigateurs, mais il est possible (probable?) qu'ils ne déclenchent pas tout de suite le chargement du fichier de Google Analytics. Il me semble qu'ils attendent la fin du script en cours (ton fichier google-analytics.js, ou bien la fin d'un élément <script></script> si c'est à l'intérieur d'une page HTML).

Autrement dit, un même script ne peut pas à la fois:
- Créer un élément SCRIPT dans le DOM pour rajouter un script JS à la page.
- Utiliser des variables ou fonctions de ce «nouveau» script JS, qui ne sera pas encore chargé.

Maintenant, ta deuxième version est structurée ainsi:

// 1. Je définis une variable
var _gaq = ...;
 
// 2. Je déclare une fonction anonyme qui va se déclencher directement (...)
(function() { 
   ... 
})();

// 3. Je déclare une fonction. Cette fonction n'est pas exécutée, juste déclarée.
function recordOutboundLink(link, category, action) { 
  ...
}

Cette fois, quand le script est interprété, pas d'erreur. Le contenu de la fonction recordOutboundLink est lu mais pas exécuté, donc le navigateur n'a pas encore besoin d'avoir une variable "_gat" qui existe.

Ensuite, le navigateur va télécharger le fichier ga.js depuis les serveurs de Google, et l'interpréter. Notre variable _gat (qui correspond à un object JavaScript avec des fonctions «filles», qu'on appelle des méthodes, telles que _gat._getTracker) existe.

Ensuite, dès que l'on clique sur un lien qui appelle la fonction recordOutboundLink elle est exécutée, et cette fois tout se passe bien. Tu peux supprimer le console.log() qu'on avait rajouté pour tester.

Reste à voir si les deux lignes supprimées plus haut étaient nécessaires... pour initialiser le tracking par exemple. Si on regarde le code de base utilisé par Google depuis cette année, il semble que non:
http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

Finalement, c'était bien plus simple, le code ci-dessous est suffisent, il s'agit du code de base fourni par GA... lol

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

Pour le HTML, il suffit d'ajouter derrière les liens à suivre ceci :

<a href="http://www.lien.com" onclick="_gaq.push(['_trackEvent', 'CCCC', 'AAAA', 'LLLL', 'VVVV']);">

CCCC : Catégorie d'événement (pour moi : liens sortants)
AAAA : Action de l'événement (pour moi : clics)
LLLL : Label de l'événement (pour moi : nom du site destinataire)
VVVV : Valeur de l'événement optionnel (pour moi : ticket moyen en résultant)

Source :
http://floriankarmen.com/web-analytics/suivi-evenement-google-analytics.html#comment-1657

pika28 a écrit :
Finalement, c'était bien plus simple, le code ci-dessous est suffisent, il s'agit du code de base fourni par GA... lol

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

Pour le HTML, il suffit d'ajouter derrière les liens à suivre ceci :

<a href="http://www.lien.com" onclick="_gaq.push(['_trackEvent', 'CCCC', 'AAAA', 'LLLL', 'VVVV']);">

CCCC : Catégorie d'événement (pour moi : liens sortants)
AAAA : Action de l'événement (pour moi : clics)
LLLL : Label de l'événement (pour moi : nom du site destinataire)
VVVV : Valeur de l'événement optionnel (pour moi : ticket moyen en résultant)

Source :
http://floriankarmen.com/web-analytics/suivi-evenement-google-analytics.html#comment-1657

Je vais cracker... Je me suis avancé sur le résultat comme d'habitude. La méthode ci-dessus ne fonctionne pas pour les liens sortants. Elle doit être réservé à des évènements de type, téléchargement de fichier, lecture d'une vidéo, des actions sur le site.

J'ai reçu des résultats au moment ou j'avais ce code installé (post du # 12 Nov 2010 - 20:57:08) ci-dessus. Je vais laisser ce code 48h pour vérifier qu'il fonctionne et je vous tiendrais informé du résultat final ce coup ci.

Dernière interrogation :
- avec le code JS du post [12 Nov 2010 - 22:49:27] dans google-analytics.js, quand j'utilise inspecter un élément de google chrome ou de firebug, il m'affiche le script de ga.js
- avec le code JS du post [12 Nov 2010 - 20:57:08] dans google-analytics.js, quand j'utilise inspecter un élément de google chrome ou de firebug, il m'affiche ce coup ci le contenu de mon fichier...

Cette différence est-elle normal?

Merci de ton aide Florent, je vais me renseigner pour passer une formation sur les bases du JS.

pika28 a écrit :
Finalement, c'était bien plus simple, le code ci-dessous est suffisent, il s'agit du code de base fourni par GA... lol

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

Pour le HTML, il suffit d'ajouter derrière les liens à suivre ceci :

<a href="http://www.lien.com" onclick="_gaq.push(['_trackEvent', 'CCCC', 'AAAA', 'LLLL', VVVV]);">

CCCC : Catégorie d'événement (pour moi : liens sortants)
AAAA : Action de l'événement (pour moi : clics)
LLLL : Label de l'événement (pour moi : nom du site destinataire)
VVVV : Valeur de l'événement optionnel (pour moi : ticket moyen en résultant) Attention, il s'agit d'une valeur et non d'une chaine de caractères, il faut l'utiliser sans ' '

Source :
http://floriankarmen.com/web-analytics/suivi-evenement-google-analytics.html#comment-1657

Lol, je fais les questions et les réponse. Après une discution avec Florian Karmen, il s'avère que le 4ème paramètre Value "VVVV" ne doit pas comporter de ' '. Donc cette méthode fonctionne également.

Il me reste plus qu'à trouver :
- pourquoi il y a une méthode "onclick="_gaq.push(" et une autre "onclick="recordOutboundLink("
- Est ce que le timer de 100ms est utile avec "onclick="_gaq.push("?