Rich-text Reply

Tracking Clicks on YouTube video not working

gkrovy 09-25-15

Tracking Clicks on YouTube video not working

I implemented the tracking of a embedded YouTube Video iFrame as in


First problem was that my iframe was not set before $( document ).ready() but I had to call the api outside of onReady. As a result the onReady Event was not fired. I solved it with the following code:

/* _optimizely_evaluate=force */
//this is a boilerplate set of calls to append a new script to your head tag
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';

* iFrame API (for iframe videos)
* onYouTubeIframeAPIReady is called for each player when it is ready

window.onYouTubeIframeAPIReady = function(){

//execute the API calls for play, pause, and finish
window.onStateChange = function(playerid, state) {
    if( === 0) { 
    } else if( === 1) { 
    } else if( === 2) { 

//for each of the above three states, make a custom event API call to Optimizely
window.onPause = function(id) {
    console.log('YouTube player \'' +id +'\': pause');
    window['optimizely'] = window['optimizely'] || [];
    window.optimizely.push(["trackEvent", id +"Pause"]);
window.onFinish = function(id) {
    console.log('YouTube player \'' +id +'\': finish');
    window['optimizely'] = window['optimizely'] || [];
    window.optimizely.push(["trackEvent", id +"Finish"]);
window.onPlay = function(id) {
    console.log('YouTube player \'' +id +'\': play');
    window['optimizely'] = window['optimizely'] || [];
    window.optimizely.push(["trackEvent", id +"Play"]);
/* _optimizely_evaluate=safe */

$('<div><iframe id="MyVideo" class="video-tracking" width="420" height="315" src="//" frameborder="0" allowfullscreen></iframe></div>').insertAfter($("#main").parent());

var iframe = $('.video-tracking');

var player = new YT.Player(iframe[0], {
	events: {
		'onReady': function(e){
				console.log('YouTube player \'' +iframe.attr('id') +'\': ready');;
    'onStateChange' : function(e){
        console.log('State is:',;

But the next problem is, that the onStageChange event is not fired what so ever and the custom tracking events are not triggered.


Has anyone a experienced that problem or found a solution?

Level 2

Mario 09-29-15

Re: Tracking Clicks on YouTube video not working

Hi there,

Thanks for reaching out to Optiverse!

Have you done any modifications to the above mentioned code? If not, please also double-check if the iframe settings are set up correctly.

I'm looking forward to your reply.


Sr. Technical Support Engineer
EMEA | Amsterdam
gkrovy 10-01-15

Re: Tracking Clicks on YouTube video not working

Hi Mario,

I have two different experiments running, targeting different sites and videos. One remained in the original state and is an exact copy of your help article and within the other experiment I made some changes to see if I find a solution. However the video tracking does not work for both of them.


With the original experiment I don't even get the console.log message:

YouTube player \'' +iframe.attr('id') +'\': ready

The problem seems to be, that I am adding the iframe also within the optimizley experiment, which is executed on document.Ready(). So the moment I am loading the youTube API, my iframe is not yet on my page.


Do have any ideas?

Level 2
David_Orr 10-10-15

Re: Tracking Clicks on YouTube video not working

[ Edited ]

Hi gkrovy,


If the you are implementing the Youtube video when DOM is ready, you may want to do the following:


1. Copy the Youtube tracking code in our article and paste it in the "Experiment Javascript" option:

2. Click on the "Edit Code" box located on the lower right of the editor.

3. Look for the variation code that applies the Youtube video.

4. Insert a new line after the code.

5. Call the onYouTubeIframeAPIReady function again with the following code: 



Let me know if this resolves the problem. 



Senior Technical Support Engineer