我正试图在我的网站上为IFRAMEVimeo视频嵌入设置GA事件跟踪。然而，我不知道跟踪对象应该放在IFRAME代码中的哪里/如何放置。
这是我的IFRAME嵌入代码：
<iframe src="http://player.vimeo.com/video/51447433" width="500"
height="281"frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen></iframe>
以下是我认为GA事件跟踪代码应该的样子：
<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Title']);">Play</a>
这会在我的嵌入代码中出现吗？有人能告诉我这个应该是什么样子/工作原理吗？
您需要使用播放器API，因为您不能在这样的第三方域的iframe中注入代码。
根据提供给播放器API的文档，t应该是这样的。
工作示例
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
var f = document.getElementsByTagName('iframe')[0],
url = f.src.split('?')[0];
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
}
else {
window.attachEvent('onmessage', onMessageReceived, false);
}
// Handle messages received from the player
function onMessageReceived(e) {
var data = JSON.parse(e.data);
switch (data.event) {
case 'ready':
onReady();
break;
case 'play':
onPlay();
break;
case 'finish':
onFinish();
break;
}
}
// Helper function for sending a message to the player
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f.contentWindow.postMessage(JSON.stringify(data), url);
}
function onReady() {
post('addEventListener', 'finish');
post('addEventListener', 'play');
}
function onFinish() {
_gaq.push(['_trackEvent', 'Vimeo Video', 'finish', url]);
}
function onPlay() {
_gaq.push(['_trackEvent', 'Vimeo Video', 'play', url]);
}
</script>
</head>
<body>
<iframe src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</body>
</html>
上面的代码可以通过使用Vimeo Mogaloop api来简化，该api为您抽象了Message Passing api，代价是加载带有库的Javascript。
插件即可使用
请注意，上面的代码只能作为一个例子使用，如果你在一个页面上有多个视频，那么就很难把它做好。或者，你也可以使用GAS(我是那里的主要开发者)库，它有一个跟踪Vimeo视频的插件。
关于兼容性的警告
注意关于兼容性的警告，我想如果你使用flash方法插入播放器，你可以获得更广泛的浏览器支持，但会完全杀死iOS设备的播放器：
使用通用嵌入代码，与播放器是通过使用window.postMessage。postMessage是一个相对较新的开发，因此它只能在Internet Explorer 8+、Firefox中使用3+、Safari 4+、Chrome和Opera 9+。
谷歌类固醇分析有一个跟踪Vimeo的功能。值得查看