Tracking de la navigation et des actions en Flex avec 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.

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 :

        <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 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 :

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

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

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.

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 ExternalInterfaceExternalInterface pour transmettre la transaction et les articles vendus dans la fonction Wrapper :

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

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

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