Configuration d'Adobe Flex

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.

  1. Sélectionnez Projet > Propriétés. Une boîte de dialogue "Propriétés" s'affiche pour votre projet.
  2. Cliquez sur Flex Build Path (Chemin de compilation Flex), puis sélectionnez l'onglet Library Path (Chemin d'accès à la bibliothèque).
  3. 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.
  4. 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 fichier analytics.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 sur tracker.
  • 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. Utilisez Bridge 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. Utilisez AS3 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. Utilisez true pour activer le débogage et la validation pour votre programme. Sinon, définissez cette valeur sur false 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 ou AS3.
  • Mode débogage : Définissez debug sur false pour une utilisation en production et sur true 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>