如何在Flex中应用GA Tracking(转)
主要通过GA的Event Tracking功能实现对网页中flv视频播放情况的信息搜集。
新建Flex Project, 记得在Lib中引用analytics_flash.swc和analytics.swc
代码如下:
代码
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
3
4 <mx:Script>
5 <![CDATA[
6 import mx.events.MetadataEvent;
7 import mx.controls.Button;
8 import mx.events.VideoEvent;
9 import mx.controls.VideoDisplay;
10 import mx.containers.Panel;
11 import com.google.analytics.GATracker;
12
13 private var tracker:GATracker;
14 private var readyTime:Number;
15 private var video:VideoDisplay;
16
17 public function initExample2():void
18 {
19 tracker = new GATracker(this, "UA-10261281-2", "AS3", true);
20
21 //build video UI
22 var panel:Panel = new Panel();
23 panel.title = "Example 2";
24 panel.setStyle("Color","Red");
25 panel.setStyle("horizontalAlign", "center");
26 panel.x = 20;
27 panel.y = 40;
28 panel.width = 545;
29 panel.height = 372;
30
31 this.addChild(panel);
32 video = new VideoDisplay();
33 video.autoPlay = true;
34 video.width = 525;
35 video.height = 300;
36 video.autoRewind = false;
37 video.addEventListener(VideoEvent.READY, handleReady);
38 video.addEventListener(VideoEvent.COMPLETE, handleComplete);
39 panel.addChild(video);
40 var button:Button = new Button();
41 button.label = "Pause";
42 button.addEventListener(MouseEvent.CLICK, handlePause);
43 panel.addChild(button);
44
45 readyTime = new Date().time;
46 video.source = "http://farm.sproutbuilder.com/asset/JwDKrdjrDnJcRVxp.flv";
47 }
48
49 public function handleReady(event:Event):void
50 {
51 // calculate time (in milliseconds) in which
52 // the video was ready to play
53 readyTime = new Date().time - readyTime;
54 tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime);
55 }
56
57 public function handleComplete(event:Event):void
58 {
59 tracker.trackEvent("Videos", "Completed", "Video1");
60 }
61
62 public function handlePause(event:MouseEvent):void
63 {
64 var button:Button = event.target as Button;
65 if (button.label == "Pause") {
66 video.stop();
67 button.label = "Resume";
68 tracker.trackEvent("Videos", "Paused", "Video1");
69 } else {
70 video.play();
71 button.label = "Pause";
72 tracker.trackEvent("Videos", "Resumed", "Video1");
73 }
74 }
75
76 ]]>
77 </mx:Script>
78 <mx:Button x="10" y="10" label="This is a button"
79 id="newButton"
80 click="initExample2()"/>
81 </mx:Application>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
3
4 <mx:Script>
5 <![CDATA[
6 import mx.events.MetadataEvent;
7 import mx.controls.Button;
8 import mx.events.VideoEvent;
9 import mx.controls.VideoDisplay;
10 import mx.containers.Panel;
11 import com.google.analytics.GATracker;
12
13 private var tracker:GATracker;
14 private var readyTime:Number;
15 private var video:VideoDisplay;
16
17 public function initExample2():void
18 {
19 tracker = new GATracker(this, "UA-10261281-2", "AS3", true);
20
21 //build video UI
22 var panel:Panel = new Panel();
23 panel.title = "Example 2";
24 panel.setStyle("Color","Red");
25 panel.setStyle("horizontalAlign", "center");
26 panel.x = 20;
27 panel.y = 40;
28 panel.width = 545;
29 panel.height = 372;
30
31 this.addChild(panel);
32 video = new VideoDisplay();
33 video.autoPlay = true;
34 video.width = 525;
35 video.height = 300;
36 video.autoRewind = false;
37 video.addEventListener(VideoEvent.READY, handleReady);
38 video.addEventListener(VideoEvent.COMPLETE, handleComplete);
39 panel.addChild(video);
40 var button:Button = new Button();
41 button.label = "Pause";
42 button.addEventListener(MouseEvent.CLICK, handlePause);
43 panel.addChild(button);
44
45 readyTime = new Date().time;
46 video.source = "http://farm.sproutbuilder.com/asset/JwDKrdjrDnJcRVxp.flv";
47 }
48
49 public function handleReady(event:Event):void
50 {
51 // calculate time (in milliseconds) in which
52 // the video was ready to play
53 readyTime = new Date().time - readyTime;
54 tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime);
55 }
56
57 public function handleComplete(event:Event):void
58 {
59 tracker.trackEvent("Videos", "Completed", "Video1");
60 }
61
62 public function handlePause(event:MouseEvent):void
63 {
64 var button:Button = event.target as Button;
65 if (button.label == "Pause") {
66 video.stop();
67 button.label = "Resume";
68 tracker.trackEvent("Videos", "Paused", "Video1");
69 } else {
70 video.play();
71 button.label = "Pause";
72 tracker.trackEvent("Videos", "Resumed", "Video1");
73 }
74 }
75
76 ]]>
77 </mx:Script>
78 <mx:Button x="10" y="10" label="This is a button"
79 id="newButton"
80 click="initExample2()"/>
81 </mx:Application>
在代码顶部引用Google的API
import com.google.analytics.GATracker;
由此才可以再函数initExample2中初始化GA Tracker对象
tracker = new GATracker(this, "UA-10261281-2", "AS3",true);
最后一个参数visualDebug很有用,设为true时,Event被触发时并不会发往 名为"UA-10261281-2"的GA 账号,而是仅在页面下方显示这些事件,也就是调试信息
其实最重要的还是 tracker.trackEvent方法,正是它向GA发送Event数据。
以 tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime)为例,第一个参数"Videos"代表Event所属的事件集的名称,第二个参数"ReadyTime"则是具体被触发的时间名称, 接着"Video1"则是一个对该动作的附加标志(可选),如果再有一个视频在同一页面下需要Track这里就可以填"Video2"了,第四个readyTime则是需要传递的参数值,载入时间或者播放时间等等,同样是可选。
差不多就这样了,主要是了解下GA如何Tracking网上的一些视频播放状况,备忘。