Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

Para aqueles como eu, amantes dos produtos Google, e querem utilizar o Google Analytics em todos os sistemas, segue aqui uma forma fácil de integra-lo com o Flex.

O Exemplo abaixo, comentado possui um TabNavigator que possui sua navegaçaõ integrada com uma conta minha do Google Analytics.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()">
  <mx:Script>
    <![CDATA[
      import com.google.analytics.components.FlexTracker;
      /**
       * váriavel global para o Analytics
       */
      private var tracker:FlexTracker
      /**
       * Executa quando a aplicação é carregado
       *
       * Nesta função criamos uma nova instancia,
       * passamos as configurações
       * e chamamos o registro inicial
       */
      private function init():void
      {
        // Nova instancia do Analytics para o Flex
        tracker=new FlexTracker()
        // passando a conta que você deve ter criado
        // para o prjeto
        tracker.account='UA-4869081-3'
        // Define que o modo é para AS3
        tracker.mode="AS3"
        /*
        * Visualizar o debug no projeto,
        * para saber se esta funcionando
        *
        * Em projeto em produção, definir
        * tracker.visualDebug=false
        */
        tracker.visualDebug=true

        // Registra o acesso inicial
        tabnavigatorChange();
      }
      /**
       * Executa quando uma aba é alterada
       *
       * Neste método é chamado quando iniciamos a aplicação
       * e quando a alteramos entre as abas.
       */
      private function tabnavigatorChange():void
      {
        /*
         * O método trackPageview recebe uma String contendo a url acessada
         * Esta url deve começar com "/" e seguido do endereço a ser registrado
         *
         * Neste caso estou enviando o valor do label da aba selecionada,
         * substituindo o espaço por underline
         */
        var itemView:String='/' + tabnavigator1.selectedChild.label.replace( ' ', '_' )
        tracker.trackPageview( itemView )
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="tabnavigator1"
           x="31" y="43" width="380" height="423"
           change="tabnavigatorChange()">
    <mx:HBox label="Aba 1" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 1."/>
    </mx:HBox>
    <mx:HBox label="Aba 2" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 2."/>
    </mx:HBox>
    <mx:HBox label="Aba 3" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 3."/>
    </mx:HBox>
    <mx:HBox label="Aba 4" width="100%" height="100%"
         horizontalAlign="center">
      <mx:Text text="Esta é a aba 4."/>
    </mx:HBox>
  </mx:TabNavigator>
</mx:Application>

Veja o exemplo funcionando abaixo. Veja que ele possui diversos itens que foram adicionados devido a termos definido tracker.visualDebug=true.

Código fonte disponível aqui.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

11 comentários

Deixe uma resposta

  1. Ola Eduardo,

    Já está habilitado, e segundo o modo debug, as informações estão sendo enviadas corretamente.

    De ontem pra hoje, novamente não atualizou os trackPageview e o trackEventdo Analytics.

     
  2. Ola Eduardo,

    Estou com problemas para configurar o Flex com o Analytics. Usei o exemplo igual vc postou, mudando a account, e pelo que mostra o modo debug, o trackPageview está sendo enviado ao Analytics.
    Mas no Analytics, não estou conseguindo identificar o trackPageview, não está recebendo, ou não estou tratando corretamente.
    Estou passando também um evento desse modo - tracker.trackEvent("Mudar Aba", "Mudou"), para ver se chega, mas também não consegui.

    Quais configurações preciso fazer no Analytics para ver que recebi o trackPageview ou o trackEvent?

    Grato

     
  3. @Lucas

    Veja que esta a funcionar. http://flex.eduardokraus.com/code/092/google-analytics-para-flex_20110305-20110404.pdf

    PS: Os acessos só aparecem depois de 24h. Ou seja, só visualizas amanhã os acessos e testes de hoje.

     
  4. Ola Eduardo,

    Primeiramente, obrigado pela resposta.
    No caso, eu já esperei as 24h pra esperar o retorno, e não foi atualizado.
    (Os dados como acessos, visualizações e outros estão atualizando corretamente).
    Só não estou conseguindo receber o trackPageview e o trackEvent.
    Há algumas páginas HTML junto ao projeto, e os eventos enviados por essas páginas, eu recebo normalmente. O problema é os eventos vindos do Flex.
    No arquivo enviado, o que não estou recebendo é o "/Aba1" [...]
    No Analytics não é necessário nenhuma configuração, certo?

    Grato

     
  5. @Lucas, habilite o tracker.visualDebug=true

    Não é necessário nenhuma configuração extra no Analytics. Só no Flex.

     
  6. olá,

    Gostaria de saber se do jeito que você fez as abas, eu condigo fazer gráfico no flex com esta ferramenta???
    você poderia me responder?
    Muito Obrigada,
    Rafaela Gomes

     
  7. Você pode usar o Google Analytics em qualquer ambiente ou sistema. Apenas chame tracker.trackPageview( "URL" ) alterando a "URL" pelo item que queiras salvar

     
  8. ei eduardo eu estou com a mesma duvida do caio....
    so que num deu para mim entender com a explicação do rafael tem como vc manda uma demostração pro meu e-mail so para mim esclarecer essa duvida?????
    flw

     
  9. @Caio

    No caso poderia ser, idDoTabNavigatior.removeChildAt(0);

    Mas esse existe um componente chamado SuperTabNavigator, que faz isso que você quer.Dê uma olhada que você vai gostar :D

     
  10. Ei eduardo qual a função que eu utilizo se eu quiser colocar um botão para fechar em uma aba dessa????
    tipo eu quero colocar um botão fechar 'para fechar a aba' lá ao lado do nome "aba 1" como e que eu faço????