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 https://help.optimizely.com/hc/en-us/articles/204338398

 

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';
script.src="//www.youtube.com/iframe_api";
head.appendChild(script);

/**
* 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(state.data === 0) { 
        onFinish(playerid);
    } else if(state.data === 1) { 
        onPlay(playerid);
    } else if(state.data === 2) { 
        onPause(playerid);
    }
};

//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="//www.youtube.com/embed/pJnpNgd-UdY?enablejsapi=1" 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');
				e.target._donecheck=true;
		},
    'onStateChange' : function(e){
        console.log('State is:', e.data);
    }
  }
});

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. https://help.optimizely.com/hc/en-us/articles/204338398#youtube

I'm looking forward to your reply.

Best,
Mario

Sr. Technical Support Engineer
EMEA | Amsterdam
Optimizely
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: https://help.optimizely.com/hc/en-us/articles/204338398#youtube

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: 

window.onYouTubeIframeAPIReady();

 

Let me know if this resolves the problem. 

 

David

Senior Technical Support Engineer
Optimizely