Thanks! Confirming this works. However i'm noticing that doing it that way makes it extremely hard to scalably track how long people are watching because it seems to only record the percentage if they click or pause the video. So I wouldn't be able to pull a list of people who reached at least 25%, i could only pull people that clicked or paused a video at the 25% mark. Alternatively, I used the below code that I tested out and it works. This watches and waits for a user to hit a certain percentage milestone ( 25%, 50%,75%) or whatever other percentage i define in the "playbackmilestones", as well as the actual time watched. That way I can pull a smart list and find every person who has watched atleast 25% of the video! Putting the code here so other users can see and use as well. < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > < / script > < div id = "digitalpi-yt-player" data - youtube - id = "YGdk0IMKzTo" data - video - width = "640" data - video - height = "340" > < / div > < script > // Set options var playerEl = "digitalpi-yt-player" , // id attribute of html element to be replaced with iframed video player playbackMilestones = [ 25 , 50 , 75 , 100 ] , // playback percentages, log action when reached showRelatedVideos = 0 , // set to 1 to show suggested videos when the video finishes showControls = 0 , // set to 1 to show player controls showInfo = 0 , // set to 1 to show video title and player actions autoplay = 0 , // set to 1 to begin playing video immediately playerRelHeight = . 5625 // player height relative to width; .5625 for 16:9 aspect ratio; .75 for 4:3 ; // close statement /*********************** DO NOT EDIT BELOW THIS LINE **********************/ // Accepts id (with hashtag) of iframe containing YT player // Set the height of the YouTube player proportionately to width function setPlayerHeight ( playerEl ) { var width = jQuery ( playerEl ) . parent ( ) . width ( ) ; jQuery ( playerEl ) . height ( Math . round ( width * playerRelHeight ) + "px" ) ; } // Returns current time code (minutes:seconds) of video function getTimeCode ( ) { var minutes = Math . floor ( player . getCurrentTime ( ) / 60 ) ; var seconds = Math . round ( player . getCurrentTime ( ) % 60 ) ; if ( minutes < 10 ) minutes = "0" + minutes ; if ( seconds < 10 ) seconds = "0" + seconds ; return minutes + ":" + seconds ; } // Returns current percentage of video that has been played function getPlaybackPercentage ( ) { return Math . round ( 100 * ( player . getCurrentTime ( ) / player . getDuration ( ) ) ) ; } // Returns unique YouTube video ID function getVideoId ( ) { return player . getVideoData ( ) [ 'video_id' ] ; } // Log video playback milestones function logPlaybackMilestones ( ) { // if video is playing... if ( player . getPlayerState ( ) == 1 ) { // then check to see whether we're at a playback milestone for ( i = 0 ; i < playbackMilestones . length ; i ++ ) { // if we are... if ( ! pmAchieved [ i ] && playbackMilestones [ i ] == getPlaybackPercentage ( ) ) { // ...make a note of that... pmAchieved [ i ] = true ; // ...and tell Marketo Munchkin . munchkinFunction ( 'clickLink' , { href : '/munchkinVideoTracker/?video=' + getVideoId ( ) + '&movie-action=achieved-milestone&percent=' + getPlaybackPercentage ( ) + '&time=' + getTimeCode ( ) } ) ; } } // then check again in 1 second setTimeout ( logPlaybackMilestones , 1000 ) ; } } // Retrieves the data-youtube-id attribute value youtubeVideoId = jQuery ( '#' + playerEl ) . data ( "youtube-id" ) ; // Requires a valid youtubeVideoId to run if ( youtubeVideoId && youtubeVideoId != "false" ) { // Track which playback milestones have been achieved var pmAchieved = [ ] ; for ( i = 0 ; i < playbackMilestones . length ; i ++ ) { pmAchieved . push ( false ) ; } // Load YouTube iframe API var tag = document . createElement ( 'script' ) ; tag . src = "https://www.youtube.com/iframe_api" ; var firstScriptTag = document . getElementsByTagName ( 'script' ) [ 0 ] ; firstScriptTag . parentNode . insertBefore ( tag , firstScriptTag ) ; // When the API is ready... function onYouTubeIframeAPIReady ( ) { // ...create YT Player object player = new YT . Player ( playerEl , { width : "100%" , videoId : youtubeVideoId , events : { 'onStateChange' : onPlayerStateChange } } ) ; // Apply options above (by changing iframe src attribute) jQuery ( "#" + playerEl ) . attr ( "src" , jQuery ( "#" + playerEl ) . attr ( "src" ) + "&rel=" + showRelatedVideos + "&controls=" + showControls + "&showinfo=" + showInfo + "&autoplay=" + autoplay ) ; // Initialize player height setPlayerHeight ( "#" + playerEl ) ; // Reset player height whenever browser size changes jQuery ( window ) . on ( 'resize orientationChange' , function ( event ) { setPlayerHeight ( "#" + playerEl ) ; } ) ; } // When user interacts with video, tell Marketo (via Munchkin API) function onPlayerStateChange ( event ) { switch ( event . data ) { // User played video case YT . PlayerState . PLAYING : Munchkin . munchkinFunction ( 'clickLink' , { href : '/munchkinVideoTracker/?video=' + getVideoId ( ) + '&movie-action=pressed-play&percent=' + getPlaybackPercentage ( ) + '&time=' + getTimeCode ( ) } ) ; logPlaybackMilestones ( ) ; break ; // User paused video case YT . PlayerState . PAUSED : Munchkin . munchkinFunction ( 'clickLink' , { href : '/munchkinVideoTracker/?video=' + getVideoId ( ) + '&movie-action=paused&percent=' + getPlaybackPercentage ( ) + '&time=' + getTimeCode ( ) } ) ; break ; // User watched video to end case YT . PlayerState . ENDED : Munchkin . munchkinFunction ( 'clickLink' , { href : '/munchkinVideoTracker/?video=' + getVideoId ( ) + '&movie-action=played-to-end&percent=' + getPlaybackPercentage ( ) + '&time=' + getTimeCode ( ) } ) ; break ; } } } < / script >
... View more
Customize up to 8 badges at the top of your trophy case for all other Community members to see!
You're It
Earned on 2.04.20
Earned by 1872 people
Select to learn more
.png)