Hi @SanfordWhiteman - this is extremely helpful. However, I was wondering how I would adjust the code to capture multiple interestingPercentPosition? Specifically 25%, 50% and 75%. I tried to simply replace: (interestingPercentPosition : 33,) with (interestingPercentPosition : [25, 50, 75],). See code below:
<script>
var YouTubeMunchkinConfig = {
//interestingTimeSS : 10, elapsed time in seconds that you find interesting
interestingPercentPosition : [25, 50, 75], // elapsed percent that you find interesting
synthUrlBase : "/munchkinVideoTracker/video/" // base path of synthetic Visit Web Page hits (video ID is appended)
};
</script>
However, this doesn't work. Below is the entire code that I'm using on the test page.
<script>
var YouTubeMunchkinConfig = {
//interestingTimeSS : 10, elapsed time in seconds that you find interesting
interestingPercentPosition : [25, 50, 75], // elapsed percent that you find interesting
synthUrlBase : "/munchkinVideoTracker/video/" // base path of synthetic Visit Web Page hits (video ID is appended)
};
</script>
<script>
(function () {
var ytLib = document.createElement("script");
ytLib.src="https://www.youtube.com/iframe_api";
document.head.appendChild(ytLib);
var interestingTimeSS = 10,
interestingPercentPosition = 50,
synthUrlBase = "/munchkinVideoTracker/video/";
var YTMunchkin = { PlayerState: { PASSED_INTERESTING_MOMENT: 10 } },
friendlyStates = {};
var players = [],
arrayify = getSelection.call.bind([].slice);
window.onYouTubeIframeAPIReady = function () {
friendlyStates[YT.PlayerState.PLAYING] = "pressed-play";
friendlyStates[YT.PlayerState.PAUSED] = "pressed-pause";
friendlyStates[YT.PlayerState.ENDED] = "played-til-end";
friendlyStates[YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT] = "passed-im-mark";
arrayify(document.querySelectorAll(".youtube-wrapper")).forEach(function (wrapper) {
players.push({
player: new YT.Player(wrapper, {
width: wrapper.getAttribute("data-video-width"),
height: wrapper.getAttribute("data-video-height"),
videoId: wrapper.getAttribute("data-video-id"),
playerVars: { 'controls': 0, 'cc_load_policy': 1, 'enablejsapi': 1, 'rel': 0 },
events: { onStateChange: onPlayerStateChange },
}),
});
});
};
function onPlayerStateChange(event) {
var player = event.target,
states = [event.data],
videoId = player.getVideoData().video_id,
synthUrl = YouTubeMunchkinConfig.synthUrlBase + videoId,
timePositionSS = player.getCurrentTime(),
durationSS = player.getDuration(),
percentPosition = (timePositionSS / durationSS).toFixed(2) * 100;
if ((timePositionSS >= YouTubeMunchkinConfig.interestingTimeSS || percentPosition >= YouTubeMunchkinConfig.interestingPercentPosition) && !player.loggedInterestingMoment) {
states.push(YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT);
}
states.forEach(function (state) {
switch (state) {
case YT.PlayerState.PLAYING:
case YT.PlayerState.PAUSED:
case YT.PlayerState.ENDED:
case YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT:
console.log("YTMunchkin: " + friendlyStates[state]);
Munchkin.munchkinFunction("visitWebPage", { url: synthUrl, params: "movie-action=" + friendlyStates[state] + "&" + "movie-percent-position=" + percentPosition });
break;
}
if (state == YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT) {
player.loggedInterestingMoment = true;
}
});
}
})();
</script>
If needed, I can share the test page. Any assistance would be greatly appreciated.
.png)