Utilisation du code asynchrone Google Analytics dans Flash

Si vous avez suivi le conseil de Google, vous aurez sans doute essayé d’utiliser le nouveau code de suivi asynchrone pour ga.js, et vous aurez eu raison car, il faut bien le dire, ca décoiffe 😉

Vous verrez que l’utilisation de ce code asynchrone place les requêtes de suivi dans une file d’attente (l’objet _gaq) avant de les envoyer à Google Analytics dès que ce dernier est plus disposé à les recevoir. Ceci a pour effet d‘accélérer le chargement de la page (et donc améliorer votre référencement) tout en évitant de perturber l’expérience utilisateur pour vos internautes.

Cela dit, dès que votre site incorpore du Flash dont vous désirez mesurer le comportement avec Google Analytics, tout en conservant le bénéfice du code asynchrone pour la partie HTML de la page, çà coince!

Cet article assez technique (interdit aux Kevins) vous expliquera comment continuer à traquer les interactions dans une animation Flash dans Google Analytics alors que le code de suivi asynchrone est en place.

Un rappel des bases sur le code asynchrone

Pour rappel, voici à quoi ressemble le code de suivi asynchrone Google Analytics:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-123456-1'],
['_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);
})();
</script>

Vous aurez remarqué que la fonction push() envoie toutes les instructions de suivi vers la file d’attente.

Jusque là, tout va bien.

Passage de paramètres avancés

Vous aurez également remarqué que la chaîne de paramètres passés à GA prend la forme suivante:

[fonction, paramètres]

Ce qui donne bien entendu:

['_setAccount', 'UA-123456-1'],
['_setDomainName', '.juliencoquet.com'],
['_trackEvent', 'Fiche Produit','Ajout au panier','Chaussures taille 42', 2],
['_setCustomVar', 1,'Numero_Client','12345678',1]

Jusque là, tout va toujours bien.

Oui mais Flash dans tout çà?

En revanche, dès que nous faisons appel à de l’ActionScript dans Flash, vous devez passer par l’objet ExternalInterface pour interagir avec l’élément contenant le Flash – dans notre cas, une page HTML. Oui, je sais, vous n’aurez pas le problème avec la fonction getURL() mais il se trouve que cette fonction est dépréciée (obsolète).

La logique voudrait que vous puissiez passer vos paramètres asynchrones à push() depuis ExternalInterface comme ceci:

ExternalInterface.call("_gaq.push","_trackPageview","/page1.html");

Malheureusement, la méthode call n’accepte que 2 paramètres 🙁

La solution? Ruser!

Il vous faudra passer par une fonction ‘wrapper’ Javascript dans la page HTML qui convertira les paramètres à passer à push.

L’exemple ci-dessous permet d’envoyer la commande _trackPageview vers la file d’attente.

Javascript :

function pushPageview(url){
_gaq.push(['_trackPageview',url]);
}

ActionScript dans Flash :

ExternalInterface.call("pushPageview","/etape1");

L’appel à cette fonction pushPageview donnera l’équivalent du code suivant :

_gaq.push(['_trackPageview','/etape1']);

Vous vous doutez bien qu’on peut enrichir ce type de fonction pour gérer tout type de requête Google Analytics:

function pushCustom(parametres){
var p = parametres.split('|');
switch (p[0]) {
case '_trackPageview':
_gaq.push(['_trackPageview',p[1]]); break;
case '_trackEvent':
_gaq.push(['_trackEvent','"'+p[1]+'"','"'+p[2]+'"','"'+p[3]+'"',parseInt(p[4])]); break;
case '_setCustomVar':
_gaq.push(['_setCustomVar', p[1],p[2],p[3],p[4]]); break;
}
}

Cliquez sur l’image pour agrandir

Donc l’équivalent du code asynchrone suivant

['_setCustomVar', 1,'Numero_Client','12345678',1]

pourra être passé dans Flash ainsi:

ExternalInterface.call("pushCustom","_setCustomVar|1|Numero_Client|12345678|1");

Attention donc aux caractères spéciaux que vous devrez « échapper »!

En conclusion

Aidez vous d’un débugger comme Firebug ou Charles pour venir à bout de cet exercice 😉

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

• Utilisation de trackers multiples
• Utilisation de _getCustomVar pour récupérer une valeur existante

Amusez vous bien et n’hésitez pas à me poser vos questions via vos commentaires constructifs! 🙂