Google Analytics, Flex – Faire des mesures statistiques dans une application Flex
L’utilisation de Google Analytics comme outil de mesure statistique pour un site s’est aujourd’hui généralisée, les articles sur ce blog en témoignent. Néanmoins, l’enjeu est de taille avec la multiplication des interfaces en Flex qui concurrencent directement le marché du “desktop”, tenu encore mais pour combien de temps par Microsoft. La prolifération des interfaces “flexibles” pourrait dépendre de 2 raisons économiques évidentes :
- La valorisation de l’audience d’un site aussi enrichie soit-il se fera avant tout sur sa capacité à pister (tracker) les comportements des utilisateurs, c’est à dire à rendre en statistiques les micro décisions qui poussent les utilisateurs/consommateurs à aller à gauche plutôt qu’à droite… Comme une vache à l’abattoir serions-nous tenter d’ajouter ! Oui, internet est un espace marchand où le comportement et son décryptage sont des valeurs en croissance constante.
- La souplesse d’un site “flexible” à s’interfacer simplement, en deux coups de code, aux API environnantes tel que Google (Maps, Analytics pour ne citer que les principales…) semble la clé du succès d’un site. Cela semble vrai que ce soit en Flex ou dans toute autre technologie. Nous avons cité naturellement Google bien que nous n’ayons pas d’actions, on pourrait tout aussi parler de Facebook, Twitter, Tumblr, Flickr… Bien que nous n’ayons là aussi pas d’actions ! Décidément, c’est à croire qu’il n’y a que des actions EADS.
Cette généralisation s’explique essentiellement par la simplicité de la mise en place du “tag” de GA. Le problème est un peu plus ardu lorsque vous devez marquer une application enrichie faite en Flex ou en Flash. Il faut en effet souvent embarqué le script et les variables javascript à l’intérieur de votre fichier .swf. Cet article va exposer simplement quelles sont les meilleurs pratiques pour marquer une application Flex par exemple. Il vous sera désormais possible de suivre à l’aide de Google Analytics ce que vos utilisateurs font à l’intérieur de votre application enrichie (RIA, Rich Internet Application).
Cet article est une introduction aux principes de mesure statistiques au sein de Flash/Flex à l’aide de Google Analytics. On va s’aider pour cela d’une API concu en AS3 mis à disposition dans la cadre du projet Google Analytics Tracking for Flash API (gaforflash)
Les exemples de cette article ont été conçus à l’aide du fichier gaforflash-1.0.1.319.zip ainqie qu’avec Flex Builder 3 dans un environnement en local sur MAMP. La vidéo qui est jouée et une vidéo en local dans MAMP, joué en http streaming.
Définition de Google Analytics Tracking For Adobe Flash (gaforflash)
This is an ActionScript 3 API for Google Analytics data collection.
Pour plus de détails sur comment créer une application sous Flex, vous pouvez vous reporter à cet article qui contient les étapes pas à pas pour créer sous Flex une application en local notamment.
Google, Flex, Buddyress et WordPress – Interfacer BuddyPress et Google Map API sous Flex
Télécharger le fichier analytics.swc
Google Analytics Tracking For Adobe Flash (gaforflash) est un projet open source. Ce projet s’est constitué pour mettre en place la mesure statistique à l’aide de GA en AS3 au sein d’une application Flex. Comme dans un article précèdent sur Flex où la encore on interfaçait une autre API google, l’API Google Maps, à l’aide d’une “librairie” .swc mis à disposition par Google.
Cette fois-ci, le fichier .swc que vous allez télécharger va vous permettre de vous connecter avec l’API de Google Analytics.
Source : http://code.google.com/p/gaforflash
Le plus simple pour inclure à votre projet sous Flex, le fichier analytics.swc. C’est de le placer dans la répertoire suivant : /Users/votre-username-sous-mac/Documents/Flex Builder 3/gaforflash-example1/libs/analytics.swc
L’API gaforflash supporte deux types d’information de tracking : les page vues (pageviews) et les événements (events). Il est souhaitable d’utiliser ces deux types d’informations.
Dans ce premier exemple, il s’agit d’utiliser de manière efficient l’information de mesure pageviews. Pour quelles raisons ?
- C’est le plus moyen de savoir comment une personne navigue à travers les écrans de votre RIA.
- La notion de
pageviewsest le principe plus utilisé dans un outil de mesure statistique comme Google Analytics ou un autre. Si vous optez pour la notion depageviewsau détriment de celle d’events, vous aurez accès à un grand nombre ressources au sien de GA.
Le numéro de votre compte chez Google Analytics
Dans nos exemples de fichiers .mxml, il s’agit d’un compte de test : account="UA-111-222"
account="UA-XXXXXXX-X" |
<?xml version="1.0" encoding="utf-8"?> <!-- The account number has to be replaced with your own account number in GA eg account="UA-XXXXXXX-X" Example 1. Embed the gaforflash component, demonstrate pageview tracking. Tested against gaforflash-1.0.1.319 --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ga4flash="com.google.analytics.components.*" addedToStage="trackInitialView()" viewSourceURL="srcview/index.html"> <ga4flash:FlexTracker id="tracker" account="UA-111-222" mode="AS3" visualDebug="true" /> <mx:Script> <![CDATA[ public function trackInitialView():void { tracker.debug.minimizedOnStart = true; tracker.trackPageview("/version1"); } ]]> </mx:Script> <mx:Accordion x="31" y="43" width="380" height="423" change="tracker.trackPageview('/pane' + String(event.newIndex+1));"> <mx:Canvas label="ENGLISH VERSION" width="100%" height="100%"> <mx:Text text="Welcome to the english RIA."/> </mx:Canvas> <mx:Canvas label="SPANISH VERSION" width="100%" height="100%"> <mx:Text text="¡Bienvenidos a la RIA en Español!"/> </mx:Canvas> <mx:Canvas label="FRENCH VERSION" width="100%" height="100%"> <mx:Text text="Bienvenue sur la version française !"/> </mx:Canvas> </mx:Accordion> </mx:Application> |
Par défaut, l’application Flex se charge sur le panneau en anglais
L’application Flex incluant gaforflash
la valeur visualDebug="true", l’application fonctionne en mode débogage. L’API
Des explications sur les variables du FlexTracker
<ga4flash:FlexTracker id="tracker" account="UA-111-222" mode="AS3" visualDebug="true" /> |
id: cette propriété permet de déclarer leFlexTrackerdans votre application Flex.account: c’est l’idou identifiant de votre compte Google Analytics. On l’obtient généralement cette valeur lors de la création d’un compte ou d’un profile au sein d’un compte GA.mode: cette variable est soit complétée avec la valeur :AS3ouBridge.Lorsque vous ne maitrisez pas l’environnement dans lequel votre RIA va être chargée, il est préférable de mettre la valeur
AS3. Ainsi, si votre application doit être diffusé sur une plate-forme qui n’est pas la votre via un widget par exemple, c’est la type de configuration qu’il faut définir.Pour le mode
Bridgen c’est lorsque les pages dans lesquelles vont se charger votre application contiennent un script de mesure Google Analytics. Une remarque, le modeBridges’exécute à l’aide de la class ExternalInterface, il est donc important que le paramètreallowScriptAccesssoit correctement défini.visualDebug: cette propriété permet de faire fonctionner l’API gatorflash en mode débogage. Si le mode est défini surtrue, aucun des événements ne sera envoyé vers les serveurs de GA, toutes les données seront disponibles dans la fenêtre de débogage.
Sur le paramètre mode, il y a plus d’information disponible sur le site de gaforflash
La mesure statistique des événements (Event)
Là encore, dans cette exemple de fichier .mxml, il s’agit d’un compte de test : account="UA-111-222", vous pouvez le remplacer par votre propre compte GA. On va aussi de charger une vidéo :
- C’est une vidéo jouée en local depuis le serveur MAMP en http streaming nommé chevaux.flv. La valeur dans le
.mxmlest la suivantevideo.source = "http://127.0.0.1/Flex/chevaux.flv";.
account="UA-XXXXXXX-X" |
Cette valeur initialise la mesure statistique de Google Analytics. Pour cette valeur, les paramètres passés sont les suivants : le premier paramètre du constructeur correspond dans l’exemple à la mx:Application, ensuite on retrouve les paramètres précédents account, mode, visualDebug
tracker = new GATracker(this, "UA-111-222", "AS3", true);
la valeur visualDebug="true", l’application fonctionne en mode débogage. L’API
Le code de l’exemple 2
<?xml version="1.0" encoding="utf-8"?> <!-- Example 2. Use gaforflash's classes, demonstrate event tracking. Tested against gaforflash-1.0.1.319 --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" addedToStage="initExample2()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.events.MetadataEvent; import mx.controls.Button; import mx.events.VideoEvent; import mx.controls.VideoDisplay; import mx.containers.Panel; import com.google.analytics.GATracker; private var tracker:GATracker; private var readyTime:Number; private var video:VideoDisplay; public function initExample2():void { tracker = new GATracker(this, "UA-111-222", "AS3", true); //build video UI var panel:Panel = new Panel(); panel.title = "Example 2"; panel.setStyle("horizontalAlign", "center"); panel.x = 20; panel.y = 40; panel.width = 545; panel.height = 372; this.addChild(panel); video = new VideoDisplay(); video.autoPlay = true; video.width = 525; video.height = 300; video.autoRewind = false; video.addEventListener(VideoEvent.READY, handleReady); video.addEventListener(VideoEvent.COMPLETE, handleComplete); panel.addChild(video); var button:Button = new Button(); button.label = "Pause"; button.addEventListener(MouseEvent.CLICK, handlePause); panel.addChild(button); readyTime = new Date().time; // video.source = "http://farm.sproutbuilder.com/asset/JwDKrdjrDnJcRVxp.flv"; /* DEMO VIDEO ON LOCAL SERVER ON MAMP */ video.source = "http://127.0.0.1/Flex/chevaux.flv"; } public function handleReady(event:Event):void { // calculate time (in milliseconds) in which // the video was ready to play readyTime = new Date().time - readyTime; /* evenement_1 */ tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime); } public function handleComplete(event:Event):void { /* evenement_2 */ tracker.trackEvent("Videos", "Completed", "Video1"); } public function handlePause(event:MouseEvent):void { var button:Button = event.target as Button; if (button.label == "Pause") { video.stop(); button.label = "Resume"; /* evenement_3 */ tracker.trackEvent("Videos", "Paused", "Video1"); } else { video.play(); button.label = "Pause"; /* evenement_4 */ tracker.trackEvent("Videos", "Resumed", "Video1"); } } ]]> </mx:Script> </mx:Application> |
Cette exemple piste 4 événements : evenement_1, evenement_2, evenement_3, evenement_4
evenement_1=> Un événement est envoyé lorsque le moment où la vidéo est en chargement et sur le point d’être jouée.evenement_2=> Un événement est envoyé lorsque la vidéo est intégralement jouée.evenement_3=> Un événement est envoyé lorsque la vidéo est en pause.evenement_4=> Un événement est envoyé lorsque la vidéo reprend.
Les paramètres de la méthode GATracker.trackEvent
C’est cette méthode qui permet d’envoyer des événements qui seront enregistrées dans GA. En détaillant la ligne de code ci-dessous, on va dresser une liste définissant les 4 paramètres de cette méthode.
tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime);
category: une chaîne de caractères (string) représentant un groupe d’événements. Dans notre exemple lacategoryestVideosaction: une chaîne de caractères (string) souvent combinée avec une catégorie permet de signaler des actions. Dans notre exemple, l’événement se nommeReadyTimelabel: une chaîne de caractères, c’est une valeur optionnel qui permet de passer une information additionnelle sur la combinaisoncategory/action. Il s’agit de préciser que c’est laVideo1si par exemple votre application comporte imaginons 5 Vidéos numérotés comme suit : Video1, Video2…. Video5value: un nombre non négatif, c’est une valeur optionnel qui associe une valeur numérique à un événement mesuré.
Retrouver ces événements dans le tableau de bord de Google Analytics
Tous ces evements sont envoyés à Google Analytics. Il est donc possible de les retrouver dans la tableau de Bord de GA. La correspondance se fait comme suit :
evenement_1 s'enregistre dans le tableau de bord de Google Analytics sous le nom "ReadyTime"
evenement_2 s'enregistre dans le tableau de bord de Google Analytics sous le nom "Completed"
evenement_3 s'enregistre dans le tableau de bord de Google Analytics sous le nom "Paused"
evenement_4 s'enregistre dans le tableau de bord de Google Analytics sous le nom "Resumed"
Conclusion
Il est évident que Google Analytics Tracking for Flash offre des capacités de tracking infinies dans une RIA faite en Flex. En utilisant le concept de page vue (pageview) ne modifie en rien les bonnes pratiques liés à l’utilisation que vous en faites déjà sur un site “classique”.
- L’utilisation de la notion de
pageviewvous permettra de mieux voir le trafic d’un point de vue quantitatif de vos utilisateurs. - L’utilisation de la notion de
eventvous permettra de mieux comprendre la manière dont vos utilisateurs réagissent à vos interfaces Flex. C’est donc complément qualitatif, riche d’enseignements, pour comprendre la perception que vos utilisateurs ont de vos interfaces.
Pour aller plus loin
- Comment mesurer statistiquement des événements au sein de Flash ? (How do I track Flash events?)
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55520 - Mettre en place Google Analytics en utilisant gaforflash Google Analytics within Flex/Flash Applications – InsideRIA
Cette article est très, trop largement inspiré de cette excellent article en anglais.
http://www.insideria.com/2009/02/using-google-analytics-within.html - La mesure statistique au sein d’Adobe Flash à l’aide de Google Analytics Tracking (Google Analytics Tracking for Adobe Flash)
http://code.google.com/intl/fr/apis/analytics/docs/tracking/flashTrackingIntro.html - Mise en place de la mesure statistique pour Adobe Flash
http://code.google.com/intl/fr/apis/analytics/docs/tracking/flashTrackingSetupFlash.html - Mise en place de la mesure statistique pour Adobe Flex
http://code.google.com/intl/fr/apis/analytics/docs/tracking/flashTrackingSetupFlex.html
