1 Reply Latest reply on Nov 21, 2009 1:10 PM by funkysoul

    Google Analytics Event Tracking (need help implementing)

    DeyBwah Level 1

      Hi all.

       

      I'm trying to implement Google Analytics Event Tracking on 3 click-downloadable images in my Flex App.

       

      I've done some searching on the web and it seems there are many different ways to do this? But every tutorial I saw was missing a piece and now that I've seen so many different approaches, I'm thoroughly confused.

       

       

      So here's where I'm at right now.

       

      I followed this tutorial here...

       

      http://code.google.com/apis/analytics/docs/tracking/flashTrackingSetupFlex.html

       

      And downloaded the tracking library and installed the component into Flex correctly.

       

      Then I scrolled passed the MXML implementation, to the AS3 implementation.

       

      I've added the 2 imports (import com.google.analytics.GATracker;

                                          import com.google.analytics.AnalyticsTracker;)

       

      The public var (public var tracker:AnalyticsTracker;)

       

      And the two functions (private function onComplete():void {

                                             tracker = new GATracker( this, "UA-111-222", "AS3", false );

                                        }

       

                                        public function onButtonClick():void {

                                             tracker.trackPageview( "/hello/world" );

                                        }

       

      These are copied and pasted from the example code provided by that link.

       

       

      The objective:

       

      Is to track image download clicks.

       

       

      My questions are...

       

      What parameters do I need to change to make it work for my application?

       

      Also, do I need a separate function for each image click I'm tracking or can I reuse the same function?

       

       

       

      Here is my code.

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

           width="760"

           height="760"

           backgroundImage="twitterSkins-background.jpg"

           backgroundColor="#202020"

           horizontalAlign="center"

           verticalAlign="top">

       

      <mx:Script>

           <![CDATA[

                import mx.core.IUIComponent;

                import mx.effects.*;

                import flash.net.*;

                import com.google.analytics.GATracker;

                import com.google.analytics.AnalyticsTracker;

       

       

                private var request1:URLRequest = new URLRequest("http://www.theawesomemovie.com/images/twitter_skins/Twitter_Skin1.jpg");

                private var fileRef1:FileReference = new FileReference();

       

       

                private var request2:URLRequest = new URLRequest("http://www.theawesomemovie.com/images/twitter_skins/Twitter_Skin2.jpg");

                private var fileRef2:FileReference = new FileReference();

       

       

                private var request3:URLRequest = new URLRequest("http://www.theawesomemovie.com/images/twitter_skins/Twitter_Skin3.jpg");

                private var fileRef3:FileReference = new FileReference();

       

                public var tracker:AnalyticsTracker;

       

                private function onComplete():void

                {

                    tracker = new GATracker( this, "UA-111-222", "AS3", false ); // <------ What parameters should I insert here?

                }

       

                public function onButtonClick():void // <----- Do I need a separate function for each image download click action?

                {

                    tracker.trackPageview( "/hello/world" ); // <----- What goes between these parenthesis? I'm guessing this is what is sent to GA as a track count. So that is why I'm wondering if I need a separate function for each image download click..

                }

           ]]>

      </mx:Script>

       

       

      <mx:Glow id="mouseOverGlow"

           duration="450"

           alphaFrom="1.0" alphaTo="0.6"

           blurXFrom="0.0" blurXTo="25.0"

           blurYFrom="0.0" blurYTo="25.0"

           color="0xffffff"

           knockout="false"/>

       

      <mx:Glow id="mouseOutGlow"

           duration="450"

           alphaFrom="0.6" alphaTo="1.0"

           blurXFrom="25.0" blurXTo="0.0"

           blurYFrom="25.0" blurYTo="0.0"

           color="0xffffff"

           knockout="false"/>

       

           <mx:HBox y="259" horizontalCenter="0"

           backgroundImage="box-gradient.png" width="711" height="187" paddingLeft="22" paddingTop="57" horizontalGap="30">

       

          

                <mx:Image // <----- Any code need to go in these Image components? I'm guessing a call to the functions defined above in the "click" action right?

                     id="skin1"

                     source="skin1.jpg"

                     rollOverEffect="{mouseOverGlow}" rollOutEffect="{mouseOutGlow}"

                     click="fileRef1.download(request1, 'skin1.jpg')" />

               

                <mx:Image

                     id="skin2"

                     source="skin2.jpg"

                     rollOverEffect="{mouseOverGlow}" rollOutEffect="{mouseOutGlow}"

                     click="fileRef2.download(request2, 'skin2.jpg')" />

          

                <mx:Image

                     id="skin3"

                     source="skin3.jpg"

                     rollOverEffect="{mouseOverGlow}" rollOutEffect="{mouseOutGlow}"

                     click="fileRef3.download(request3, 'skin3.jpg')" />

           </mx:HBox>

       

      </mx:Application>

       

      Thanks everyone, I'm still very new to the Flex AS3 platform as well as Google Analytics.

       

      Any insight is greatly appreciated.

       

      Dey

        • 1. Re: Google Analytics Event Tracking (need help implementing)
          funkysoul Level 4

          First of all I don't see any calls to any of your analytics functions, they are there but never being called.
          Anyway here a few lines on how to implement google analytics:

           

          tracker = new GATracker( this, "UA-111-222", "AS3", false ); // <------ What parameters should I insert here?

          You just need to insert the tracking code from your corresponding website that you get from google.com/analytics

           

          public function onButtonClick():void // <----- Do I need a separate function for each image download click action?

          Nope you don't need it everytime, just once

                    {

                        tracker.trackPageview( "/hello/world" ); // <----- What goes between these parenthesis? I'm guessing this is what is sent to GA as a track count. So that is why I'm wondering if I need a separate function for each image download click..

          What ever you want, this is what is going to be displayed on the report

                    }

           

                    <mx:Image // <----- Any code need to go in these Image components? I'm guessing a call to the functions defined above in the "click" action right?

          Nope, you don't need anything in here,

           

           

          And finally this is how you should implement it:

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

               width="760"

               height="760"

               backgroundImage="twitterSkins-background.jpg"

               backgroundColor="#202020"

               horizontalAlign="center"

               verticalAlign="top"

          applicationComplete="init">

           

          <mx:Script>

               <![CDATA[

                    import mx.core.IUIComponent;

                    import mx.effects.*;

                    import flash.net.*;

                    import com.google.analytics.GATracker;

                    import com.google.analytics.AnalyticsTracker;

           

           

                    private var request1:URLRequest = new URLRequest("http://www.theawesomemovie.com/images/twitter_skins/Twitter_Skin1.jpg");

                    private var fileRef_1:FileReference = new FileReference();

           

           

                    private var request2:URLRequest = new URLRequest("http://www.theawesomemovie.com/images/twitter_skins/Twitter_Skin2.jpg");

                    private var fileRef_2:FileReference = new FileReference();

           

           

                    private var request3:URLRequest = new URLRequest("http://www.theawesomemovie.com/images/twitter_skins/Twitter_Skin3.jpg");

                    private var fileRef_3:FileReference = new FileReference();

           

                    public var tracker:AnalyticsTracker;

           

                    private function init():void

                    {

                        tracker = new GATracker( this, "UA-111-222", "AS3", false );

                    }

           

                    public function onButtonClick():void

                    {

                         tracker.trackPageview( "/hello/world" );

                    }

               ]]>

          </mx:Script>

           

           

          <mx:Glow id="mouseOverGlow"

               duration="450"

               alphaFrom="1.0" alphaTo="0.6"

               blurXFrom="0.0" blurXTo="25.0"

               blurYFrom="0.0" blurYTo="25.0"

               color="0xffffff"

               knockout="false"/>

           

          <mx:Glow id="mouseOutGlow"

               duration="450"

               alphaFrom="0.6" alphaTo="1.0"

               blurXFrom="25.0" blurXTo="0.0"

               blurYFrom="25.0" blurYTo="0.0"

               color="0xffffff"

               knockout="false"/>

           

               <mx:HBox y="259" horizontalCenter="0"

               backgroundImage="box-gradient.png" width="711" height="187" paddingLeft="22" paddingTop="57" horizontalGap="30">

           

             

                    <mx:Image

                         id="skin1"

                         source="skin1.jpg"

                         rollOverEffect="{mouseOverGlow}" rollOutEffect="{mouseOutGlow}"

                         click="" />

                  

                    <mx:Image

                         id="skin2"

                         source="skin2.jpg"

                         rollOverEffect="{mouseOverGlow}" rollOutEffect="{mouseOutGlow}"

                         click="fileRef2.download(request2, 'skin2.jpg')" />

             

                    <mx:Image

                         id="skin3"

                         source="skin3.jpg"

                         rollOverEffect="{mouseOverGlow}" rollOutEffect="{mouseOutGlow}"

                         click="fileRef3.download(request3, 'skin3.jpg')" />

               </mx:HBox>

           

          </mx:Application>

           

          Your MX:IMAGE need to be rewritten as currently you are never calling the onButtonClick function, currently you are only calling the download method of each filereference instance. Below a sample which might work (from top of my head, NOT tested)

           

            public function onButtonClick(e:MouseEvent):void

                   {

                         switch(e.currentTarget.id)

                         {

                              case "skin1":

                                   tracker.trackPageview( "/hello/world" );

                                   break;

                              case "skin2":

                                   tracker.trackPageview( "/hello/world2" );

                                   break;

                               case "skin3":

                                   tracker.trackPageview( "/hello/world3" );

                                   break;

                         }

                    }