Configurazione di Adobe Flex

Questo documento fornisce tutte le informazioni necessarie per configurare il monitoraggio di Google Analytics per Adobe Flash per l'ambiente di sviluppo di Adobe Flex.

Ottieni la libreria di monitoraggio

Scarica il codice (formato ZIP) dalla pagina http://code.google.com/p/gaforflash/downloads/list. Segui le istruzioni nel file readme.txt per installare il componente Flex. A differenza dei componenti Flash di Analytics, nel download è presente un solo file di libreria: /lib/analytics_flex.swc.

Aggiungi il codice al tuo progetto

Prima di poter iniziare a utilizzare il codice di monitoraggio nel progetto, devi collegare il file SWC che hai scaricato come risorsa del progetto.

  1. Seleziona Progetto->Proprietà. Viene visualizzata una finestra di dialogo Proprietà per il progetto.
  2. Fai clic su Percorso build flessibile e seleziona la scheda Percorso libreria.
  3. Fai clic su Aggiungi SWC... nel riquadro Percorso libreria. Viene visualizzata la finestra di dialogo Aggiungi SWC.
  4. Vai alla posizione in cui hai decompresso l'API Google Analytics, seleziona il file lib/analytics.swc e fai clic su OK.
    In alternativa, trascina il file analytics.swc nella directory del progetto flessibile /libs.

Esempio di componente MXML flessibile

L'esempio seguente mostra come impostare il monitoraggio di un pulsante all'interno di un file MXML. Per inizializzare il componente MXML:

  • Imposta il parametro dello spazio dei nomi XML. Imposta il parametro dello spazio dei nomi XML dell'oggetto di monitoraggio come segue: xmlns:analytics="com.google.analytics.components.*"
  • Imposta il nome dell'oggetto. Nell'esempio riportato di seguito, il parametro id è impostato su tracker.
  • Utilizza il parametro account per l'ID proprietà web. L'ID proprietà web è la stringa univoca utilizzata per tenere traccia dell'attività sui contenuti Flash e inviarla alla vista (profilo) corretta nel tuo account Analytics.
  • Imposta la modalità di monitoraggio con il parametro mode. Utilizza Bridge per il parametro se stai creando un file MXML e vuoi un modo semplice per implementare il monitoraggio. Usa AS3 se hai dimestichezza con la programmazione con Action3. La modalità AS3 ti consente di importare tutte le classi di monitoraggio GA, da cui puoi creare e configurare i tuoi oggetti di monitoraggio personalizzati.
  • Imposta la modalità di debug con il parametro visualDebug. Usa true per attivare il debug e la convalida per il tuo programma; altrimenti, impostalo su false per l'uso in produzione.

Nell'esempio, viene aggiunto un pulsante mybutton allo stage. Il componente di monitoraggio flessibile viene creata con il nome tracker e configurato con i relativi parametri. Infine, un evento di clic onButtonClick viene aggiunto a mybutton. Quando si fa clic sul pulsante, il valore della visualizzazione di pagina virtuale /hello world viene incrementato con un singolo conteggio.

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

Esempio di un codice JavaScript flessibile 3

In situazioni più complesse, può essere utile richiamare le classi di monitoraggio native di Action 3 direttamente dai file di risorse Action. Anche se anche questo esempio è un file MXML, tutta l'istanza di monitoraggio viene eseguita nei tag <MX:script>. Lo stesso processo può essere utilizzato per aggiungere il tracciamento ad altri progetti di ActionScript 3.

In questo esempio, viene aggiunto un pulsante mybutton allo stage. Nei tag script vengono importate due librerie:

com.google.analytics.GATracker; //this is the actual tracking class
com.google.analytics.AnalyticsTracker; //this is an interface that the GATracker class implements

Dopo l'importazione delle librerie, viene creata la variabile di monitoraggio tracker. Dopo aver aggiunto l'applicazione allo stage, viene chiamato onComplete, che crea un'istanza dell'oggetto di monitoraggio. I quattro parametri necessari per creare un'istanza dell'oggetto GATracker sono:

  • Fai riferimento all'oggetto display corrente. Nell'esempio seguente, this fa riferimento all'oggetto display.
  • L'ID proprietà web. L'ID proprietà web è la stringa univoca utilizzata per tenere traccia dell'attività sui contenuti Flash e inviarla alla vista (profilo) corretta nel tuo account Analytics.
  • Modalità di rilevamento. I parametri validi sono Bridge o AS3.
  • Modalità di debug. Imposta debug su false per l'uso in produzione e su true per la convalida e la risoluzione dei problemi.

Infine, con il metodo del clic myButton, la funzione onButtonClick monitora una visualizzazione di pagina virtuale sul nostro oggetto di monitoraggio.

Quando questa applicazione è in esecuzione, ogni volta che un utente fa clic sul pulsante, viene inviata una visualizzazione di pagina virtuale di "Hello World" ai server di monitoraggio di 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>