Easily Track YouTube Videos with Google Analytics/
October 22, 2012
Note: This blog post was last updated on January 23rd, 2014 with version 6.
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.
So I wrote it.
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.
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
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.
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.
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!