YouTube Video Event Tracking With Google Analytics

I was recently tasked with including tracking for YouTube videos embedded on a site I manage. Turns out, it's pretty easy to do.

This post will allow you to answer the following questions:

  1. How many people are playing an embedded video on a particular page?
  2. How many people are finishing an embedded video on a particular page?

Documentation used: YouTube IFrame Player API and the Event Tracking section of Analytics for Web. These will be useful if you want to do different / more advanced tracking than I include below.

Getting Started

You may be using the regular embed iframe code for a video, such as:

<iframe src="https://www.youtube.com/embed/HzKuWBDDLPg" frameborder="0" allowfullscreen></iframe>

First, remove that iframe code and change it to a div. We will load everything with JavaScript. Here's how the div looks:

<div id="youTubePlayer"></div>

Now we add the script to load the YouTube API and attach the events. This assumes you are using Google analytics.js.

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

    // This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('youTubePlayer', {
            videoId: 'HzKuWBDDLPg', //the code at the end of your old iframe embed script
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        //we aren't going to do anything here
        //event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        // track when user clicks to Play
        if (event.data == YT.PlayerState.PLAYING) {
            ga('send', 'event', 'Videos', 'Play', 'Some Label');
        }

        // track when user clicks to Pause
        if (event.data == YT.PlayerState.PAUSED) {
            ga('send', 'event', 'Videos', 'Pause', 'Some Label');
        }

        // track when video ends
        if (event.data == YT.PlayerState.ENDED) {
            ga('send', 'event', 'Videos', 'Finished', 'Some Label');
        }
    }
</script>

The google analytics code was using the following format:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel]);
  • [eventCategory] is a text field and is typically the object that was interacted with (e.g. 'Video')
  • [eventAction] is a text field and is the type of interaction (e.g. 'play')
  • [eventLabel] is a text field and is useful for categorizing events (e.g. 'Tortilla Video on Home Page')

For more details on Event Tracking, please see the Google Documentation.

Accessing Analytics

That's pretty much it. Now in you Google Analytics, you can go to Behavior > Events > Overview to see the results.

Click on the new "Videos" Event Cateogry to get more details and a breakdown of the events (under the Event Action tab).

Hope that helps! Happy coding.