<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

Comment ajouter Google Analytics dans Flash en AS3 ?

6 questions

Écrit le 24 octobre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Mots clés : , , , , , , , , ,

Le Kit du Développeur Flash

Nous allons découvrir comment effectuer des mesures statistiques avec les applications Flash .

Cet article est consacré à l’implémentation de Google Analytics dans vos RIA Flash en AS3.

Qu’est ce que GA For Flash ?

Une API a été conçu en AS3 par Nickski15, Zwetan et Ekameleon. Ils ont développé cette API et l’ont mis à disposition, en Open Source, via le projet Google Analytics Tracking for Flash API (gaforflash).

Google Analytics vous permet d’analyser le traffic de votre RIA Flash pour :

  • visualiser les pages vues (interfaces AS3) et leur nombre d’affichage.
  • tracer des actions et des évènements.

Installation de Google Analytics

Pour implémenter GA (Google Analytics), il suffit de télécharger la dernière version sur le site Google Code. Vous pouvez télécharger :

  • soit le fichier .SWC gaforflash-1.0.1.319.zip. Je vous conseille de télécharger le fichier SWC, c’est plus simple à utiliser dans vos projets AS3.
  • soit le code source complet via le SVN Google Code. Lien du SVN : http://gaforflash.googlecode.com/svn/trunk/

Ensuite, vous ajoutez le fichier analytics_flash.swc dans votre application AS3 avec votre Éditeur ActionScript habituel.

Avec l’Éditeur FDT, c’est très simple. J’ai rédigé un Guide gratuit pour Développer efficacement et rapidement en ActionScript.

Utilisation de GA en AS3

Reprenons l’exemple du Chapitre : Création des Graphismes / Skins des Composants AS3 pour ajouter le Tracking Google Analytics en AS3.

Création du Tracker

Juste avant la création de votre interface Flash, vous devez initialiser le Tracker.

/**
 * Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug
 * Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js
 *
 */
var tracker : GATracker = new GATracker( this, "UA-983969-6", "AS3", true );

Les différents paramètres à renseigner :

  • Id : cette propriété permet de déclarer le Tracker dans votre application Flash.
  • Account : c’est l’identifiant de votre compte Google Analytics. Un numéro du type UA-944069-6.
  • Mode : cette valeur est renseignée par AS3 ou Bridge.

Le mode AS3 est utilisé lorsque vous ne contrôlez pas les pages HTML dans lesquelles votre RIA est incluse (par exemple les widgets affichés sur myspace, facebook…), ou s’il n’y a pas de suivi Google Analytics activé.

Dans la majorité des RIA Flash, le mode AS3 est utilisé.

Le mode Bridge est utilisé lorsque votre RIA est intégré dans une page Web qui contient un script de mesure Google Analytics. Ce mode est utilisé avec la classe ExternalInterface, il est donc important que le paramètre allowScriptAccess soit correctement défini (“always” ou “sameDomain”).

  • Debug : cette propriété active le débug avec l’API gaforflash. Si le Débug est défini sur true, toutes les données sont affichées dans une fenêtre de débogage.

Ensuite, en fonction de votre application Flash, Google Analytics peut :

  • tracker les pages vues (interfaces AS3) et leur nombre d’affichage.
  • tracker des actions ou des évènements.

Suivi des pages vues

Pour suivre les interfaces affichées dans votre RIA, une seule ligne de code est nécessaire. Renseignez le nom de l’interface et son nombre d’affichage sera comptabilisé dans Google Analytics.

// Ce paramètre permet de traquer le nom de la page affichée ou d'une action
if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ;

Par exemple, à chaque fois que votre application Flash est affichée, vous pouvez ajouter un trackPageview. Ou lorsqu’une interface précise est sélectionnée par l’utilisateur.

Suivi des évènements

Vous pouvez également suivre le cheminement complet de l’utilisateur dans votre RIA Flash. Cela permet d’envoyer des événements qui seront enregistrés dans GA.

Voici les 4 paramètres à définir :

  • category : le nom du groupe d’événements. Dans notre exemple la category est AS3 Facile GA.
  • action : le nom de l’action effectuée, cette action est associée avec une catégorie. Dans notre exemple, l’événement se nomme par le nom du Button choisit par l’utilisateur (Arc en Ciel Liste).

 

  • label : un nom optionnel pour donner des informations supplémentaires sur la combinaison category / action. Dans une liste d’éléments de votre interface, vous pouvez préciser le type d’élément (un Button). Ou dans une playlist vidéo, vous précisez le numéro de la vidéo.

 

  • value : un nombre non négatif, c’est une valeur optionnel qui associe un canal (ou channel)  à un événement mesuré.
/**
 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
 *
 * category: le nom du groupe d'évènements.
 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
 *
 */
// l'utilisateur appuie sur le Button 'Arc en Ciel'
if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button");
 
// ou l'utilisateur modifie la police de caractère utilisée dans la ComboBox
if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox");

Très facilement, vous pouvez tracker toutes les actions de l’utilisateur de votre RIA Flash :

  • l’appuie sur tel ou tel élément de l’interface pour lancer un nouvel écran, ouvrir une page Web…
  • lorsque l’utilisateur télécharge des fichiers pdf, zip…
  • lorsque l’utilisateur visualise une vidéo, écoute un podcast, un MP3…

Tableau de Bord Google Analytics

Une fois votre application Flash paramétrée, vous pouvez visualiser les différentes statistiques dans votre Tableau de Bord Google Analytics.

Pour visualiser les statistiques sur les pages vues (interface AS3) et leurs nombre d’affichage, allez dans Contenu et Pages les plus consultées.

Google Analytics - Suivi des Pages

Pour visualiser les évènements ou actions de l’utilisateur, allez dans Suivi des évènements. Ensuite, vous pouvez choisir Catégories, Actions, Libellés

Google Analytics - Suivi des évènements

Google Analytics - Détails des évènements

Conclusion

Google Analytics Tracking for Flash offre des capacités de tracking infinies dans une RIA Flash en AS3.

  • L’utilisation de trackPageview vous permet de mesurer le trafic de votre application Flash dans ses moindres détails.
  • L’utilisation de trackEvent vous permet de mieux comprendre la manière dont vos utilisateurs réagissent à vos interfaces Flash.

gaforflash est donc un complément très intéressant pour comprendre les actions de vos utilisateurs dans vos interfaces AS3.

Ci-dessous, voici notre application Flash avec l’implémentation de Google Analytics.

Appuyez sur la touche “ESPACE” de votre clavier pour faire disparaitre / apparaitre la fenêtre de Debug GA.

https://www.actionscript-facile.com/wp-content/uploads/2010/10/google_analytics_exemple.swf

Sources Commentées

  • GoogleAnalyticsExample.as
package
{
	import com.google.analytics.GATracker;
 
	import flash.events.MouseEvent;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;
 
	import com.as3facileexemple.skin.classic.DefaultListSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin2;
	import com.as3facileexemple.skin.classic.DefaultListSkin2;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;
 
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;
 
	/**
	 * Mise à jour en live des Skin Graphismes des Composants du Framework AS3 ActionScript-Facile
         * Implémentation de Google Analytics
	 *
	 * @author Matthieu
	 */
	public class GoogleAnalyticsExample extends Sprite
	{
 
		protected var m_comboFonts:ComboBox;
		protected var m_list:List;
		protected var m_textField:UITextField;
		private var tracker : GATracker;
 
		public function GoogleAnalyticsExample()
		{
			addTracker();
 
			/**
			 * On construit les boutons
			 */
			var buttonHide:Button = new Button();
 
			// définition du texte
			buttonHide.label = 'Arc en Ciel Liste';
 
			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			buttonHide.applySkin( new DefaultButtonSkin() );
 
			// on écoute les changements qui interviennent sur le bouton
			buttonHide.addEventListener(MouseEvent.CLICK, changeSkinList );
 
			// ajout à la displaylist
			addChild( buttonHide );
 
			// définition de sa taille en 150 * 30 pixels
			buttonHide.resize( 150, 30 );
 
			// définition de la position du button sur la scène
			buttonHide.x = 10;
			buttonHide.y = 220;
 
			// acccès au composant de type UITextField (labelField)
			buttonHide.labelField.alignCenter(); // centre le texte
			buttonHide.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
			buttonHide.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonHide.labelField.changeFormat("font", "Arial");// changement de la police du texte
 
			var buttonShow:Button = new Button();
 
			// définition du texte
			buttonShow.label = 'Classique Liste';
 
			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			buttonShow.applySkin( new DefaultButtonSkin2() );
 
			// on écoute les changements qui interviennent sur le bouton
			buttonShow.addEventListener(MouseEvent.CLICK, changeSkinList2 );
 
			// ajout à la displaylist
			addChild( buttonShow );
 
			// définition de sa taille en 150 * 30 pixels
			buttonShow.resize( 150, 30 );
 
			// définition de la position du button sur la scène
			buttonShow.x = buttonHide.x;
			buttonShow.y = buttonHide.y + buttonShow.height + 10;
 
			// acccès au composant de type UITextField (labelField)
			buttonShow.labelField.alignCenter(); // centre le texte
			buttonShow.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte
			buttonShow.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonShow.labelField.changeFormat("font", "Arial");// changement de la police du texte
 
			/**
			 * On construit la liste
			 */
			m_list = new List();
 
			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			m_list.applySkin( new DefaultListSkin2() );
 
			// définition de la taille de la List
			m_list.resize( 230, 150 );
 
			// ajout de plusieurs éléments dans la liste
			for ( var i:int = 0; i < 35; i++ )
			{
				m_list.addElement( getListElement(i+1) );
			}
 
			// détermination de la position de la List
			m_list.x = 200;
			m_list.y = buttonHide.y;
 
			// ajout des marges au contenu de la liste
			m_list.margins = new UIMargins( 5, 10, 5, 5 );
 
			// affichage - ajout à la displaylist
			addChild( m_list );
 
			/**
			 * On construit la combobox
			 */
			m_comboFonts = new ComboBox();
			m_comboFonts.applySkin( new DefaultComboBoxSkin() );
 
			// on écoute les changements qui interviennent dans la combobox
			m_comboFonts.addEventListener(Event.CHANGE, changeHandler );
			m_comboFonts.resize( 300, 70 );
			m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox
			m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste
 
			/**
			 * Définition du format du Titre de la ComboBox.
			 *
			 * Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre Titre
			 */
			m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true);
			m_comboFonts.currentElement.labelField.alignCenter();
 
			// on ajoute tous les noms de polices autorisées comme élément de la combobox
			var fonts:Array = Font.enumerateFonts( true );
 
			var boxElement:ComboBoxElement;
 
			for each ( var font:Font in fonts )
			{
				boxElement = m_comboFonts.addElement( font.fontName, font.fontName );
				boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			}
 
			/**
			 * On construit un UITextField
			 */
			m_textField = new UITextField();
			m_textField.text = 'Développez avec fun :)';
 
			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 390;
			m_textField.height  = m_textField.maxHeight = 30;
			m_textField.changeFormat("size", 20);// changement de la taille de la police du texte
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
 
			m_comboFonts.y = m_textField.y + m_textField.height;
			m_comboFonts.x = 20;
 
			addChild( m_comboFonts );
			addChild( m_textField );
		}
 
		/**
		 * Ajoute Google Analytics dans votre application Flash.
		 *
		 */
		private function addTracker() : void
		{
			/**
			 * Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug
			 * Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js
			 *
			 */
			tracker = new GATracker( this, "UA-983969-6", "AS3", true );
 
			// Ce paramètre permet de traquer le nom de la page affichée ou d'une action
			if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ;
		}
 
		/**
		 * Fonction servant à écouter le changement de police au sein de la combobox.
		 * On applique la police à l'UITextField que l'on a crée et placé sur la
		 * scène.
		 *
		 * @param	e	Evenement de type MouseEvent.CLICK
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
 
			/**
			 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
			 *
			 * category: le nom du groupe d'évènements.
			 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
			 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
			 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
			 *
			 */
			if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox");
		}
 
		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
		 * On modifie le Skin de La List "Arc en Ciel Liste"
		 *
		 * @param	e	Evenement de type MouseEvent.CLICK
		 */
		 private function changeSkinList(e:MouseEvent) : void
		{
			m_list.applySkin(new DefaultListSkin() );
 
			/**
			 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
			 *
			 * category: le nom du groupe d'évènements.
			 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
			 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
			 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
			 *
			 */
			if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button");
		}
 
		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
		 * On modifie le Skin de La List "Classique Liste"
		 *
		 * @param	e	Evenement de type MouseEvent.CLICK
		 */
		private function changeSkinList2(e:MouseEvent) : void
		{
			m_list.applySkin(new DefaultListSkin2() );
 
			/**
			 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
			 *
			 * category: le nom du groupe d'évènements.
			 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
			 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
			 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
			 *
			 */
			if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Classique Liste", "Button");
		}
 
		/**
		 * Création des éléments du composant List
		 */
		private function getListElement(id:Number):Sprite
		{
			// création de l'élément
			var oElement:Sprite = new Sprite();
 
			// ajout d'un fond avec une couleur aléatoire
			var shp:Shape = new Shape();
			var color:int = Math.random() * 0X00FFFFFF;
 
			shp.graphics.beginFill( color );
			shp.graphics.drawRect( 0, 0, 200, 30 );
			shp.graphics.endFill();
 
			// ajout d'un texte
			var oTxt:UITextField = new UITextField();
 
			// définition de la taille du texte
			oTxt.height = oTxt.maxHeight = 25;
			oTxt.width = oTxt.maxWidth = 195;
 
			oTxt.text = "Élément "+id;
			oTxt.selectable = false;
			oTxt.changeFormat("color", 0xffffff);// changement de la couleur du texte
			oTxt.changeFormat("size", 14);// changement de la taille de la police du texte
			oTxt.changeFormat("font", "Arial");// changement de la police du texte
 
			oTxt.alignCenter();
 
			oTxt.background = false;
			oTxt.backgroundColor = 0xff33ff;
 
			// ajout à la displaylist (le fond et le texte) de l'élément
			oElement.addChild(shp);
			oElement.addChild(oTxt);
 
			return oElement;
		}
	}
 
}

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Google Analytics dans Flash en AS3” google_analytics_exemple.zip – Téléchargé 185 fois – 198 KB

Pour en savoir plus

Remerciements

Je remercie les Développeurs AS3 pour la création de cette API AS3 : Google Analytics Tracking for Flash API (gaforflash).

Et je vous invite à découvrir leurs Projets respectifs :

Dans les prochains tutoriels : quels sujets voulez-vous que j’aborde ?

Souhaitez des nouveaux exemples avec le code source sur l’utilisation du Framework de Composants AS3 Facile ?

Avez-vous besoin de plus d’éclaircissement sur tel ou tel Composants AS3 du Framework ? Ou préférez que j’aborde des sujets totalement différents ?



Développez des Jeux et Applications Flash avec la Formation AS3 Facile !

Recevez Gratuitement Des Cours en Vidéos, des codes source et des livrets de formation.
Et en bonus gratuit : Le Framework AS3 Facile ! 


elit. eleifend Donec pulvinar massa libero. elementum eget quis