Question

我已在我的html代码IFrame标签中嵌入了YouTube视频。我想跟踪其在Mixpanel Analytic中的播放按钮点击。嵌入会在iframe中添加新的HTML。我无法获得一些独特的ID来设置跟踪点。我的代码是：

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

Answer 1

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

Answer 2

你可以尝试类似的东西

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

如何在Mixpanel中跟踪youtube嵌入式视频的播放按钮点击？

2 个答案: