使用Google Analytics跟踪优酷视频播放

Jeff网站分析

LunaMetrics给出了完整YouTube视频的跟踪方案，但对于国内的用户来说，网站上如果有放置视频的话一般会选择放置的是YouKu优酷的视频，通过优酷提供的API，我们只要申请一个youku开发账号，拿到client id后就可以对网站上所有引用的优酷视频进行监测。

以下是一个完整的视频跟踪代码示例：

//track YouKu Video
function traceVideo(){	
	$('iframe').each(function(){
		var src = $(this).attr('src');
		var height = $(this).attr('height');
		var width = $(this).attr('width');

		if( src.indexOf('http://player.youku.com') > -1 ){
	          var video_id = src.replace(/.*\/embed\/([^\?]+)\?.*/, '$1');

		  $(this).replaceWith('<div id="youkuplayer"></div><iframe id="video_iframe" 
width="100%" height="0" src="" frameborder="0" allowfullscreen></iframe>');

		  var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.src = 'http://player.youku.com/jsapi';
		  var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ga, s);

		  var int = setInterval(function(){
			if( typeof YKU == 'object' ){
			    clearInterval(int);
			    player = new YKU.Player('youkuplayer',{
			      client_id:'你的youku client_id',
			      vid:video_id,
			      width:width,
			      height:height,
			      autoplay:true,
			      show_related:true,
			      events:{ 
				'onPlayerReady': function(){}, 
				'onPlayStart': function(){ _gaq.push(['_trackEvent', 'Videos',
 'Start to Play', video_id+'@'+document.location.pathname + document.location.search]); }, 
				'onPlayEnd': function(){ _gaq.push(['_trackEvent', 'Videos', 
'Watch to End', video_id+'@'+document.location.pathname + document.location.search]); }  
							}
						} 
					);
				}
			},1000);
		}
	});
}

上述的代码主要配置了视频播放开始和播放完成的动作跟踪。比如视频开始播放的跟踪代码是这样的：

_gaq.push(['_trackEvent', 'Videos', 'Start to Play', video_id+'@'+document.location.pathname 
+ document.location.search]);

标签使用了“视频ID@页面路径”的方式表示，以方便查看某个视频在某个页面上的播放次数。

有一个问题要注意一下，如果你的视频开头和结尾是有广告的，视频开始播放的跟踪代码在开头的广告播放完成后才会触发，而视频播放完成的跟踪代码在结尾的广告播放完成后才会触发。如果用户已观看完视频但没等到结尾的广告播放完成就关闭了播放窗口，那么你将统计不到这一部分实际已播放完成的数据。

而如果要跟踪播放进度的内容，可参考Rokie的思路：写一段循环代码，首先用api获取视频总长度，然后每几秒种返回一下页面播放进度，通常我们会在25%，50%，75%时触发GA的事件代码。当然也可以利用onunload和onbeforeunload在页面关闭或离开时返回播放时长到GA server，这里推荐使用user timing，这样可以方便的获得播放时间分布。

发表评论