给你的Flex程序添加深链接和分析-其实比你想象的要简单


  Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151
  Adobe Flash Builder 4 简体中文正式版 Mac版点击下载 :http://g.csdn.net/5134152
  Adobe 在线课堂:http://adobev.csdn.net/zx/index.html
  Adobe平台技术峰会课程视频:http://adobev.csdn.net/ 深链接:是通过URL 控制你的程序的初始视图的能力;
  分析:收集关于用户如何与程序互动的数据。
  关于Flash 和Flex 的两个共同的误解就是:在你的程序和游戏中,加入深链接和收集分析数据功能是不可能的,或者说是非常之难的。不过,事实并非如此。几行代码就可以实现这个要求了。
  在本文中,我会介绍SWFAddress 和SWFAddress ,及你为什么会想要使用这两个工具,最重要的是,如何在你的程序中添加它们。
  我将于2010 年9 月19 日到21 日在360Flex 大会上探讨这个话题。我想,使用SWFAddress 和Google Analytics 构建一个定制化幻灯片灯会很合适-右击获取源代码。
  注意:移动你的鼠标到程序的左边,显示导航。或者你可以使用鼠标手势,按下左鼠标键,左右移动,前后移动幻灯片。还有一个功能就是,程序还可以处理触控事件(这一点在代码中就完全涉及到了)。
  随着你浏览一张张幻灯片,你会注意到URL 和页面标题出现变化,以反映现在播放的幻灯片。程序还向Google Analytics 发送数据。我提供了一个公共的Google 账户,每个人都可以登陆上去,浏览幻灯片灯箱收集的分析数据-本页面的最后提供了细节。从Google Analytics dashboard 上,你会看到独特的浏览者,页面浏览量,网站平均访问事件,图层叠加用户地址等。
  为什么添加深链接
  不是每个Flex 程序都需要添加深链接。但是在很多情况下,它能够加强UX (用户体验),因此值得你稍微费点功夫将之添加进来。譬如,我的网站RunPee.com -这个网站告诉人们,看电影的时候,什么时间是最佳洗手间时间,这样你就不会错过任何精彩片段。网站很简单。有一个电影导航,向用户显示选定的电影的"洗手间时间"。假设你登陆了该网站,想要向一个朋友发送邮件或者告诉其他人某部影片(如Inception )的洗手间时间。没有SWFAddress 的话,你只能让你的朋友登陆主页,然后她们自己在导航中寻找Inception 。但是因为我在网站使用了SWFAddress ,你可以向你的朋友发送一个链接,从此链接,你的朋友可以直接连接到你想要她们观看的影片,如http://runpee.com/#/Inception-region-US-lang-EN-ke y-121 。
  它还能启动浏览器前进后退按钮和刷新,并且能够给你的程序的特定视图添加书签。这些都是很多用户认为Flex/Flash 程序缺少的。
  注意:如果你使用SWFAddress ,发现它很有用,那就在Asual 的donation bucket 里说几句感谢的话吧。
  为什么添加analytics (分析)?
  当然,你想要知道用户是如何使用你的程序的。你可以仅仅就在程序的HTML 容器里嵌入Google Analytics Javascript 代码,但是那只会提供有关主页的数据。你不能知道人们到底如何使用你的程序的,除非你向Actionscript 代码添加跟踪。
  你不想知道在中国,到底有多少人在使用你的程序吗?
  在一个HTML 网站,每次当你从网站上载一个页面的时候,Google 服务器会更新,Google Analytics 运行。在Flex 程序里,就有些不同了。你得告诉Google 服务器,你要求什么作为网页浏览量,并且发送更新数据。最棒的就是,它可以让你全权控制你想要跟踪的内容。你可以,譬如,添加跟踪,当用户观看一部视频时,每隔十秒ping 一下Google 服务器。这样,你可以了解到人们看视频时,会看到哪里选择离开。或者,你可以向一个游戏添加跟踪,看看人们在打到多少级时,放弃。你可以因此确定哪一级对玩家来说太难了。
  你还可以根据你的喜好,定义网页的格式。你可以做一串数据,采用任何格式,然后发送到Google 。在这个视频使用跟踪范例里,我可能会发送这样一个内容到Google "、名称-我的视频名-秒-40-213"也就是,我的视频名称,用户观看的秒数,和视频的全部时间(秒)。现在,在Google 上浏览数据时,我可使用过滤器选出我想要查看的信息。
  另外一个收集分析数据的重要原因就是,哪些国家的大部分用户会选择你的程序。譬如,如果你有个游戏产品,发现它在中国很受欢迎,你想要将部分内容翻译成中文,从而提高在该地区的受欢迎度。如果你想要本地化你的程序,你需要根据用户跟踪了解哪个语言是最佳选择。
  此外,你可以获取关于运行你的程序的硬件的信息,如Flash Player 版本,浏览器类型,屏幕清晰度,OS 类型等。这些数据对于更新你的程序都非常重要。
  注意:这里用Flex 程序举例说明,而实际上SWFAddress  和Google Analytics  在纯粹的Actionscript  项目里运行良好。
  SWFAddress如何运行
  首先,你需要从Asua.com 获得SWFAddress 代码-这是免费的开源代码。你需要两样东西:在你的项目libs folder 中的swc ,和你放在服务器上通过HTML 容器装载的swfaddress.js 文件。
  你会要更新Flex 项目的index.template.html ,以上载JavaScript 文件。代码行在上载了swfobject.js 文件之后运行正确。所以,你的HTML 代码就是这样:   关于SWFAddress 的几点:
  SWFAddress是一个静态类。你不需实例化它。
  你需要向SWFAddress 添加一个监听器,这样就可以了解它什么时候发生了变化。但是你可以只添加一个监听器。更为精确地说就是,你可以按照自己的要求添加N 个监听器,但是只有最后添加的那个会被触发。现在,在你的程序里,你需要监听SWFAddress.CHANGE 事件,如下所示:
  SWFAddress.addEventListener( SWFAddressEvent.CHANGE, onSWFAddressChange );
  然后,事件控制如下所示: private function onSWFAddressChange( e:SWFAddressEvent ):void { if( SWFAddress.getPath() == "/" ) { // set view to homepage } else if( SWFAddress.getPath().indexOf( 'something_' ) != -1 ) { // set view to something } } 然后,事件控制如下所示:
  SWFAddress.setValue( 'something' );
  你可以告诉SWFAddress 在程序内任何位置更改url 。但是,我根据经验认为,你可能不要这么做。假定你做了,稍后又决定你想要改变URL 的格式。你可能会在程序内不同的位置进行跟踪,在这些位置,可能设定了该URL 。我发现最好的方法是拥有一个静态文件,它会处理所有的SWFAddress 更新。因为你只有一个用于SWFAddress 的监听器,我使用InBox/OutBox 来做个比方吧。InBox 类监听的是变化,而OutBox 却执行了所有的setValue 更新。用这个方法,我的InBox 类只有两个静态方法。一个就是设置监听器,当然还有用于该监听器的handler( 子线程监听器) 。我从程序creationComplete handler. 中调用InBox.init() 方法。 package model { import com.asual.swfaddress.SWFAddressEvent; import com.asual.swfaddress.SWFAddress; public class InBox { public static function init():void { SWFAddress.addEventListener( SWFAddressEvent.CHANGE, onSWFAddressChange ); } private static function onSWFAddressChange( e:SWFAddressEvent ):void { if( SWFAddress.getPath() == "/" ) { // set view to homepage } else if( SWFAddress.getPath().indexOf( 'something_' ) != -1 ) { // set view to something } } } SWFAddress不仅仅限于更改URL 。你还可以使用它更新页面的标题,这样有助于用户决定是否给视图需要添加书签。
  使用SWFAddress 时,最重要的是你需要确保你的程序必须只依赖于对SWFAddress.CHANGE 事件的反应,以更改视图。譬如,你不能再将ButtonBar 与ViewStack 连接起来,改变ButtonBar 以更改ViewStack 的selectedIndex 。相反,ButtonBar 将于,如OutBox.buttonBarChanged( s:String ) 方法通讯。这个方法会通过WFAddress.setValue( s ) 更ViewStack 。下面简单说明下这个流程;. 
  
  在上面这个例子里,InBox 不能直接与ViewStack 通讯。实际上,你可能会从InBox 派遣一个事件,以与ViewStack 通讯。
  你可以清楚地看到,在程序中使用SWFAddress 起来很简单,但是把它添加到现有的一个程序中可能也非常令人头疼-你的"里程数"可能会变动。因此,如果你想要以后使用它,要确保你从程序构建开始就将之添加进去了,这样你会轻松很多。
  它"中断"了什么?
  显然,SWFAddress 使用ExternalInterface 与Javascript 代码通讯。一个常见的问题是"如果Javascript 代码因为某种原因不进行上载或者ExternalInterface 在一个特定的浏览器中失败了,会发生什么?(你会说Safari ?)它会不会中断我的程序,阻止人们使用导航?幸运的是,答案是NO! SWFAddress 实际上并不依赖浏览器中URL 的改变来触发更改事件。当你使用setValue 时,它触发更改事件,然后试图更新URL 。如果它因为某种愿意不能运行,也没有什么大损失。
  如何使用Google Analytics
  如果你认为SWFAddress 很简单,那就等着知道你在Flex 或Actionscript 程序中尝试使用Google Analytics 吧(下载GAforFlash )。你所要做的就是创建一个GATracker 实例,你准备开始发送pageviews 到Google 。这次,我又发现只用一个静态类与Google 通讯,很有意义,这样你可以中心化格式及你想要进行的更改。
  下面是一个GATracker 的实例: var tracker:GATracker = new GATracker( FlexGlobals.topLevelApplication.stage, // DisplayObject 'UA-123456789-1', // Account Number 'AS3' // 'AS3' or 'Bridge' false // is in Debug mode? ) 第一个参数是DisplayObject ,如果你是在debug 模式,GATracker 可以用来显示关于它发送到Google 的反馈。第二个参数是你的账户号,在使用Google Analytics 建立账户时获得。(你不能使用这个代码,因为每个代码与特定的域相连)。第三个参数是一个串,你可以用来设置到 AS3 或Bridge 上。我使用AS3 。最后,你为debug 模式设置一个Boolean 。显然,你不想在debug 模式下公布你的网站。这只是为了进行测试。
  Bridge 或 AS3
  简而言之,这里显示的是Bridge 和AS3 模式的区别。Bridge 使用Actionscript ExternalInterface 与你在HTML 中的ga.js 模式通讯。如果你有一个Flash widget 内嵌在网页中,效果最佳。你会想要将widget 的分析数据与你已经跟踪的网站其它部分的分析数据混合起来。然而,如果你有一个程序,你想要单独跟踪它,你可能会要采用AS3 模式。在两种情况下,你的内嵌代码都应该向"always "设置allowscriptaccess 。
  在我使用GATracker 的项目中,我想要确保我在测试程序时,并没有向Google 发送数据。但是一旦发布了该程序,我还是不会忘记启用跟踪功能。为了streamline 该过程,我编写了一个简单的类,用于分析FlexGlobals.topLevelApplication.url 。如果程序在localhost 上运行,它就不会更新Google 。
  最后的代码如下所示: public static function update( path:String ):void { // If we are in development - on the localhost - then DON'T update Google Analytics. // This code below will only run on the production server. if( !AppURL.isLocalhost ) { // Initialized once. if( tracker == null ) { tracker = new GATracker( FlexGlobals.topLevelApplication.stage, 'UA-17962415-1', 'AS3', false ) } // Update Google Analytics. tracker.trackPageview( path ); } }   虽然Google Analytics 很简单,但是有时候还是有些麻烦的情况。我鼓励你阅读下Flash GA 跟踪指南,对功能设置有个完整的了解,遇到问题,就参考这些文件。
  SWFAddress 和 Google Analytics 两项都很强大,加起来就更为强大了。
  在一篇文章里,一起讨论SWFAddress 和Google Analytics 的原因就是,即便他们是相互独立的,他们还是互相构成了补充。如果你按照我的建议创建一个静态类,用于管理SWFAddress.CHANGE 事件-InBox.as - ,再创建另外一个静态类通过setValue 管理SWFAddess 的更新-OutBox.as ,那创建另外一个静态类,就更简单了-Analytics.as ,以更新Google 。在这个例子中,你会发现,大部分时间,即使不是所有的时间,你唯一需要调用Analytics 类的地方就是OutBox 类。在这个例子中,就是用户与你的程序互动。事件调用OutBox.as 中的某个方法,更改URL ,这就是我们可能想要传递给Google Analytics 的。
  Flex 4中的状态
  Flex4最棒的一点就是,它引入了一个很出色的功能-状态(千万不要以为Flex 2/3 的状态算得上是功能。应该尽力避免。)只要有可能,我会构建程序,在状态,URL 更改,和分析数据更新之间实现一对一的对应。如果你可以有效管理,你的开发过程就很开心了。当然,事情不是都这么简单,但是这个目标很不错。
  公共Google 账户
  我创建了一个与大家共享的Google 账户,有想要查看我构建的Slydes 程序收集的分析数据的,可以用这个账户。就是使用这个账户信息登陆Google 。(希望你不要随便更改此账户的密码。我自己本身是没需要再使用这个账户了。但是我愿意其它人开发使用Google Analytics Dashboard. ) 。
  用户名:AdobeFlexOpenDev
  密码: adobeflex4
  一旦登陆,你可以浏览Analytics Dashboard 。你能看到如独特的用户数量,pageviews,  图层叠加等信息。
  本文译自:http://insideria.com/2010/09/adding-deeplinking-an d-analyti.html

猜你喜欢

转载自szas26szas.iteye.com/blog/1572890