在网站上设置视频播放跟踪

时间:2017-06-22 13:45:25

标签: iframe google-analytics youtube youtube-api ytplayer

我正在尝试在几个网站上跟踪不同的视频。这些视频都在YouTube上托管,我将它们嵌入到一些Joomla网站中。我正在尝试为视频设置事件跟踪,以便我可以查看哪些视频正在哪些网站上播放。经过多次阅读和研究后,我发现我需要设置事件和youtube api。我已经尝试了很多混合差异的版本,但我仍然无法触发事件。 (我认为)

我拼凑了以下“代码”并将其放在网站上。我将视频嵌入页面并播放,但是当我去ganalytics时,事件没有被触发。我错过了什么?当我拼凑它时,我可能比我需要的更多。我想知道的是在网站上播放哪些视频。

enter code here

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<iframe id="player" type="text/html"width="853" height="480" src="https://www.youtube.com/embed/9dWmDOdtPO0?enablejsapi=1&origin=http://www.mywebsite.com"
  frameborder="0"></iframe>


    <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', {

          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
          }
        });
      }

// 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
       console.log('player is ready');
      }


      // 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
    switch (event.data) {
     case YT.PlayerState.PLAYING:
      ga('send', 'event', 'Videos', 'playing', 'Home Page Video', 'Create Memories')
      })
      break;
    case YT.PlayerState.PAUSED:
      ga('send', 'event', 'Videos', 'paused', 'Home Page Video', 'Create Memories')
      })
      break;
    case YT.PlayerState.ENDED:
      ga('send', 'event', 'Videos', 'ended', 'Home Page Video', 'Create Memories')
      })
      break;

    };
};

    </script>

0 个答案:

没有答案