给你的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 服务器，你要求什么作为网页浏览量，并且发送更新数据。最棒.给你的Flex程序添加深链接和分析-其实比你想象的要简单 .的就是，它可以让你全权控制你想要跟踪的内容。你可以，譬如，添加跟踪，当用户观看一部视频时，每隔十秒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 代码就是这样： <mce:script type="text/javascript" src=\'#\'" mce_src=\'#\'" /mce:script> <mce:script type="text/javascript" src=\'#\'" mce_src=\'#\'" /mce:script> 关于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