L’analyse de la naviguation des utilisateurs et de leurs actions sur un site Internet est souvent indispensable pour améliorer un service. La plupart des sites Web utilisent cela. Si vous ne l’utilisez pas, Google fourni un service appelé Google Analytics (GA), qui permet de suivre les visiteurs de manière très simple. Vous pouvez en savoir plus et créer un compte ici : http://www.google.com/analytics/

&

Je contruis des applications Flex et l’analyse de la naviguation est tout aussi importante sur une appli Flex. Cependant, Google Analytics est fait pour fonctionner sur des sites traditionnel HTML, avec plein de termes barbares comme “body onLoad” et d’autres. Donc, faire fonctionner Analytics avec une appli Flex n’était pas possible à première vue, je vais donc vous montrer la marche à suivre si vous désirez utiliser Google Analytics dans Flex.
Tracking de la Navigation et des Actions en Flex :

1: Créer votre compte, un nouveau profil, et récupérer votre account id.
C’est très simple. A la fin du processus, vous voyez un bloc de JavaScript qui doit être mis dans le HTML Wrapper de votre application Flex.

2: Modifier le HTML Wrapper:
Si vous laissez Flex Builder généer le “Wrapper”, vous pouvez le modifier dans le fichier “index.template.html”, sinon il faut juste aller dans le Wrapper HTML. Coper et coller tout le bloc de JavaScriptdans le HTML Wrapper. Je met le mien juste sous la définition des styles et au dessus du bloc qui déifni les variables Globales. Le premier tag fait l’include du fichier JS, les tags suivants initialisent l’account id, et invoquent la fonction “urchinTracker()”, qui permet à Google de sauvegarder les visites avec Google Analytics. Le bloc de JavaScript ressemble à cela :

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>
<script type=”text/javascript”>
_uacct = “UA-xxxxxxx-x”; //c’est votre account Id
urchinTracker(); //appellée quand la page est appellée
</script>

Maintenant, vous voulez en connaître plus sur la naviguation de vos visuteurs dans votre appli Flex. Pour cela, il faut utiliser une ExternalInterface dans Flex pour appeler la fonction “urchinTracker()”, mais en lui passant un argument… Cet argument ressemble à une URL. Dans mon cas, cela n’est pas un problème, depuis que la naviguation est représentée par un form:

/ApplicationName/MainNav/SubNav/OptionalAction.

J’ai implémenté une méthode publique dans le Main de mon appli Flex:

/** envoie l’usageID à GoogleAnalytics */
public function logUsage(sUsageId:String):void
{
ExternalInterface.call(”urchinTracker”,sUsageId);
}

Aux points de naviguation et dans les sous-applications si on le désire, on appelle la méthode :

_app.logUsage(”/” + _sAppName + “/SubAppName[/Action]” );

Le résultat est très intéressant puisque toute la naviguation des visiteurs dans mon application est enregistrée par Google Analytics. Google Analytics possède beaucoup de filtres et d’outils d’analyse pour pouvoir analyser les visites de votre application.

Tracking Ecommerce en Flex:

Google analytics vous permet aussi de tracker les ventes réalisées via votre application. Google utilise une fois de plus de termes étranges comme “submit form” and “receipt page”, que nous ne connaissons pas en Flex.
Mais si votre site Flex vend en ligne, c’est facile d’enregistrer les commandes dans GA.

1: Configurer GA pour le Tracking Ecommerce :
Logger vous avec votre compte.
Cliquez sur Editer sur le profile qui réalise des ventes en ligne.
Sur la page de configuration, cliquez sur editer à côté de Website Profile Information.
Changez le boutton radio de E-Commerce Website de Non à Oui.

2: Modifier le Html Wrapper:

Cela fonctionne en plaçant les données des transactions de vos ventes dans un formulaire caché dans le HTML Wrapper. Ce formulaire invisible doit être placé juste avant la fermeture du tag body. Voilà ce que ça donne, vous pouvez copier cela exactement :

<form style=”display:none;” name=”utmform”>
<textarea id=”utmtrans”></textarea>
</form>

Ensuite, on utilise encore ExternalInterface pour transmettre la transaction and et les produits commandés dans la fonction Wrapper :

/* appellé par ExternalInterface */
function logTransaction(sTransInfo)
{
document.getElementById(’utmtrans’).innerHTML = sTransInfo;
__utmSetTrans();
}

Vous voyez que la fonction prend la vente effectuée et mets les infos dans un formulaire caché. Ensuite, elle appelle la focntion “__utmSetTrans”, qui lit les valeurs du formulaire caché et les envoie à Google Analytics. La chaîne de caractères représentant la transaction est formatée et possède la forme suivante :

UTM:T|[order-id]|[affiliation]|[total]|[tax]|[shipping]|[city]|[state]|[country] UTM:I|[order-id]|[sku/code]|[productname]|[category]|[price]|[quantity]

Cela fonctionne grâce aux délimiteurs, “UTM” et “|”, les espaces et lignes vides ne sont pas pris en compte.Construisez maintenant cette chaîne dans votre page de panier comme vous le voulez.Vous pouvez avoir plusieurs articles (UTM:I) dans votre transaction.. Je pense que seul l’order-id est requis mais il faut tout de même inclure tous les delimiteurs “|”, même s’il n’y a pas de données entre eux.

Note : Cela prend environ 12 à 24 heures pour que les données soient visiblent dans les rapports Google Analytics. Il faut juste être patient.

Vous pouvez aller voir l’aide GA pour plus d’infos.

En utilisant le Javascript, votre appli n’est pas modifiée, et n’avez pas à vous en faire concernant les problèmes de crossdomain, etc…

J’espère que cet article vous a été utile !

N'oubliez pas que vous pouvez vous abonner à mon Twitter http://twitter.com/flexinfo ou au flux RSS ;)