GA: YouTube event tracking

youtube.html

<!-- 
  https://megalytic.com/blog/tracking-youtube-videos-using-google-analytics
  Key elements in iframe are 'id' & 'enablejsapi' & 'origin' source parameter values
-->

<iframe allowfullscreen="" data-title="Descriptive title" frameborder="0" height="152" id="youTubePlayer" src="http://www.youtube.com/embed/<YOUTUBEID>?enablejsapi=1&amp;origin=http://www.YOURWEBSITE.com&amp;rel=0&amp;showinfo=0" width="100%"></iframe>

<script>

  // get descriptive title
  var iframeEl = document.getElementById('youTubePlayer');
  var youTubeTitle = iframeEl.dataset.title;

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

  var pauseFlag = false;

  // This code is called by the YouTube API to create the player object
  function onYouTubeIframeAPIReady(event) {
    player = new YT.Player(iframeEl, {
      events: {
        // fires when player is ready
        'onReady': onPlayerReady,

        // fires when player is started, paused, or finishes, etc.
        // https://developers.google.com/youtube/iframe_api_reference#Playback_status
        'onStateChange': onPlayerStateChange
      }
    });
  }

  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", "YOUR CATEGORY", "YOUR ACTION", youTubeTitle);
      pauseFlag = true;
    }
  }
</script>