Upcoming LunaMetrics Seminars
Washington DC, Dec 1-5 Los Angeles - Anaheim, Dec 8-12 Pittsburgh, Jan 12-16 Boston, Jan 12-16

Easily Track YouTube Videos with Google Analytics

Updated as of January 23rd, 2014 with version 6

THE PROBLEM!

I WANT TO TRACK ALL MY YOUTUBE VIDEOS EMBEDDED ON MY PAGE WITHOUT HAVING TO WRITE NEW JAVASCRIPT EVERY TIME I EMBED A VIDEO!

Recently I was tasked with tracking YouTube videos on a website using Events in Google Analytics, and I was not particularly thrilled with the options. Either old blog posts from even our site, or posts that didn’t lay out any specifics on how to do it, or posts that listed basically how the YouTube player API instructs people to track videos. Most from a year or even two ago. Which was all well and good, until I realized that I was dealing with possibly hundreds of pages, with a variable amount of videos on them.

The basic YouTube IFrame Player API shows an example of one video. And if you add a second? Well you need to add more javascript, as well as modify your HTML. If you had 10 videos on a page you would have to modify the javascript for the page to create 10 different objects, and you’d need to replace or edit the embed code to div tags. Not exactly easy, particularly for someone to go back to a site already in existence.

What I wanted was basically, maybe, a javascript file you could include on your page and then just BAM presto chango, all the basic embeded YouTube videos would be tracked, no muss no fuss, no additional JavaScript. Write a new blog post, add a new YouTube video, and have the tracking just automatically happen. I couldn’t find that.

So I wrote it.

See that video? I embedded it with standard Youtube embed code. Copy and Paste into the blog. No additional javascript. Go ahead and view the source. I’m tracking when it buffers, plays, cues, pauses, or if someone watches it to the end. All I did was copy and paste the embed code straight from YouTube on the page.

This one too. Copy. Paste. Tracked with Events in Google Analytics. Easy as pie. A monkey could do it. Well… a trained monkey.

And this one too…Don’t believe me? Use your favorite tool, and check out the source. Just iframes. Check out the Network and see the UTM gif’s flying with Event’s being Tracked for being Rick Rolled straight to our Google Analytics account.

It’s ok. You can go ahead and slow clap.

THE SOLUTION!

INCLUDE OUR SCRIPT. THE END!

Here’s what you do. No complicated coding. Just download this file from our github, and include it in the head of your html. Just use one of them. We’ve updated this code a few times, so be sure to go here for the latest version.

You’ll also need Jquery so be sure to include that before the script. So you’ll have something like this

<script src=”//code.jquery.com/jquery-1.7.2.js”></script>

<script type=”text/javascript” src=”http://www.yourwebsitehere.com/js/lunametrics-youtube-v5.js”></script>

And then… That’s it.

UPDATE: NOPE... YouTube has updated their scripts so that you are now REQUIRED to have enablejsapi=1 attached to each video to be tracked. So you should probably manually add these.  You can also add this automatically with the reloadFrames variable included in the script, which you can change to be 1 instead of 0, but this will cause screen “flicker” but if you have 100s of pages and videos to update it could be a better short term fix. You can also instead manually add enablejsapi=1 to ever source of the videos as a parameter. END UPDATE.

The script will use jquery to scan through your page and look for iframes. Any iframe that has a standard youtube value in it’s source parameter like http://www.youtube.com/embed/ or https://www.youtube.com/embed/ will get acknowledged as a YouTube video. (if it has the -nocookie listing that is an option in Youtube we don’t track it, as it wouldn’t track anyway). Then we dynamically create the objects based on the YouTube ID’s based on their IFrame Player API and voila. All the iframes embedded on the page with the standard default YouTube embed code, as well as their https secure version, get tracked with Events in Google Analytics.

NOTES!

JUST BECAUSE IT’S NOT PERFECT!

1) It requires jquery as noted above. If you don’t have jquery on the page as well as our youtube code, it won’t work.

2) It assumes that the video is embedded only once on the page. You can have 100 videos on the page and it’ll track them all, but if you embed the same video twice it’ll actually error out because I’m using the YouTube video ID as the id for the player itself, so it’ll just overwrite itself, and the second video with the same YouTube video ID won’t get tracked.

3) I mentioned it before, but if you choose the option for “enhanced privacy mode” which sets a no cookie field in the URL, we can’t track those.

4) We track Play, Pause, Cue, Buffer, and Watch till End, but you’re free to add additional stuff to our code for your own use.

5) We originally stripped the YouTube ID out from the URL and that’s what got placed into the Event for identification, not the full URL. The new code uses a separate api to grab the title of the video and has the event read “Title of the Video | ASdfj0oi2_34vh” etc where the garbage is the YouTube ID. This hopefully makes it easier to read. You can change this setting in a variable early in the code to display just the title, or just the id. It defaults to concatenated.

6) This works with the embed code YouTube provides. If you copy the URL and gum up the url in the iframe with all sorts of other parameters that aren’t standard, it probably won’t work either. It’ll work with URL’s like http://www.youtube.com/embed/e90s3v_G4PU?rel=0 or http://www.youtube.com/embed/e90s3v_G4PU or https://www.youtube.com/embed/e90s3v_G4PU?rel=0 or http://www.youtube.com/embed/e90s3v_G4PU which are the basic forms that YouTube provides as the SRC value in the iframe. It’ll also work without the http at all.

7) This does NOT work with the old object code embeds, only the iFrame embeds.

8) If you don’t have Google Analytics and the Tracking Code already on your site, this won’t work without it. It works WITH jquery and the GATC, but doesn’t include either.

9) We’re not currently tracking how long the video played. We had some errors with the API and wanted to make the value of the event the duration of watching the video on both the pause, and watched till end, but have left them off for now.

10) Sometimes there are problems and it doesn’t work for some people. We added some extra help, with a reloadFrames variable. It defaults to 0, but set it to 1, and it’ll rewrite the iframes with enablejsapi=1 and an origin of your current window.location.hostname, and then reload the iframes. If it’s not working on your site, try setting this to 1. It’ll cause the embeds to load twice, but they may track after that, if they didn’t before. For most people it should work without this setting.

DRAMATIC CONCLUSION!

Hopefully this makes some people’s lives easier. Tracking videos embedded on your site from YouTube is now a fire and forget solution. I know I was excited to get this to work, so I have to assume there are other people out there that will find this just as easy and useful.

Questions or comments? Post em below! If someone finds a problem with the code, let me know and you can help perfect it!

Sayf Sharif

About Sayf Sharif

Sayf Sharif is a Web Analyst, and expert in Usability and UX, who has worked with businesses large and small to maximize their online presence since the beginning of the Web, winning numerous awards along the way. Sayf has studied human tool use from the stone age (he went to graduate school for Archaeology) to the information age (he started programing on his father’s TRS-80), and is always interested in what goals people wish to accomplish using their tools, and how successful that experience was.

http://www.lunametrics.com/blog/2012/10/22/automatically-track-youtube-videos-events-google-analytics/

203 Responses to “Easily Track YouTube Videos with Google Analytics”