使用GA事件跟蹤進行視頻跟蹤

我正在嘗試在我的網站上爲IFRAME Vimeo Video嵌入設置GA事件跟蹤。但是，我無法弄清楚跟蹤對象應該放在我的IFRAME代碼中的位置/方式。使用GA事件跟蹤進行視頻跟蹤

這裏是我的IFRAME嵌入代碼：

<iframe src="http://player.vimeo.com/video/51447433" width="500" 
    height="281"frameborder="0" webkitAllowFullScreen 
    mozallowfullscreen allowFullScreen></iframe>

這就是我認爲的GA Event Tracking代碼應該樣子：

<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Title']);">Play</a>

哪裏該走在我的嵌入代碼？有人可以告訴我這應該看起來/工作？

來源

2012-11-29 Brett

您需要使用播放器API，因爲您不能在類似的第三方域內的iframe中注入代碼。

根據爲player API提供的文檔，應該看起來像這樣。

Working Example

<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你，在與庫加載的Javascript的成本可以簡化一個。

插件隨時使用

注意，上面的代碼將僅作爲示例的工作，如果你有一個頁面上的多個視頻內容很難得到它的權利。或者，您也可以使用GAS（我是那裏的主要開發人員）庫，它有plugin for tracking Vimeo Video。

警告有關兼容性

注意有關兼容性的警告，我想如果你使用閃光燈方法插入播放器，你可以得到更廣泛支持的瀏覽器，但完全殺死玩家爲iOS設備：

使用通用嵌入代碼，與播放器交互的唯一方法是使用window.postMessage。 postMessage是一個相對較新的開發版，因此它僅適用於Internet Explorer 8+，Firefox 3+，Safari 4+，Chrome和Opera 9+。

來源

2012-11-29 20:08:32 Eduardo

似乎只是一個視頻「玩」的可怕的很多解決方法。感謝這裏的幫助，非常有幫助。 – Brett

我在舞臺和開發環境中爲我的網站工作，但它似乎並沒有在生產上工作。生產網站是在https，認爲這可能是原因？ – SirM

Google Analytics on Steroids具有跟蹤Vimeo的功能。值得檢查到

來源

2012-11-29 20:38:13 TomFuertes

使用GA事件跟蹤進行視頻跟蹤

回答

相關問題