6

Tôi đang cố gắng thiết lập tính năng Theo dõi sự kiện GA trên trang web của mình để nhúng IFRAME Vimeo Video. Tuy nhiên, tôi không thể tìm ra nơi/làm thế nào các đối tượng theo dõi nên được đặt trong mã số IFRAME của tôi.Theo dõi video bằng cách sử dụng Theo dõi sự kiện GA

Đây là mã IFRAME nhúng của tôi:

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

Dưới đây là những gì tôi nghĩ các GA Event Tracking đang nên trông giống như:

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

đâu này đi trong mã nhúng của tôi? Ai đó có thể chỉ cho tôi cách thức này nên trông/làm việc?

Trả lời

6

Bạn cần sử dụng API trình phát vì bạn không thể chèn mã bên trong khung nội tuyến trên miền của bên thứ ba như vậy.

Dựa trên tài liệu được cung cấp cho số player API t sẽ trông giống như thế này.

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> 

Đoạn mã trên có thể được đơn giản hóa bằng cách sử dụng một api Vimeo Mogaloop mà tóm tắt các tin nhắn Đi qua API cho bạn, với chi phí bốc Javascript với thư viện.

Plugins Sẵn sàng để sử dụng

Lưu ý rằng các mã trên sẽ chỉ làm việc như một ví dụ và nếu bạn có nhiều video trên một trang nó có thể là khó khăn hơn để có được nó ngay. Hoặc bạn cũng có thể sử dụng thư viện GAS (Tôi là nhà phát triển chính ở đó) có plugin for tracking Vimeo Video.

Cảnh báo về khả năng tương thích

Lưu ý các cảnh báo về khả năng tương thích, tôi đoán nếu bạn chèn các cầu thủ sử dụng phương pháp flash bạn có thể nhận được một phạm vi rộng hơn các trình duyệt được hỗ trợ nhưng giết người chơi hoàn toàn cho các thiết bị iOS:

Với mã nhúng phổ dụng, cách duy nhất để tương tác với trình phát là sử dụng window.postMessage. postMessage là một phát triển tương đối mới , vì vậy nó chỉ khả dụng trong Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome và Opera 9+.

+0

Có vẻ như rất nhiều cách giải quyết chỉ để thực hiện một video "phát". Cảm ơn sự giúp đỡ ở đây, rất hữu ích. – Brett

+0

Tôi đã làm việc này cho trang web của mình trên sân khấu và môi trường dev nhưng dường như nó không hoạt động trên sản xuất. Trang web sản xuất nằm trong https, nghĩ rằng đây có thể là lý do? – SirM

Các vấn đề liên quan