javascript - How to track play button click of youtube embedded video in Mixpanel?

I have embedded a YouTube Video in my html code IFrame tag..I want to track its play button click in Mixpanel Analytic. Embedding adds a new HTML with the iframe. I am not able to get some unique id to put my tracking point. My code is:

<div class="video">
    <iframe src="" width="650" height="360" ></iframe>
</div>

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

Share Improve this question edited Apr 16, 2015 at 6:56 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Apr 15, 2015 at 6:06 Swati 311 silver badge7 bronze badges

your code is: not present – deW1 Commented Apr 15, 2015 at 6:07
This is the line of code in which I want to track the event..This opens up a video in my page – Swati Commented Apr 15, 2015 at 7:13

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You have to use the Youtube-API for embedding the video: https://developers.google./youtube/js_api_reference?csw=1

and then you could something like this:

// 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");
   }
}

You can try something like that

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744766910a4592515.html

javascript - How to track play button click of youtube embedded video in Mixpanel? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to track play button click of youtube embedded video in Mixpanel? - Stack Overflow

2 Answers 2

相关推荐