Editor's note:
Thanks for visiting GA Tip of the Day. All of my newer posts are published on the E-Nor blog. Please visit and sign up for updates.
- Eric Fettman


To Track Embedded YouTube, Don’t Use the Default Embed

If you’ve embedded a YouTube video on a page of your website, it’s important to generate play and complete events within Google Analytics so you can know how many people are viewing the video, how many are making it to the end, and how these actions are influencing other behaviors such as goal completions and Ecommerce.

To capture YouTube events, you can use the YouTube Player API (instead of the default embed) as in the following code:


     <div id="player"></div>
     <script>
         var tag = document.createElement('script');
         tag.src = "http://www.youtube.com/player_api";
         var firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

         var player;
         var lastAction = '';
         function onYouTubePlayerAPIReady() {
             player = new YT.Player('player', {
                 playerVars: {
                     modestbranding: true,
                     theme: 'light',
                     rel: 0
                 },
                 height: '360',
                 width: '480',
                 videoId: '4GhUtN4Mlr0',
                 events: {
                     'onStateChange': onPlayerStateChange
                 }
             });
         }
 		
		function onPlayerStateChange(event) {
             switch (event.data) {
                 case YT.PlayerState.PLAYING:
                     //_gaq.push(['_trackEvent', 'video', 'started', player.getVideoUrl()]);
                     _gaq.push(['_trackEvent', 'video', 'started', 'overview']);
                     break;
                 case YT.PlayerState.ENDED:
                     _gaq.push(['_trackEvent', 'video', 'completed', 'overview']);
                     break;
                 case YT.PlayerState.PAUSED:
                     if (lastAction != 'paused') {
                         _gaq.push(['_trackEvent', 'video', 'paused', 'overview']);
                     } else {
                         lastAction = 'paused';
                     }
                     break;
             }
         }
	</script>

Note that when using the YouTube Player API, you can still take advantage of customized settings by specifying PlayerVars as above. (Importantly, the rel=0 prevents related videos from appearing after your own has completed.)

In a previous post, we also dicussed Google Analytics event for embedded Wistia video.

Please share this post:
Facebook Twitter Plusone Linkedin Email

3 thoughts on “To Track Embedded YouTube, Don’t Use the Default Embed

  1. Great tip. A couple of questions: do you drop that javascript in the head element of your page? And if you do, how does your embedded video interact with the script if you’re using an iframe with nothing but the YouTube embed URL as the SRC attribute? Finally, does an extension like Tubepress take care of this?

    • Ross, thanks for your comment.

      This code is used instead of the iframe that YouTube offers as the default embed. The script writes the video to <div id=”player”></div>, so I would actually keep the script somewhere in the page below this div so it’s not looking for a page element that hasn’t loaded yet.

      I checked out the Tubepress site – didn’t see anything about analytics, and it seems (for YouTube) to support only the default embed, so I’d have to say the Tubepress would not generate Google Analytics events without some special coding or configuration.

      Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>