Configuração do Adobe Flex

Este documento aborda tudo que você precisa saber para configurar o acompanhamento do Google Analytics para o Adobe Flash para o ambiente de desenvolvimento Adobe Flex.

Obtenha a biblioteca de acompanhamento

Faça o download do código (formato ZIP) em http://code.google.com/p/gaforflash/downloads/list. Siga as instruções no arquivo readme.txt para instalar o componente Flex. Ao contrário dos componentes Flash do Google Analytics, há apenas um arquivo de biblioteca localizado no download: /lib/analytics_flex.swc.

Adicione o código a seu projeto

Antes de começar a usar o código de acompanhamento no seu projeto, vincule o arquivo SWC que você baixou como um recurso do projeto.

  1. Selecione Project->Properties. Uma caixa de diálogo Properties é exibida para o projeto.
  2. Clique em Flex Build Path e selecione a guia Library Path.
  3. Clique em Add SWC... no painel Library Path. Uma caixa de diálogo Add SWC será exibida.
  4. Navegue até o local onde você descompactou a API do Google Analytics, selecione o arquivo lib/analytics.swc e clique em OK.
    Ou basta soltar o arquivo analytics.swc no diretório /libs do projeto Flex.

Um exemplo de componente Flex MXML

O exemplo a seguir mostra como configurar o acompanhamento para um botão dentro de um arquivo MXML. Para inicializar o componente MXML, faça o seguinte:

  • Defina o parâmetro de namespace XML. Defina o parâmetro de namespace XML do seu objeto de acompanhamento da seguinte forma: xmlns:analytics="com.google.analytics.components.*"
  • Defina o nome do objeto. No exemplo abaixo, o parâmetro id está definido como tracker.
  • Use o parâmetro account para o ID da propriedade da Web. O ID da propriedade da Web é a string exclusiva usada para acompanhar a atividade no seu conteúdo em Flash e exibi-la para a vista da propriedade (perfil) correta na sua conta do Google Analytics.
  • Defina o modo de acompanhamento com o parâmetro mode. Use Bridge como parâmetro se você estiver criando um arquivo MXML e quiser uma maneira simples de implementar o acompanhamento. Use AS3 se você tiver familiaridade com a codificação usando o ActionScript3. O modo AS3 permite que você importe todas as classes de acompanhamento do GA, a partir das quais você pode criar e configurar seus próprios objetos de acompanhamento.
  • Defina o modo de depuração com o parâmetro visualDebug. Use true para ativar a depuração e a validação do programa. Caso contrário, defina como false para uso em produção.

No exemplo, um botão mybutton é adicionado ao cenário. O componente de acompanhamento Flex é instanciado com o nome tracker e configurado com seus parâmetros. Por fim, um evento de clique onButtonClick é adicionado a mybutton. Quando o botão é clicado, a visualização de página virtual /hello world é incrementada com uma contagem única. 

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

Um exemplo do ActionScript 3 do Flex

Em situações mais complexas, é recomendável chamar as classes de acompanhamento nativas do ActionScript 3 diretamente de seus arquivos de recursos do ActionScript. Embora este exemplo também seja um arquivo MXML, toda a instanciação do acompanhamento é feita nas tags <MX:script>. O mesmo processo pode ser usado para adicionar o acompanhamento a outros projetos em ActionScript 3.

Neste exemplo, um botão mybutton é adicionado ao cenário. Nas tags de script, duas bibliotecas são importadas: 

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

Depois da importação das bibliotecas, a variável de acompanhamento tracker é criada. Depois que o aplicativo for adicionado ao estágio, onComplete será chamado, o que instancia o objeto de acompanhamento. Os quatro parâmetros necessários para instanciar o objeto GATracker são:

  • Faça referência ao objeto de exibição atual. No exemplo abaixo, this faz referência ao objeto de exibição.
  • O ID da propriedade da Web. O ID da propriedade da Web é a string exclusiva usada para acompanhar a atividade no seu conteúdo em Flash e exibi-la para a vista da propriedade (perfil) correta na sua conta do Google Analytics.
  • O modo de rastreamento. Os parâmetros válidos são Bridge ou AS3.
  • O modo de depuração. Defina debug como false para uso em produção e como true para validação e solução de problemas.

Por fim, no método de clique myButton, a função onButtonClick acompanha uma visualização de página virtual no nosso objeto de acompanhamento.

Quando este aplicativo for executado, toda vez que um usuário clicar no botão, uma visualização de página virtual de "olá, mundo" será enviada para os servidores de acompanhamento do 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>