Tracking de la navigation et des actions en Flex avec Google Analytics

Julien Lestel

Faire fonctionner Google Analytics avec une application Adobe Flex est à première vue impossible. Je vais donc vous montrer la démarche si vous désirez utiliser Google Analytics dans vos applications Flex pour un tracking complet des visites. ?

- Titre : Tracking de la navigation et des actions en Flex avec Google Analytics

- Auteur : Julien Lestel

- Parution : 8 décembre 2007

- Licence : Copyright ® 2007 Julien Lestel - Ingénieur en Nouvelles Technologies. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Tracking de la Navigation et des Actions en Flex

- II-A. Créer un compte Google Analytics

- II-B. Modifier le HTML Wrapper

- III. Tracking e-commerce en Flex

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

- III-B. Modifier le Html Wrapper

- IV. Conclusion

I - Introduction

L'analyse de la navigation 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/

Logo Flex

Logo Google Analytics

Je construis des applications Flex comme des sites Web. L'analyse de la navigation est tout aussi importante sur un site en Flex. Cependant, Google Analytics est fait pour fonctionner sur des sites traditionnels 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éez votre compte ou identifiez-vous.

2. Créez un nouveau profil de site Web ou à partir d'un profil existant : récupérez votre account id.

3. À 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 mets 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

<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(); //appelée quand la page est appelée
</script>

Maintenant, vous voulez en connaître plus sur la navigation de vos visiteurs dans votre application Flex. Pour cela, il faut utiliser une ExternalInterface 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

/** 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

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

Le résultat est très intéressant puisque toute la navigation 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

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

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

Log de la commande avec Google Analytics

/* 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

// 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 délimiteurs « | », 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 visibles dans les rapports Google Analytics. Il suffit d'être patient :)

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

IV - Conclusion

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