Reg : Youtube video tracking

Hi Satish ,

As discussed , Please find below Steps with Code to be implemented through DTM to track you tube videos through iframe.

1.Embed the video in an iframe with with the API turned on e.g. http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1 on your webpage.

Please note that it is must to provide an "Id" to the iframe .Please see below code for more help.

<p>YouTube  video in iframe embed tag</p> <iframe id="player1" frameborder="0" width="425" height="344" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/wcv8zQo9HyU?enablejsapi=1">

2. Add the  Adobe Analytics Media tracking module to your Appmeasurement (or similar).It Should be placed somewhere after your config section and before the "DO NOT ALTER ANYTHING BELOW THIS LINE !".  In case of legacy implementation you need to have code version of H.15.1 or newer. You'll get this Media module from your Adobe Analytics Account  : Admin ----> Code Manager---->App Measurement ------> App Measurement Media Module.js

3. Add the following plugin into Head of the page just below DTM header code .

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script> <script type="text/javascript"> var video_obj=null; var video_length=0; var video_name='Movie name ' + new Date().getTime(); // 3. This function creates an <iframe> (and YouTube player) //    after the API code downloads. var player; function onYouTubeIframeAPIReady() { console.log('*** iFrame embed onYouTubeIframeAPIReady'); player = new YT.Player("player1", { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { // event.target.playVideo(); console.log('*** iFrame embed onPlayerReady ', player); } // 5. The API calls this function when the player's state changes. //    The function indicates that when playing a video (state=1), //    the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { console.log('*** iFrame embed onPlayerStateChange ' + event.data + ' --- YT Player state ' + YT.PlayerState.PLAYING, player.getCurrentTime(), player); /* if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } */ video_name = player.getVideoData(); video_name = video_name.title; video_length = player.getDuration(); // if(event.data === YT.PlayerState.PLAYING && (event.data === 1 || event.data < 0)){ if((event.data === 1 || event.data < 0) && YT.PlayerState.PLAYING === 1){ //*-* PLAY console.log("*-* Player is on play mode " + event.data + ' ' + player.getCurrentTime(), s); if(player.getCurrentTime() === 0) { s.Media.open(video_name, video_length, 'Youtube Object Embed'); s.Media.play(video_name, player.getCurrentTime()); } else { s.Media.play(video_name, player.getCurrentTime()); } }else if(event.data === 2){ //*-* PAUSE --- CAN USE THIS FOR ENDING TOO =-- check on time -5 sec!! console.log("*-* Player is on pause mode " + event.data+' '+player.getCurrentTime()); s.Media.stop(video_name, player.getCurrentTime());//this will cause the monitor to have media.event='STOP' }else if(event.data === 3){ //*-* SKIPPING console.log("*-* Player is on skipping mode " + event.data); s.Media.stop(video_name, player.getCurrentTime());//this will cause the monitor to have media.event='STOP' }else if(event.data === 0){ //*-* Completed console.log("*-* Player has been completed " + event.data); s.Media.stop(video_name, player.getCurrentTime()); s.Media.close(video_name); } } function onYouTubePlayerReady(playerId) { video_obj=document.getElementById(playerId);//playerId video_obj.addEventListener("onStateChange", "onytplayerStateChange"); video_length= video_obj.getDuration(); console.log('*-* Youtube Video Ready - in call back function --- ' + playerId, 'video duration= ' + video_obj.getDuration(), 'video current time= ' + video_obj.getCurrentTime()); } function onytplayerStateChange(newState) { console.log("*-* Player's new state: " + newState); //-1 --> <0 is not started if(newState===1){ //*-* PLAY console.log("*-* Player is on play mode " + newState + ' ' + video_obj.getCurrentTime(), s); if(video_obj.getCurrentTime() === 0) { s.Media.open(video_name, video_length, 'Youtube Object Embed'); s.Media.play(video_name, video_obj.getCurrentTime()); // s.Media.play(video_name, video_obj.getCurrentTime(),5,'a segment name', 30); } else { s.Media.play(video_name, video_obj.getCurrentTime()); } }else if(newState===2){ //*-* PAUSE --- CAN USE THIS FOR ENDING TOO =-- check on time -5 sec!! console.log("*-* Player is on pause mode " + newState+' '+video_obj.getCurrentTime()); s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP' // s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP' //*-*if not used (ie. not pausing) then CLOSE will kick in when the video completes otherwise video completes will also send 'STOP' }else if(newState===3){ //*-* SKIPPING console.log("*-* Player is on skipping mode " + newState); s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP' }else if(newState===0){ //*-* Completed console.log("*-* Player has been completed " + newState); s.Media.stop(video_name, video_obj.getCurrentTime()); s.Media.close(video_name); } } </script>

4. After you insert the code in your project, you need to map the conversion variables and events you are using to track video.
 For code please see step 4 of my previous reply.

Thanks & Regards

Parit Mittal