如何在混音面板中跟踪YouTube嵌入式视频的播放按钮点击

我在我的html代码IFrame标签中嵌入了一个YouTube视频。我想在混合面板分析中跟踪它的播放按钮点击。嵌入会使用 iframe 添加新的 HTML。我无法获得一些唯一的ID来放置我的跟踪点。我的代码是：

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

你必须使用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");
   }
}

你可以尝试这样的事情

<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>

相关内容

最新更新

热门标签：