{"id":909,"date":"2010-04-23T20:00:55","date_gmt":"2010-04-23T18:00:55","guid":{"rendered":"https:\/\/juliencoquet.com\/?p=909"},"modified":"2010-04-26T14:51:26","modified_gmt":"2010-04-26T12:51:26","slug":"utilisation-du-code-asynchrone-google-analytics-dans-flash","status":"publish","type":"post","link":"https:\/\/juliencoquet.com\/fr\/2010\/04\/23\/utilisation-du-code-asynchrone-google-analytics-dans-flash\/","title":{"rendered":"Utilisation du code asynchrone Google Analytics dans Flash"},"content":{"rendered":"

Si vous avez suivi le conseil de Google, vous aurez sans doute essay\u00e9 d’utiliser le nouveau code de suivi asynchrone<\/strong> pour ga.js<\/em>, et vous aurez eu raison car, il faut bien le dire, ca d\u00e9coiffe \ud83d\ude09<\/p>\n

Vous verrez que l’utilisation de ce code asynchrone place les requ\u00eates de suivi dans une file d’attente (l’objet _gaq<\/em>) avant de les envoyer \u00e0 Google Analytics d\u00e8s que ce dernier est plus dispos\u00e9 \u00e0 les recevoir. Ceci a pour effet d‘acc\u00e9l\u00e9rer le chargement de la page<\/strong> (et donc am\u00e9liorer votre r\u00e9f\u00e9rencement) tout en \u00e9vitant de perturber l’exp\u00e9rience utilisateur pour vos internautes.<\/p>\n

Cela dit, d\u00e8s que votre site incorpore du Flash dont vous d\u00e9sirez mesurer le comportement avec Google Analytics, tout en conservant le b\u00e9n\u00e9fice du code asynchrone pour la partie HTML de la page, \u00e7\u00e0 coince!<\/strong><\/p>\n

Cet article assez technique<\/strong><\/em> (interdit aux Kevins) vous expliquera comment continuer \u00e0 traquer les interactions dans une animation Flash dans Google Analytics alors que le code de suivi asynchrone est en place.<\/p>\n


\nUn rappel des bases sur le code asynchrone<\/strong><\/p>\n

Pour rappel, voici \u00e0 quoi ressemble le code de suivi asynchrone Google Analytics:<\/p>\n

<script type=\"text\/javascript\">
\nvar _gaq = _gaq || [];
\n_gaq.push(
\n['_setAccount', 'UA-123456-1'],
\n['_trackPageview']
\n);<\/p>\n

(function() {
\nvar ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true;
\nga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'https:\/\/www') + '.google-analytics.com\/ga.js';
\nvar s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
\n})();
\n<\/script><\/code><\/p>\n

Vous aurez remarqu\u00e9 que la fonction push()<\/code> envoie toutes les instructions de suivi vers la file d’attente.<\/p>\n

Jusque l\u00e0, tout va bien.<\/p>\n

Passage de param\u00e8tres avanc\u00e9s<\/strong><\/p>\n

Vous aurez \u00e9galement remarqu\u00e9 que la cha\u00eene de param\u00e8tres pass\u00e9s \u00e0 GA prend la forme suivante:<\/p>\n

[fonction, param\u00e8tres]<\/code><\/p>\n

Ce qui donne bien entendu:<\/p>\n

['_setAccount', 'UA-123456-1'],
\n['_setDomainName', '.juliencoquet.com'],
\n['_trackEvent', 'Fiche Produit','Ajout au panier','Chaussures taille 42', 2],
\n['_setCustomVar', 1,'Numero_Client','12345678',1]<\/code><\/p>\n

Jusque l\u00e0, tout va toujours bien.<\/p>\n

Oui mais Flash dans tout \u00e7\u00e0?<\/strong><\/p>\n

En revanche, d\u00e8s que nous faisons appel \u00e0 de l’ActionScript dans Flash, vous devez passer par l’objet ExternalInterface<\/code> pour interagir avec l’\u00e9l\u00e9ment contenant le Flash – dans notre cas, une page HTML. Oui, je sais, vous n’aurez pas le probl\u00e8me avec la fonction getURL()<\/code> mais il se trouve que cette fonction est d\u00e9pr\u00e9ci\u00e9e<\/em> (obsol\u00e8te).<\/p>\n

La logique voudrait que vous puissiez passer vos param\u00e8tres asynchrones \u00e0 push()<\/code> depuis ExternalInterface<\/code> comme ceci:<\/p>\n

ExternalInterface.call(\"_gaq.push\",\"_trackPageview\",\"\/page1.html\");<\/code><\/p>\n

Malheureusement, la m\u00e9thode call<\/code> n’accepte que 2 param\u00e8tres \ud83d\ude41<\/p>\n

La solution? Ruser!<\/strong><\/p>\n

Il vous faudra passer par une fonction ‘wrapper’ Javascript dans la page HTML qui convertira les param\u00e8tres \u00e0 passer \u00e0 push<\/code>.<\/p>\n

L’exemple ci-dessous permet d’envoyer la commande _trackPageview<\/code> vers la file d’attente.<\/p>\n

Javascript :<\/em><\/p>\n

function pushPageview(url){
\n_gaq.push(['_trackPageview',url]);
\n} <\/code><\/p>\n

ActionScript dans Flash :<\/em><\/p>\n

ExternalInterface.call(\"pushPageview\",\"\/etape1\");<\/code><\/p>\n

L’appel \u00e0 cette fonction pushPageview donnera l’\u00e9quivalent du code suivant :<\/p>\n

_gaq.push(['_trackPageview','\/etape1']);<\/code><\/p>\n

Vous vous doutez bien qu’on peut enrichir ce type de fonction pour g\u00e9rer tout type de requ\u00eate Google Analytics:<\/p>\n

function pushCustom(parametres){
\nvar p = parametres.split('|');
\nswitch (p[0]) {
\ncase '_trackPageview':
\n_gaq.push(['_trackPageview',p[1]]); break;
\ncase '_trackEvent':
\n_gaq.push(['_trackEvent','\"'+p[1]+'\"','\"'+p[2]+'\"','\"'+p[3]+'\"',parseInt(p[4])]); break;
\ncase '_setCustomVar':
\n_gaq.push(['_setCustomVar', p[1],p[2],p[3],p[4]]); break;
\n}
\n}<\/code><\/p>\n

\"\"<\/a>Cliquez sur l’image pour agrandir<\/p>\n

Donc l’\u00e9quivalent du code asynchrone suivant<\/p>\n

['_setCustomVar', 1,'Numero_Client','12345678',1]<\/code><\/p>\n

pourra \u00eatre pass\u00e9 dans Flash ainsi:<\/p>\n

ExternalInterface.call(\"pushCustom\",\"_setCustomVar|1|Numero_Client|12345678|1\");<\/code><\/p>\n

Attention donc aux caract\u00e8res sp\u00e9ciaux que vous devrez \u00ab\u00a0\u00e9chapper\u00a0\u00bb!<\/p>\n

En conclusion<\/strong><\/p>\n

Aidez vous d’un d\u00e9bugger comme Firebug ou Charles pour venir \u00e0 bout de cet exercice \ud83d\ude09<\/p>\n

Le code ci-dessus n’est pas garanti ni exhaustif et plusieurs cas de figure sont encore possible:<\/p>\n