How to track multiple youtube videos in google analytics

Question

I've read carefully through all similar questions but couldn't find the answer. So I'll be really thankful for help:)

There are two embed YouTube videos on my site (number of them will increase in future) and I need to track starts/plays, pauses and watching till the end for each of them. It would be great to track watching progress (25%, 50%, 75%) too, but my JS skills only let me implement the following script (which works only for one video)

 // This code loads the IFrame Player API code asynchronously
 var tag = document.createElement('script');
 tag.src = "http://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


 // This code is called by the YouTube API to create the player object
 function onYouTubeIframeAPIReady(event) {
     player = new YT.Player('player', {
       events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
       }
     });
   }
   // This code is called by the YouTube API to create the player object

 function onYouTubeIframeAPIReady(event) {
   player2 = new YT.Player('player2', {
     events: {
       'onReady': onPlayerReady,
       'onStateChange': onPlayerStateChange
     }
   });
 }

 var pauseFlag = false;

 function onPlayerReady(event) {
   // do nothing, no tracking needed
 }

 function onPlayerStateChange(event) {
   // track when user clicks to Play
   if (event.data == YT.PlayerState.PLAYING) {
     ga('send', 'event', 'Video', 'Start', event.target.getVideoUrl());
     pauseFlag = true;
   }
   // track when user clicks to Pause
   if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
     ga('send', 'event', 'Video', 'Pause', event.target.getVideoUrl());
     pauseFlag = false;
   }
   // track when video ends
   if (event.data == YT.PlayerState.ENDED) {
     ga('send', 'event', 'Video', 'Complete', event.target.getVideoUrl());
   }
 }

And these are video iframes:

Player

<iframe id="player" width="414" height="233" class="bnr-01" src="https://www.youtube.com/embed/VideoID?enablejsapi=1&origin=http://my.site.com" frameborder="0" allowfullscreen="" name="player"> </iframe>

Player 2

<iframe id="player2" width="414" height="233" class="bnr-02" src="https://www.youtube.com/embed/VideoID?enablejsapi=1&origin=http://my.site.com" frameborder="0" allowfullscreen="" name="player2"> </iframe>

Events are successfully sent only for Player2. What may be the problem? We use new google analytics (universal)

Thank you in advance!

Answer 1

Here's a script I came up with that works with any number of embedded Youtube videos on a page. I apologize that this uses jQuery, but the idea is there: loop through each Youtube embed and assign it as a player based on its index. I'm also pretty certain this could be optimized a bit too.

It uses the class youtubeplayer to loop through each embed.

<script>
    var players = {};
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady(e){
        jQuery('iframe.youtubeplayer').each(function(i){
            var youtubeiframeClass = jQuery(this).attr('id');
            players[youtubeiframeClass] = new YT.Player(youtubeiframeClass, {
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        });
    }

    var pauseFlag = false;
    function onPlayerReady(e){
       //Player ready functions would go here
    }
    function onPlayerStateChange(e){
        var videoTitle = e['target']['B']['videoData']['title'];
        if ( e.data == YT.PlayerState.PLAYING ){
            ga('send', 'event', 'Videos', 'Play', videoTitle);
            pauseFlag = true;
        }
        if ( e.data == YT.PlayerState.ENDED ){
            ga('send', 'event', 'Videos', 'Finished', videoTitle, {'nonInteraction': 1});
        } else if ( e.data == YT.PlayerState.PAUSED && pauseFlag ){
            ga('send', 'event', 'Videos', 'Pause', videoTitle);
            pauseFlag = false;
        }
    }
</script>

Hope this at least gets you headed in the right direction!