2015-04-15 128 views
0

我在我的HTML代碼IFrame標記中嵌入了一個YouTube視頻..我想跟蹤它在Mixpanel分析中的播放按鈕點擊。嵌入使用iframe添加了一個新的HTML。我無法獲得一些唯一的ID來放置我的跟蹤點。我的代碼是:如何在Mixpanel中跟蹤播放按鈕點擊YouTube嵌入式視頻?

<div class="video"> 
    <iframe src="https://www.youtube.com/embed/nA8nZHCqUVs" width="650" height="360" ></iframe> 
</div> 
+0

您的代碼是:不存在 – deW1

+0

這是代碼行中我想跟蹤事件..這會在我的頁面中打開一個視頻 – Swati

回答

3

你必須使用YouTube的API,用於嵌入視頻:https://developers.google.com/youtube/js_api_reference?csw=1

,然後你可以是這樣的:

// create instance of youtube player first (=playerId) 

function onYouTubePlayerReady(playerId) { 
    ytplayer = document.getElementById("myytplayer"); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); 
} 

function onytplayerStateChange(newState) { 
    if (newState === "playing") { // don't know how newState looks like 
     mixpanel.track("Play video"); 
    } else { 
     mixpanel.track("Stop video"); 
    } 
} 
3

您可以嘗試類似的東西

<body> 
    <div id="video-player"></div> 

<script id="youtube-tracking-script"> 

    var youtubeVideoId = 'KXdUNp_9oHs'; // replace with your own video id   

    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 

    var firstScriptTag = document.getElementById("youtube-tracking-script"); 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player; 

    function onYouTubeIframeAPIReady() 
    { 
     player = new YT.Player('video-player', { 
      height: '352', 
      width: '640', 
      videoId: youtubeVideoId, 
      events: { 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerStateChange(event) 
    { 
     if (event.data == YT.PlayerState.PLAYING) { 
      mixpanel.track("Play Video Clicked", 
       { 
        "youtube_video_id": youtubeVideoId 
       }); 
     } 
     else if(event.data == YT.PlayerState.PAUSED) { 
      mixpanel.track("Video Paused", 
       { 
        "youtube_video_id": youtubeVideoId 
       }); 
     } 
     else if(event.data == YT.PlayerState.ENDED) { 
      mixpanel.track("Video ended", 
       { 
        "youtube_video_id": youtubeVideoId 
       }); 
     } 
    } 
</script> 

</body> 
相關問題