Rich-text Reply

Tracking Video Plays in Optimizely

chrisgosling 06-09-14
Accepted Solution

Tracking Video Plays in Optimizely

[ Edited ]

Has anyone used Optimizely to track Video plays?  I want to run alternate versions of a page using different video players and see if one player gets more views than another.  Youtube and OOYALA are the two that I'm mainy focused on right now.  This is starting to push my JS knowledge so what I'm about to say may be total nonsense: I was wondering if there was a way I could pull the events from the Youtube API and use them as goals?  https://developers.google.com/youtube/js_api_reference#Events  Does anyone know how to do this or if it is even possible?

I'm also interested in hearing about any other video tests that you have run and any conclusions you've come to so far.

Thanks!

adzeds 06-10-14
 

Re: Tracking Video Plays in Optimizely

This is possible.

You would need to use the Events fired by the Video player to call an Optimizely Custom Event that you can track as a goal.

Is a little long-winded to right down but I believe it can be implemented in around 7-8 lines of JS.

I am sure that there will be someone on here that has done this before so they may be able to give you some snippets

David Shaw
Level 11
Christophe 06-19-14
 

Re: Tracking Video Plays in Optimizely

Most  vendors have a Javascript API that you can use to track videos. You can use that in combination with the Optimizely Custom Events to push that data back to Optimizely.

 

For example YouTube has the YouTube Player API

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

 

This API defines a fonction onYouTubeIframeAPIReady which gets call when then API is ready. Within that fonction you can listen for events on the video and send tracking information back to Optimizely.

 

The code would be something like

 

 

var player;
function onYouTubeIframeAPIReady() { player = new YT.Player(<player>, { events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { window['optimizely'] = window['optimizely'] || []; window.optimizely.push(["trackEvent", "VideoPlay"]); } else if (event.data == YT.PlayerState.ENDED) { window['optimizely'] = window['optimizely'] || []; window.optimizely.push(["trackEvent", "VideoEnded"]); } }

 All you need to do then is make sure that you create Custom Events in Optimizely with the name VideoPlay and VideoEnded

 

 

 

Optimizely