How to track how much of a youtube video the user has watched?

Question

I need to track how much of an embedded youtube video the user has watched on my site. I need it to fire a tag at 25%, 50%, 75% and 100% of the length of the video. It should work similarly as a scrolling page track.

The only access I have to the site is through Googletag manager, so any solution would have to be through there.

I´ve researched and aparently there are ways to do this using youtube api. I even tried this step-by-step guide: http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/ But it didn´t work.

I guess the problem is that the site uses fancybox the play the video. Here is a pick of the website´s code:

I have no idea where to start.

Answer 1

Please take a look at

Track YouTube Video Playback with jQuery and Google Analytics Events

https://developers.google.com/youtube/js_api_reference

You need to track the current playback time, get the total playing time and then convert it to percentages.

Use the chromeless player and use the youtube js api. See the Playback_status method. I agree with putting a timer. However, there are methods and callbacks available at the js api that I highly recommended for you to use.

You will probably have to use

onStateChange event getDuration() getCurrentTime()

and you probably need those inside the onStateChange wrapper or something better.

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert(ytplayer.getDuration()+ytplayer.getCurrentTime());
}

At the player state change, you may fire your own methods inside.

It's not a working example, but I hope that you get my answer. The modal / popup boxes is not related in getting the data needed. You just need to use the chromeless player and the YT js api working in harmony with your jQuery plugins. There are some jQuery plugins that is an API wrapper for multiple video sharing technologies.

Bower and Google is your friend!

http://bower.io/search/?q=youtube

Answer 2

Another option worth looking into, if YouTube is not your only options, I'm pretty sure both Vimeo and Wistia have these capabilities built in and are very simple to embed