2014-05-13 29 views
0

我在我們的網站上有一段視頻,我正在跟蹤使用Google Analytics的觀點。這是代碼:如何使用Google Analytics和YouTube API在一頁上跟蹤兩​​個視頻?

<!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

<script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var utm_source='<?php echo $utm_source ?>'; 
     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: 'xxxxxxxxxx', 
      frameborder: '0', 
      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 (state=1), 
     // the player should play for six seconds and then stop. 
     function onPlayerStateChange(event) { 
      if (event.data == YT.PlayerState.PLAYING) { 
       if (utm_source == 'zilch') { 
        ga('send', 'event', 'YouTube', 'Started', 'Promo from Main Page'); 
       } 
       else if (utm_source == 'CAMPAIGN') { 
        ga('send', 'event', 'YouTube', 'Started', 'Promo from Main Page via CAMPAIGN'); 
       } 
       else { 
        ga('send', 'event', 'YouTube', 'Started', 'Promo from Main Page'); 
       } 
      } 
      if (event.data == YT.PlayerState.ENDED) { 
       if (utm_source == 'zilch') { 
        ga('send', 'event', 'YouTube', 'Finished', 'Promo from Main Page'); 
       } 
       else if (utm_source == 'CAMPAIGN') { 
        ga('send', 'event', 'YouTube', 'Finished', 'Promo from Main Page via CAMPAIGN'); 
       } 
       else { 
        ga('send', 'event', 'YouTube', 'Finished', 'Promo from Main Page'); 
       } 
     } 
     } 
    </script> 

如果我複製並粘貼此代碼,並更改視頻ID它會覆蓋原始。如果我複製並粘貼此代碼,並留下視頻ID而不是顯示兩個,它只顯示原始內容。

我該如何工作,才能在頁面上追蹤多個視頻?我認爲它與<div id='player'></div>有關,但我沒有看到如何更改目標股利。

回答

0

我怎麼最終解決這個問題就是使用Nevo Lightbox。然後,我爲每個視頻創建了一個縮略圖,並將其鏈接爲:

<a href='https://www.youtube.com/watch?v=videoID' data-lightbox-gallery='playlist' title='Video description' onclick="ga('send', 'event', 'Video', 'Play', 'Demo on videos');"> 

更改視頻ID和視頻說明。可能有更優雅的解決方案,但它可以完成工作。

相關問題