youtube - 使用Universal Analytics跟踪嵌入式YouTube视频

Question

我正在升级到通用Analytics(分析)，并希望跟踪嵌入在tumblr博客中的youtube视频。谁能帮助我改编以下代码以与Universal Analytics配合使用？

<script>
  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //  This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '289',
      width: '428',
      videoId: 'VIDEO ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  //  The API will call this function when the video player is ready. Uncomment the below code to start video when ready
  function onPlayerReady(event) {
    // event.target.playVideo();
    }
  function onPlayerStateChange(event) {
    var lastAction="";
      switch (event.data){
        case YT.PlayerState.PLAYING:
        if (lastAction != 'paused'){
            _gaq.push(['_trackEvent','video', 'Playing', getPercentage()]);
        }
        else{
            lastAction = '';
           }
        break;
        case YT.PlayerState.ENDED:
          _gaq.push(['_trackEvent','video', 'Completed',getPercentage()]);
        break;
        case YT.PlayerState.PAUSED:
         if (lastAction != 'paused'){
            _gaq.push(['_trackEvent','video', 'Paused', getPercentage()]);
            lastAction= "paused";
           }
        break;
        }
    }
    function getPercentage()
    {
    var pecentage =((player.getCurrentTime()/player.getDuration())*100).toFixed();
      if(pecentage > 0 && pecentage <= 25){
       return "0-25%";}
      elseif(pecentage > 25 && pecentage <= 50){
       return "25-50%";}
      elseif(pecentage > 50 && pecentage <= 75){
       return "50-75%";}
      elseif(pecentage > 75){
       return "75-100%";}
    }
    function stopVideo() {
     _gaq.push(['_trackEvent','video', 'Stopped', player.getDuration()]);
      player.stopVideo();
    }
</script>

Answer 1

我直接尝试了您的代码，但遇到了一些问题，但是在播放/结束使用此代码时，它至少可以在基本通知方面起作用:

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

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEOID HERE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  //    Uncomment the event to have video start automatically.
  function onPlayerReady(event) {
    // event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video,
  //    the player should send to Google Analytics.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      ga('send', 'event', 'YouTube', 'Watched', 'Promo from Main Page');
    }
    if (event.data == YT.PlayerState.ENDED) {
      ga('send', 'event', 'YouTube', 'Finished', 'Promo from Main Page');
    }
  }
</script>