I. Introduction

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 fournit 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/Google Analytics
Logo FlexLogo Google Analytics

Je contruis des applications Flex comme des sites Web. L'analyse de la naviguation est tout aussi importante sur un site en 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 application 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.

II. Tracking de la Navigation et des Actions en Flex

II-A. Créer un compte Google Analytics

  1. Créer votre compte ou identifiez-vous.
  2. Créer un nouveau profil de site Web ou à partir d'un profil existant : récupérer votre account id.
  3. A la fin du processus, vous voyez un bloc de JavaScript. C'est lui qui doit être copié pour être inséré dans le HTML Wrapper de votre application Flex.

II-B. Modifier le HTML Wrapper

Si vous laissez Flex Builder générer le "Wrapper", vous pouvez le modifier dans le fichier "index.template.html", sinon il faut juste aller dans le Wrapper HTML. Copier et coller tout le bloc de JavaScript dans le HTML Wrapper. Je met le mien juste sous la définition des styles et au-dessus du bloc qui définit 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 :

Exemple Suivi Analytics Javascript
Sélectionnez

	    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
	    <script type="text/javascript">
	        _uacct = "UA-xxxxxxx-x"; //==> 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 visiteurs dans votre application Flex. Pour cela, il faut utiliser une ExternalInterfaceExternalInterface dans Flex pour appeler la fonction "urchinTracker()", mais en lui passant un argument... Cet argument est une URL.
J'ai implémenté une méthode publique dans le Main de mon application Flex:

Implémentation de ExternalInterface pour Google Analytics en Flex
Sélectionnez

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

Dans tous les composants de l'application, on peut appeler la méthode :

Log du visiteur avec Google Analytics
Sélectionnez

	_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.

III. Tracking e-commerce en Flex

Google analytics vous permet aussi de tracker les ventes réalisées via votre application. Google utilise une fois de plus des termes étranges comme "submit form" et "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.

III-A. Configurer GA pour le Tracking e-commerce

  1. Loggez-vous avec votre compte Google.
  2. Cliquez sur éditer sur le profile qui réalise des ventes en ligne.
  3. Sur la page de configuration, cliquez sur éditer à côté de Website Profile Information.
  4. Changez le bouton radio de e-commerce Website de Non à Oui.

III-B. 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 :

Exemple de formulaire de transaction
Sélectionnez

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

Ensuite, on utilise encore ExternalInterfaceExternalInterface pour transmettre la transaction et et les articles vendus dans la fonction Wrapper :

Log de la commande avec Google Analytics
Sélectionnez

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

Vous voyez que la fonction prend la vente effectuée et met les informations dans un formulaire caché. Ensuite, elle appelle la fonction "__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 :

Formulaire de e-commerce pour Google Analytics
Sélectionnez

// en-tête de la transaction
UTM:T|[order-id]|[affiliation]|[total]|[tax]|[shipping]|[city]|[state]|[country] 
// lignes des articles de la transaction
UTM:I|[order-id]|[sku/code]|[productname]|[category]|[price]|[quantity]
UTM:I|[order-id]|[sku/code]|[productname]|[category]|[price]|[quantity]
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.

Cela prend environ 12 à 24 heures pour que les données soient visiblent dans les rapports Google Analytics. Il suffit d'être patient :)

Vous pouvez aller voir l'aide Google AnalyticsAide Google Analytics pour plus d'informations.

VII. Conclusion

En conclusion, il est donc possible de lier vos pages Flex à Google Analytics pour observer le traffic des visiteurs de votre application Flex. tous les accesseurs pour utiliser nos bases MySql directement dans Flex 3.

VIII. Remerciements

Merci ... aux relecteurs d'avoir lu cet article !