Adobe Flex-Einrichtung

Dieses Dokument enthält alles, was Sie wissen müssen, um Google Analytics-Tracking für Adobe Flash für die Adobe Flex-Entwicklungsumgebung einzurichten.

Tracking-Bibliothek herunterladen

Laden Sie den Code im ZIP-Format unter http://code.google.com/p/gaforflash/downloads/list herunter. Folge den Anweisungen in der Datei readme.txt, um die Flex-Komponente zu installieren. Im Gegensatz zu den Analytics-Flash-Komponenten befindet sich im Download nur eine Bibliotheksdatei: /lib/analytics_flex.swc.

Code zu Ihrem Projekt hinzufügen

Bevor Sie den Tracking-Code in Ihrem Projekt verwenden können, müssen Sie die SWC-Datei verknüpfen, die Sie als Projektressource heruntergeladen haben.

1. Wählen Sie Projekt -> Eigenschaften aus. Das Dialogfeld Eigenschaften wird für Ihr Projekt angezeigt.
2. Klicken Sie auf Flex-Build-Pfad und wählen Sie den Tab Bibliothekspfad aus.
3. Klicken Sie im Bereich Library Path (Bibliothekspfad) auf Add SWC... (SWC hinzufügen). Das Dialogfeld SWC hinzufügen wird angezeigt.
4. Gehen Sie zu dem Speicherort, an dem Sie die Google Analytics API entpackt haben, wählen Sie die Datei lib/analytics.swc aus und klicken Sie auf OK.
   Alternativ können Sie die Datei analytics.swc einfach in das /libs-Verzeichnis des Flex-Projekts ablegen.

Zurück nach oben

Beispiel für eine Flex-MXML-Komponente

Das folgende Beispiel zeigt, wie Sie das Tracking für eine Schaltfläche in einer MXML-Datei einrichten. So initialisieren Sie die MXML-Komponente:

• Legen Sie den XML-Namespace-Parameter fest. Legen Sie den XML-Namespace-Parameter des Tracking-Objekts so fest: xmlns:analytics="com.google.analytics.components.*".
• Legen Sie den Objektnamen fest. Im folgenden Beispiel ist der Parameter id auf tracker festgelegt.
• Verwenden Sie den Parameter account für die Web-Property-ID. Die Web-Property-ID ist die eindeutige Zeichenfolge, mit der Aktivitäten in Bezug auf Flash-Inhalte erfasst und an die richtige Datenansicht (Profil) in Ihrem Analytics-Konto gesendet werden.
• Legen Sie den Tracking-Modus mit dem Parameter mode fest. Verwenden Sie Bridge für den Parameter, wenn Sie eine MXML-Datei erstellen und Tracking auf einfache Weise implementieren möchten. Verwenden Sie AS3, wenn Sie sich mit dem Programmieren mit Action Script3 auskennen. Im AS3-Modus können Sie alle Google Analytics-Tracking-Klassen importieren, aus denen Sie Ihre eigenen Tracking-Objekte erstellen und konfigurieren können.
• Legen Sie den Fehlerbehebungsmodus mit dem Parameter visualDebug fest. Verwenden Sie true, um Fehlerbehebung und Validierung für Ihr Programm zu aktivieren. Andernfalls legen Sie false für die Produktion fest.

Im Beispiel wird dem Anzeigebereich die Schaltfläche mybutton hinzugefügt. Die Flex-Tracking-Komponente wird mit dem Namen tracker instanziiert und mit ihren Parametern konfiguriert. Abschließend wird mybutton ein Klickereignis onButtonClick hinzugefügt. Wenn ein Nutzer auf die Schaltfläche klickt, wird die /hello world des virtuellen Seitenaufrufs um eine einzelne Anzahl erhöht.

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

Zurück nach oben

Ein Beispiel für einen Flex-ActionScript 3

In komplexeren Situationen kann es sinnvoll sein, die nativen Tracking-Klassen von Action Script 3 direkt aus Ihren ActionScript-Ressourcendateien aufzurufen. Dieses Beispiel ist zwar auch eine MXML-Datei, aber die gesamte Tracking-Instanziierung erfolgt in den <MX:script>-Tags. Auf die gleiche Weise können Sie das Tracking zu anderen Actions Action 3-Projekten hinzufügen.

In diesem Beispiel wird dem Anzeigebereich die Schaltfläche mybutton hinzugefügt. In den Script-Tags werden zwei Bibliotheken importiert:

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

Nach dem Import der Bibliotheken wird die Tracking-Variable tracker erstellt. Sobald die Anwendung zum Anzeigenbereich hinzugefügt wurde, wird onComplete aufgerufen, wodurch das Tracking-Objekt instanziiert wird. Die vier Parameter, die Sie zum Instanziieren des GATracker-Objekts benötigen, sind:

• Auf das aktuelle Anzeigeobjekt verweisen Im folgenden Beispiel verweist this auf das Anzeigeobjekt.
• Die Web-Property-ID Die Web-Property-ID ist die eindeutige Zeichenfolge, mit der Aktivitäten in Bezug auf Flash-Inhalte erfasst und an die richtige Datenansicht (Profil) in Ihrem Analytics-Konto gesendet werden.
• Tracking-Modus: Gültige Parameter sind Bridge und AS3.
• Debug-Modus: Legen Sie debug für die Produktionsnutzung auf false und für die Validierung und Fehlerbehebung auf true fest.

Bei der Klickmethode myButton erfasst die Funktion onButtonClick schließlich einen virtuellen Seitenaufruf in unserem Tracking-Objekt.

Wenn diese Anwendung ausgeführt wird, wird jedes Mal, wenn ein Nutzer auf die Schaltfläche klickt, ein virtueller Seitenaufruf mit „Hallo Welt“ an die Tracking-Server von Google Analytics gesendet.

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

Zurück nach oben