삽입 된 YouTube 동영상보기보기

Question

내 웹 사이트에 일부 YouTube 비디오를 삽입했습니다. Google 애널리틱스를 사용하여 각 동영상의 조회수를 추적하고 싶지만 동영상이 iFrame을 사용하여 임베드되어 있기 때문에 어떤 onClick 이벤트도 잡을 수 없습니다. iFrame을 사용하여 내 웹 페이지에 삽입 된 YouTube 동영상의 조회수를 추적하려면 어떻게해야합니까?

Answer 1

YouTube의 API를 사용하여 Google 애널리틱스에서 이벤트를 재생으로 추적했습니다. iFrame API과 javascript의 형식이 같습니다. 다른 기능을 추적하려면 iFrame API를보십시오. 이것은 내가 원래 event tracking information을 가지고있는 곳입니다.

당신은 아래의 동영상 ID 변경해야합니다 :

<div id="player"></div> 

<script type="text/javascript"> 
    var tag = document.createElement('script'); 
    tag.src = "http://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 

    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'fYmrMt01S1U', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerReady(event) { 
     /// event.target.playVideo(); 
    } 

    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING) { 
      _gaq.push(['_trackEvent', 'Videos', 'Play', 
      player.getVideoUrl()]); 
     } 
     if (event.data == YT.PlayerState.PAUSED) { 
      _gaq.push(['_trackEvent', 'Videos', 'Paused', 
      player.getVideoUrl()]); 
     } 
     if (event.data == YT.PlayerState.ENDED) { 
      _gaq.push(['_trackEvent', 'Videos', 'Watch to End', 
      player.getVideoUrl()]); 
     } 
    } 
    // ]]> 
</script>