竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier

27月/120

Google Analytics高级应用系列教程[事件跟踪]

事件跟踪

这里是事件跟踪是指Event Tracking,意思比鼠标事件跟踪广泛,先看看都能统计到什么:

  1. Flash内容,比如flash站点和flash动画,甚至flash游戏都可以。
  2. 嵌入式AJAX
  3. 网页小饰件
  4. 文件下载
  5. 数据或文件的载入时间

这里用到的是_trackEvent()方法,用法如下:


  1. _trackEvent(category, action, optional_label, optional_value)   

 

  1. category (必填)这个是标注想统计项目的分类
  2. action (必填)这个是分类下的具体行为
  3. label (可选)可以理解为对action的一个描述,可选
  4. value (可选)这个是一个整数型的字段,通常用于统计下载次数或者载入时间

 

如果部署了时间跟踪,在google analytics的报告里还有一个字段叫做Implicit Count(隐式计数),这个是统计交互行为的,比如点了10次某个按钮,点一次算一次,类似PV,这个值需要根据不同的部署去理解。

 

用音乐站来说明_trackEvent()的用法:

 


  1. pageTracker._trackEvent("music""Play""日光倾城"); 
  2. pageTracker._trackEvent("music""Pause""日光倾城"); 
  3. pageTracker._trackEvent("music""Stop""日光倾城"); 

 

music是category,play是action,日光倾城是label(这里是歌名),放在链接上是这样的:

 


  1. <a href="#" onClick="pageTracker._trackEvent("music", "Play", "日光倾城");">播放</a> 
  2. <a href="#" onClick="pageTracker._trackEvent("music", "Pause", "日光倾城");">暂停</a> 
  3. <a href="#" onClick="pageTracker._trackEvent("music", "Stop", "日光倾城");">停止</a> 

 

如果加载在播放器的按钮上,就能统计到用户试听《日光倾城》这首歌时的行为。

 

如果是统计MP3文件被下载的信息,就是这样写:

 


  1. <a href="#" onClick="pageTracker._trackEvent('Downloads', 'MP3', '日光倾城', downloadTime);">下载</a>  

 

这里加入了value,每次在MP3文件被下载完之后,时间会以秒为单位计入value,在报告里用downloadTime表示,加上 Implicit Count,就能计算出平均每次下载时间,同理,可以用于记录flash动画的播放。需要注意的是第四个参数是整数型。

 

扩展运用

 

这里介绍两个js库:

 

TimeTracker() :http://code.google.com/apis/analytics/samples/time-tracker.js

 

MouseOverTracker() :http://code.google.com/apis/analytics/samples/mouseover-tracker.js

 

它们需要额外加载到被统计页面。

 

TimeTracker()主要有两个特性:1、记录持续时间;2、生成柱状图

 

如果不自定义代码,使用TimeTracker()会创建一个叫做“TimeTracker”的分类,记录开始和结束时间,计算时间差并发送给 google analytics形成报告,用柱状图显示平均时间等数据。用处非常广泛,比如监听页面平均加载时间、视频加载时间、flash界面加载时间或是嵌入式 js脚本加载时间等等。

 

函数如下:

 


  1. TimeTracker(opt_buckets_array) //返回一个新的时间跟踪器 
  2. _recordStartTime(opt_time) //记录开始时间 
  3. _recordEndTime(opt_time) //记录结束时间 
  4. _setHistogramBuckets(buckets_array)
  5. //定义柱状图刻度,默认是[100, 200, 300, 400, 500, 1000, 1500, 2000, 2500, 5000] 
  6. _getTimeDiff() //计算时间差 
  7. _track(tracker, opt_event_object_name, opt_event_label)
  8. //使用_track()需要保证之前已经记录了开始时间和结束时间 

 

  • tracker是指google analytics在被统计页面已经实例化的一个跟踪项,比如pageTracker
  • opt_event_object_name是定义TimeTracker()统计数据出现在报告中的名字,默认是“TimeTracker”
  • opt_event_label是描述这个TimeTracker()的,为了在报告中更容易找到

 

google给出的运用示例:

 


  1. <html>   
  2. <head>   
  3. <title>Latency Tracking Demo</title>   
  4. </head>   
  5. <body>   
  6. <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>   
  7. <script type="text/javascript" src="http://www.example.com/scripts/time-tracker.js"></script>   
  8. <script type="text/javascript">   
  9. var timeTracker = new TimeTracker();   
  10. var pageTracker = _gat._getTracker("UA-1735986-1");    
  11. </script>   
  12. <input type="button" value="Start Timer" onclick="javascript:timeTracker._recordStartTime();"/>   
  13. <input type="button" value="Stop Timer" onclick="javascript:timeTracker._recordEndTime();"/>   
  14. <input type="button" value="Track!" onclick="javascript:timeTracker._track(pageTracker, undefined, 'Manual Test');"/>   
  15. </body>   
  16. </html> 

 

定义柱状图的示例:

 


  1. // somewhere at the top of the page 
  2. var timeTracker = new TimeTracker(); 
  3. timeTracker._recordStartTime(); 
  4.  
  5. // page load and setup 
  6.  
  7. // now when the page is done loading... 
  8. timeTracker._recordEndTime(); 
  9.  
  10. // Specify your own histogram "action" values 
  11. timeTracker._setHistogramBuckets([10, 20, 50, 100, 500, 1000]); 
  12.  
  13. // assuming pageTracker is called from _gat._getTracker(account)  
  14. timeTracker._track(pageTracker); 

 

MouseOverTracker()

 

用户在一个PV里可能会多次触发onMouseOver()事件,这样统计到的数据水分很多,使用这个库就可以只统计第一次onMouseOver()事件而忽略掉后续的。

 

函数如下:


  1. MouseOverTracker(tracker) 
  2. //返回一个新的跟踪器,tracker是可选参数,需要是已经在页面中实例化的跟踪项,比如pageTracker 
  3. _trackMouseOver() 
  4. //这个方法第一次被调用的时候,一个onMouseOver()事件被记录,后续操作不记录 

 

示例:

 


  1. //  We want to track mouse overs on a video unit that has the element id "myVideoUnit". 
  2. // assuming pageTracker is called from _gat._getTracker(account)  
  3.  
  4. var mouseOverTracker = new MouseOverTracker(pageTracker); 
  5. document.getElementById("myVideoUnit").onMouseOver = mouseOverTracker._trackMouseOver; 

喜欢这个文章吗?

考虑订阅我们的RSS Feed吧!

发布在 邵珠庆

评论 (0) 引用 (0)

还没有评论.


Leave a comment

还没有引用.