How to Track YouTube Player Events in Google Analytics

Anyone who has embedded YouTube videos on their website knows how valuable it can be to find out whether visitors are actually watching those videos. You might want to track whether people are watching until the end or whether they stop short. Here's how to find that out using the YouTube API and some Google Analytics ninja skills.

The original example for this came from Brian Clifton's newly published Advanced Web Metrics with Google Analytics, which we've been reading here at BFM. We realized that there were a few small omissions in the jscript provided on page 250 (in 2012 edition) so we have corrected those below.


Track when a visitor clicks to play a video and whether they watch it until the end. You'll be able to see this in your Google Analytics reports in your Events section:

track youtube events in google analytics


1. Place your usual Google Analytics tracking code (asynchronous) in your header.

2. Create an empty div element within the body, with an id of "player". This is where your YouTube video will be placed shortly.

<div id="player"></div>

3. Make a script tag, and insert the YouTube iframe player API code. Don't close the script tag, there's still more to do.

var tag = document.createElement('script'); 
tag.src = ""; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

4. Create the iframe and player. Replace the 'zLQFkztsozw' with your video ID tag and customize your video height and width requirements.

var player; 
function onYouTubePlayerAPIReady() { 
player = new YT.Player('player', { 
height: '390', 
width: '640', 
videoId: 'zLQFkztsozw', 
events: { 
'onReady': onPlayerReady, 
'onStateChange': onPlayerStateChange 
function onPlayerReady(event) { 

5. Use the onPlayerStateChange method to look for events, such as the video starting or stopping. You can also close the script tag here.

function onPlayerStateChange(event) { 
if ( ==YT.PlayerState.PLAYING) 
{_gaq.push(['_trackEvent', 'Videos', 'Play', 
player.getVideoUrl() ]); } 
if ( ==YT.PlayerState.ENDED) 
{_gaq.push(['_trackEvent', 'Videos', 'Watch to End', 
player.getVideoUrl() ]); } } 

I hope that this helps you get a better insight into how users are interacting with your web video production embedded on your website. If you have any questions, please comment below!

How to Hit it Big on Youtube Whitepaper

Share this post

Comments on this post

  1. Thanks for the guide. I have a question, how can I track how long the video is playing before someone click pause?

  2. How do i use the above code for multiple videos on the same page

  3. Great info for the Embedded video Youtube tracking. I just embedded a Video on my Web page and waiting to track it and see its results.
    Sunil Datar Toronto

  4. Cathelijne said:

    Thx for this script. I just embedded a Youtube video with your script.

    How can I use rel=0 in this script? I don’t want other video’s to show up at the end of the video.
    This is the embed code I get from Youtube: src=”//″
    So I tried: videoId: ‘zLQFkztsozw?rel=0’ but that didn’t work. I also tried: videoId: ‘zLQFkztsozw’, rel: ‘0’, but that didn’t work either. Hope you can help me out.

  5. Bryan Mytko said:

    Hi Cathelijne!

    “rel” is a player parameter.

    In step 4, when you create the player, try this:

    player = new YT.Player(‘player’, {
    height: ”,
    width: ”,
    videoId: ”,
    playerVars: {rel: 0},
    events: {
    ‘onReady’: onPlayerReady,
    ‘onStateChange’: onPlayerStateChange

    More information can be found in the documentation:

  6. Hi Bryan, thank you for this code/explanation. Question: Do I place the full embed code within the ?

  7. within the div code?

  8. Mickael ROBIN said:

    Thank you for this post.

    Is there a way to count “play” actions only once per video? (and not every time you play/pause a given video)
    => a JS counter?

  9. Pingback: Как считать конверсии для сайтов услуг | Numeralis

Comment on this post


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978