Ce document aborde tout ce que vous devez savoir pour configurer le suivi Google Analytics pour Adobe Flash dans l'environnement de développement Adobe Flex.
Obtenir la bibliothèque de suivi
Téléchargez le code (au format ZIP) sur la page http://code.google.com/p/gaforflash/downloads/list. Suivez les instructions du fichier readme.txt
pour installer le composant Flex. Contrairement aux composants Flash Analytics, le téléchargement ne contient qu'un seul fichier de bibliothèque: /lib/analytics_flex.swc
.
Ajouter le code à votre projet
Avant de pouvoir utiliser le code de suivi dans votre projet, vous devez associer le fichier SWC
que vous avez téléchargé en tant que ressource de projet.
- Sélectionnez Projet > Propriétés. Une boîte de dialogue "Propriétés" s'affiche pour votre projet.
- Cliquez sur Flex Build Path (Chemin de compilation Flex), puis sélectionnez l'onglet Library Path (Chemin d'accès à la bibliothèque).
- Cliquez sur Add SWC... (Ajouter SWC...) dans le volet Library Path (Chemin d'accès à la bibliothèque). Une boîte de dialogue Ajouter SWC s'affiche.
- Accédez à l'emplacement où vous avez décompressé l'API Google Analytics, sélectionnez le fichier
lib/analytics.swc
, puis cliquez sur OK.
Vous pouvez également déposer simplement le fichieranalytics.swc
dans le répertoire/libs
de votre projet Flex.
Exemple de composant MXML Flex
L'exemple suivant montre comment configurer le suivi d'un bouton dans un fichier MXML. Pour initialiser le composant MXML, procédez comme suit:
- Définissez le paramètre d'espace de noms XML. Définissez le paramètre d'espace de noms XML de votre objet de suivi comme suit:
xmlns:analytics="com.google.analytics.components.*"
- Définissez le nom de l'objet. Dans l'exemple ci-dessous, le paramètre
id
est défini surtracker
. - Utilisez le paramètre
account
pour l'ID de propriété Web. L'ID de propriété Web est la chaîne unique utilisée pour effectuer le suivi de l'activité sur votre contenu Flash et l'afficher dans la vue (profil) appropriée de votre compte Google Analytics. - Définissez le mode de suivi à l'aide du paramètre
mode
. UtilisezBridge
pour le paramètre si vous créez un fichier MXML et souhaitez bénéficier d'un moyen simple d'implémenter le suivi. UtilisezAS3
si vous savez coder à l'aide d'ActionScript3. Le mode AS3 vous permet d'importer toutes les classes de suivi GA, à partir desquelles vous pouvez créer et configurer vos propres objets de suivi. - Définissez le mode débogage à l'aide du paramètre
visualDebug
. Utiliseztrue
pour activer le débogage et la validation pour votre programme. Sinon, définissez cette valeur surfalse
pour une utilisation en production.
Dans l'exemple, un bouton mybutton
est ajouté à l'espace de création. Le composant de suivi Flex est instancié avec le nom tracker
et configuré avec ses paramètres. Enfin, un événement de clic onButtonClick
est ajouté à mybutton
. Lorsque l'utilisateur clique sur le bouton, la page vue virtuelle /hello world
est incrémentée d'un seul décompte.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" > <mx:Script> public function onButtonClick():void { tracker.trackPageview( "/hello world" ); } </mx:Script> <analytics:FlexTracker xmlns:analytics="com.google.analytics.components.*" id="tracker" account="UA-111-222" mode="AS3" visualDebug="false" /> <mx:Button id="mybutton" label="hello world" click="onButtonClick()" /> </mx:Application>
Exemple d'ActionScript 3 Flex 3
Dans les situations plus complexes, il peut être judicieux d'appeler les classes de suivi JavaScript 3 natives directement à partir de vos fichiers de ressources ActionScript. Bien que cet exemple soit également un fichier MXML, toute l'instanciation du suivi est effectuée dans les balises <MX:script>
. Vous pouvez appliquer le même processus pour ajouter un suivi à d'autres projets ActionScript 3.
Dans cet exemple, un bouton mybutton
est ajouté à l'espace de création. Dans les tags de script, deux bibliothèques sont importées:
com.google.analytics.GATracker; //this is the actual tracking class com.google.analytics.AnalyticsTracker; //this is an interface that the GATracker class implements
Une fois les bibliothèques importées, la variable de suivi tracker
est créée. Une fois l'application ajoutée à l'espace de création, onComplete
est appelé, ce qui instancie l'objet de suivi. Pour instancier l'objet GATracker, vous devez utiliser les quatre paramètres suivants:
- Référencer l'objet "affichage" actuel Dans l'exemple ci-dessous,
this
fait référence à l'objet display. - L'ID de propriété Web. L'ID de propriété Web est la chaîne unique utilisée pour effectuer le suivi de l'activité sur votre contenu Flash et l'afficher dans la vue (profil) appropriée de votre compte Google Analytics.
- Mode de suivi : Les paramètres valides sont
Bridge
ouAS3
. - Mode débogage : Définissez
debug
surfalse
pour une utilisation en production et surtrue
pour la validation et le dépannage.
Enfin, sur la méthode de clic myButton
, la fonction onButtonClick
effectue le suivi d'une page vue virtuelle sur notre objet de suivi.
Lorsque cette application s'exécute, chaque fois qu'un utilisateur clique sur le bouton, une page vue virtuelle de type "hello world" est envoyée aux serveurs de suivi Google Analytics.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" addedToStage="onComplete()" > <mx:Script> <![CDATA[ import com.google.analytics.GATracker; import com.google.analytics.AnalyticsTracker; public var tracker:AnalyticsTracker; private function onComplete():void { tracker = new GATracker( this, "UA-111-222", "AS3", false ); } public function onButtonClick():void { tracker.trackPageview( "/hello/world" ); } ]]> </mx:Script> <mx:Button id="mybutton" label="hello world" click="onButtonClick()" /> </mx:Application>