Here's sample code that tracks YouTube events (Play, Pause, Play Until End) using Munchkin. Adapted from YT's guide
<!-- 1. this DIV is replaced by the player IFRAME -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.getElementsByTagName('head')[0].appendChild(tag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player, videoId = 'M7lc1UVf-VE';
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
events: {
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
switch( event.data ) {
case YT.PlayerState.PLAYING:
Munchkin.munchkinFunction('visitWebPage', {
url: 'https://youtube.com/'+videoId
,params: 'movie-action=pressed-play'
}
);
break;
case YT.PlayerState.PAUSED:
Munchkin.munchkinFunction('visitWebPage', {
url: 'https://youtube.com/'+videoId
,params: 'movie-action=paused'
}
);
break;
case YT.PlayerState.ENDED:
Munchkin.munchkinFunction('visitWebPage', {
url: 'https://youtube.com/'+videoId
,params: 'movie-action=played-til-end'
}
);
break;
}
}
</script>
Of course you probably don't care about multiple Play events and likely don't care about Pause. Play Until End is significant -- but the catch is that the lead could pause 1 sec. before the end and you'd just see a Pause.
.png)