Youtube Api And Tracking Embedded Video

The issue at hand is the embedding of multiple Youtube videos on a page and now the Youtube Analytics is not working. Previously I had many embedded videos on a Drupal page, but th

Solution 1:

Please take a look to how Komito Analytics does. See init_ function in the source code.

Solution 2:

I want to second the proposed solution with Komito Analytics.

Yes, it will be tracked with Google Analytics automatically. Just include the script as described at https://komito.net/integration/:

<scriptsrc="https://komito.net/komito.js"></script>

The documentation also reflects default configuration settings, please have a look on them and turn off not needed metrics.

Solution 3:

While I can't speak to the Youtube Analytics side of things, I can provide the code I wrote to capture data in Google Analytics for multiple Youtube iframe embeds on a page.

I use the class youtubeplayer on the iframes along with a unique ID for each (I generally just use the video title with hyphens).

<iframe id="the-video-title" class="youtubeplayer" width="560" height="315" src="https://www.youtube.com/embed/VIDEOIDHERE?wmode=transparent&enablejsapi=1&origin=SITEORIGINHERE&rel=0" frameborder="0" allowfullscreen></iframe>

Important parameters being enablejsapi and origin.

The following uses jQuery and requires the Youtube Data API to be enabled in your Google Developer Console.

//Check for Youtube VideosfunctioncheckForYoutubeVideos(){
    if ( jQuery('.youtubeplayer').length ){
        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);
    }
}
functiononYouTubeIframeAPIReady(e){
    jQuery('iframe.youtubeplayer').each(function(i){
        var youtubeiframeClass = jQuery(this).attr('id');
        players[youtubeiframeClass] = newYT.Player(youtubeiframeClass, {
            events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange,
                onError: onPlayerError
            }
        });
    });
    pauseFlag = false;
}
functiononPlayerError(e){
    var videoTitle = e['target']['B']['videoData']['title'];
    ga('send', 'event', 'Error', 'Youtube API', videoTitle + ' (Code: ' + e.data + ')', {'nonInteraction': 1}); //Log the API error
}
functiononPlayerReady(e){
   //Do something when player is ready.
}
functiononPlayerStateChange(e){
    var videoTitle = e['target']['B']['videoData']['title'];
    if ( e.data == YT.PlayerState.PLAYING ){
        ga('send', 'event', 'Youtube', 'Play', videoTitle);
        pauseFlag = true;
    }
    if ( e.data == YT.PlayerState.ENDED ){
        ga('send', 'event', 'Youtube', 'Finished', videoTitle, {'nonInteraction': 1});
    } elseif ( e.data == YT.PlayerState.PAUSED && pauseFlag ){
        ga('send', 'event', 'Youtube', 'Pause', videoTitle);
        pauseFlag = false;
    }
}

I typically also send custom dimensions, metrics, and timing data to Google Analytics too. For my full implementation, check out my Github file here.

This method should work with that custom "deferred" method of loading the videos that you mentioned, but you will definitely need to call my checkForYoutubeVideos() function after the lazyload has completed.