如果你使用GA来监测和分析网站流量,你关注的是真实的访问和离开网站的数据,了解用户如何找到它,停留多长时间,等等。最近,GA小组发布了一个开源程序——本地应用的AS3 API,使你能够在RIA中使用(GA)进行跟踪情况。
本文介绍了新近推出的谷歌对Flash的API分析跟踪器——gaforflash。内容包括下载、安装软件,介绍基本概念和术语,并展示如何使用组件和本地代码两种方法,包括记录基于Flex的RIA中用户活动的主要方法,以及关于它的局限性和实践性。
这篇文章中的实例是用的gaforflash(vol1.0.1.319版)测试的。两个例子的源代码是:例1(源代码),例2(源代码)。注意,本文软件环境是Adobe Flex(Flex Builder 3,build 3.0.2)。
GaForFlash是个开源类库。在能够检测到Event的js类库(ga.js)出现后,google认识到需要开发在本地执行的AS3类库。GA专家Nick Mihailovski介绍了项目的起源“We first got a group of 3rd party developers ........”
下载网址:http://code.google.com/p/gaforflash。下载Zip包,将analytics.swc文件复制到项目的lib文件夹。
Page View vs.Event
术语'page view'这个名字与RIA应用不大相称。但在GA中(常应用于HTML网页跟踪),'page view'就是GA分析的主要指标。下面这个例子是用组件来使用GaForFlash,从Flex内部发送'page view'数据到GA。
加载FlexTracker组件到Flex程序的代码。下面是它的4个属性:
id:这个属性允许FlexTracker被引用(第24行)
account:这个属性用来保存GA配置文件,该文件存储的数据是要向GA发送的。这是一个你(or客户端)可以控制的文件。
visualDebug:这个属性能打开GaForFlash的debug模式。没有events事件传输到GA的服务器,取而代之的是一个显示记录的窗口。
mode:这个布尔值能选择:AS3或是Bridge。Bridge模式是应用在网页内嵌入RIA。这种模式方便RIA的修改,例如,该网站的数据配置文件改变。Bridge模式是通过ExternalInterface使用的,所以对于RIA的嵌入代码中的allowScriptAccess参数的使用非常重要。AS3模式应用在相反的情况:RIA嵌在你不能控制的html页面中(如QQ空间中的小插件),或是能控制页面但页面没有数据流量。
FlexTracker组件是应用trackPageview方法来监控流量的,这个方法唯一的一个参数是"URL",这当然不是一个网址,而是一个RIA内部的逻辑视图的名称。
<?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()" xmlns:components="com.google.analytics.components.*" > <mx:Script> <![CDATA[ import com.google.analytics.GATracker; import com.google.analytics.AnalyticsTracker; private function onComplete():void { tracket .debug.minimizedOnStart =true; tracket.trackPageview("/panel1"); } public function onButtonClick():void { tracket.trackPageview( "/hello/world" ); } ]]> </mx:Script> <components:FlexTracker id="tracket" account="UA-111-222" visualDebug="true" mode="AS3" /> <mx:Accordion change="tracket.trackPageview('/panel'+String(event.newIndex+1));" x="481" y="85" width="294" height="341"> <mx:Canvas label="panel 1" width="100%" height="100%"> <mx:Text text="Welcome to Panel 1"/> </mx:Canvas> <mx:Canvas label="Panel 2" width="100%" height="100%"> <mx:Text text="Benvenuti a panle 2"/> </mx:Canvas> <mx:Canvas label="panel 3" width="100%" height="100%"> <mx:Text text="Benvenuti a panel 3"/> </mx:Canvas> <mx:Canvas label="panel 4" width="100%" height="100%"> <mx:Button label=" button" width="100%" height="100%" click="onButtonClick()"/> </mx:Canvas> </mx:Accordion> </mx:Application>