Google Analytics and FlexViewer 2.1

[MicheleDunham]

Does anyone have experience with integrating Google Analytics into FlexViewer 2.1?

[GadyPitaru]

Not specifically for FlexViewer (not sure any docs exist), but this is for general integration of Google Analytics into a Flash/Flex app: http://code.google.com/apis/analytics/docs/tracking/flashTrackingSetupFlex.html

[RobertScheitlin__GISP]

Michele,

    Yep, I have it on my site all you need to do is add this block replacing your UA-xxxxxxx-x number
and paste this into the index.template.html inside of the body element

     <script type="text/javascript">
   var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
   try {
    var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
    pageTracker._trackPageview();
   } catch(err) {}
  </script>

[MicheleDunham]

Thanks, Robert!

Does this work okay with a Reverse Proxy?

[RobertScheitlin__GISP]

Michele,

   Yep I use reverse proxy as well.

[MarkHoyland]

I use it on my site directly from within flex. (not flexviewer though)
Like the link that Gady provided.

This allows you to log flex events as "pages" in google analytics.
eg Each time a user clicks on the print button, it is logged as a "page" in google analytics.

To use in flexviewer you would have to set the "tracker" as a global variable.
Then each event you want to log as a page, you would use tracker.trackPageview( "/PrintButton")
Where the argument is the page name logged in Analytics.

This is useful to find out what functionality is being used on our site, what is not being used.
Then you can ask questions like why is it not being used, hard to find, too many clicks, not user friendly etc.

Very useful tool. We have been using it for over 12 months.
See attached for an example of the output I get.

[RobertScheitlin__GISP]

Mark,

   I am not sure what you mean by this

I use it on my site directly from within flex. (not flexviewer though)

If you are not putting it into your index.template.html that where are you putting it?

[GadyPitaru]

@Robert

The code you posted just tells Google Analytics when the HTML wrapper is accessed, correct? The link I posted integrates Analytics inside the Flex app, so as you "navigate" around in the app, statistics are sent to Google, not just on the HTML wrapper load.

[RobertScheitlin__GISP]

Gady,

   Thanks I will start figuring out how to put this into FlexViewer. It will be good to know which widgets people are using the most.

[MarkHoyland]

Hi Robert,
Sorry, I re read my previous post and its not very clear at all.

The method you are using is the Google Analytics Javascript api, that can be put in html pages.

There is also a Google Analytics Action Script 3 api available, analytics.swc, that can be put in the libs folder of a flex project. The calls to Google analytics can be made from within the flex application's actionscript code.

You can see in my sample report that I am logging a lot of things. The base layers that are being used, the buttons that are being used, the searches that are being used etc.
Each out to there own analytics page.
Well worth the effort to see how the site is being used or how it could potentially be better. (and managers love reports with graphs 😄 )

Here is the concept of what you could do in FlexViewer. Within each widget you could use tracker.trackPageview( "/pagename").

The simple code below would create 4 "pages" in the google analytics report.

Pages:
Initial,
Widget1_load,
Widget1_table,
Widget2_load

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    minWidth="955" minHeight="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 );
    tracker.trackPageview( "/Initial");
   }
   
   protected function b1_clickHandler(event:MouseEvent):void
   {
    tracker.trackPageview( "/Widget1_load");
   }

   protected function b2_clickHandler(event:MouseEvent):void
   {
    tracker.trackPageview( "/Widget1_table");
   }

   protected function b3_clickHandler(event:MouseEvent):void
   {
    tracker.trackPageview( "/Widget2_load");
   }
  ]]>
 </mx:Script>
 <mx:Panel id="p1">
  <mx:Button id="W1_load" click="b1_clickHandler(event)"/>
  <mx:Button id="W1_table" click="b2_clickHandler(event)"/>
  <mx:Button id="W2_load" click="b3_clickHandler(event)"/>
 </mx:Panel>
 
</mx:Application>