Track Embedded YouTube videos with Google Analytics
Setting up Google Analytics on a website is super simple. One line of code, copy and paste it in to the site and away you go. Slightly more complicated tasks such as tracking goal completions and interactions with dynamic content is more difficult but certainly not impossible.
Something I had not yet done, until today, was to track interactions with embedded YouTube videos. By interactions I mean playing videos, stopping them before the end and of course watching the video all the way to the end.
WordPress Plugin
The site in question was a WordPress site. Initially I thought this was going to be fairly simple, just swap the existing YouTube plugin for a more advanced offering that will have Google Analytics built in. However, my search for such a plugin was fruitless and the best I could find was a now defunkt (it even had defunkt in the title) WordPress plugin that claimed it would add YouTube video tracking, and it did not.
Having looked at the javascript required to track YouTube videos it seemed adding this in myself should be straight forward. The only problem was all the example code I had found had the ID of the video hardcoded in. This simply wouldn’t do as I’d have to end up adding new code every time the client added a new video. So, the only answer was to write some javascript that dynamically finds embedded YouTube videos on a page and adds Google Analytic tracking automatically.
Now one thing I love about web development, and indeed most disciplines of software development is sharing. For almost any problem you can think of, someone, somewhere has already solved it and has been kind enough to share their solution.
Javascript
Luckily this was just the case here! I stumbled across this absolutely fantastic bit of javascript code from Lunametrics:
https://github.com/lunametrics/youtube-google-analytics
And by fantastic I don’t mean the code is of great quality (I’m sure it is) or it does anything gimmicky. I mean it just works!
Just download the javascript file, put it on your site with the rest of them and pull it in within you <head> tag making sure it’s the last one to load.
Lo and behold, it detects you Google Analytics code and any YouTube videos on the page and then sends off the data to your Google Analytics account. Brilliant!
Debug Google Analytics
How do you know that it’s working for sure without waiting for the data to turn up in Google Analytics? Luckily I’ve got just the ticket. Grab yourself a copy of this Google Chrome Add-on:
https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna
It’s called the Google Analytics Debugger and does exactly what it says on the tin. When enabled, open up your Chrome developers console and you’ll see all the information your site is firing off to Analytics. Try it for yourself with the YouTube solution above and you’ll see it telling Google what video you’re watching, how much you’ve watched and when you’ve paused it. Fantastic!
