This website works best with JavaScript enabled. Learn how to enable JavaScript.

How to Track Clicks on YouTube Videos

Last updated

Tracking clicks on elements on your website page using VWO is a simple process where you define the element to track and then add the VWO smart code snippet to the source code of the webpage.

However, tracking clicks for YouTube videos is different because the videos are present inside the iFrame hosted on the YouTube domain where it’s not possible to place the VWO code.

To track clicks on your YouTube videos using VWO, follow these steps:

  1. Add Custom Conversion goal to track clicks.
  2. Add the code snippet under Pre-JS section inside VWO editor.

Add Custom Conversion Goal to Track Clicks

  1. In the section for defining goals, add Custom Conversion as the goal you want to track. youtube1
  2. In the URL field, type the URL of the page where the YouTube video is present and then click Next.

On the last page of the campaign creation process, copy the corresponding code snippet generated for the Custom Conversion goal you have added to the campaign. You will need this code snippet in the next step.

youtube3

Add the code snippet under Pre-JS section inside VWO editor

To complete the videos click tracking configuration, add the following code snippet in the Pre-JS section of the VWO code editor. Adding the Pre-JS code snippet ensures that the code is executed first before the variation changes are displayed.

function initYTAPI() {

   if (typeof(window.YT) == "undefined")    {

       vwo_$.getScript("https://www.youtube.com/iframe_api", function(data, textStatus, jqxhr) {

           if (window.timerX) clearInterval(window.timerX);

           window.timerX = setInterval(function() {

               if (typeof(window.YT.Player) != "undefined") {

                   window.vwo_player = new YT.Player('vwo_YT', {

                       events: {

                           'onStateChange': onPlayerStateChange

                       }

                   });

                   clearInterval(window.timerX);

               }

           }, 100);

       });

   }

 

else

{ window.vwo_player = new YT.Player('vwo_YT', {events: {'onStateChange': onPlayerStateChange}});}}

 

function YTurlCheck(videoURL)

{

  var yTCSS ="'iframe[src*="+videoURL+"]'";

  var vidSrc= vwo_$(yTCSS).attr('src');

  if(vidSrc.indexOf('enablejsapi=1')==-1)

    { vwo_$(yTCSS).attr({'id': 'vwo_YT'});

       if(vidSrc.indexOf('?')>-1){vwo_$(yTCSS).attr({'src': vwo_$(yTCSS).attr('src') + "&enablejsapi=1"});}

       else{vwo_$(yTCSS).attr({'src': vwo_$(yTCSS).attr('src') + "?enablejsapi=1"});}

    }

  else if(vidSrc.indexOf('enablejsapi=1')>-1){vwo_$(yTCSS).attr({'id': 'vwo_YT'});}

}

 

function onPlayerStateChange(event)

{

 if(event.data == YT.PlayerState.PLAYING)

   { console.log('Video Played');

     

// Place your custom conversion goal code here. You can get this code from the summary page of the A/B test inside VWO dashboard

   }

};

 

try{

vwo_$(function(){

YTurlCheck("Replace this with the actual embed youtube URL you want to track");

initYTAPI();});}

catch(e){

console.log('Reach out to us:support@vwo.com');}

ATTENTION Replace the goal code snippet with your own goal code snippet in the above code snippet.

You can get the embed video URL from the embed code as shown below:

Tracking YouTube Video Clicks for a Split URL Test

Tracking YouTube video clicks in a Split URL test is slightly different and involves making changes to the source code of the website where the video is posted or You can also use Google Tag Manager (GTM) for the same.

After creating the custom conversion goal and adding the CSS path of the video, add the following code snippet on the webpage where the YouTube video is available or add the same code snippet via GTM. Make sure to replace the goal code snippet with your own goal code snippet in the code snippet.

function initYTAPI() {

   if (typeof(window.YT) == "undefined")    {

       vwo_$.getScript("https://www.youtube.com/iframe_api", function(data, textStatus, jqxhr) {

           if (window.timerX) clearInterval(window.timerX);

           window.timerX = setInterval(function() {

               if (typeof(window.YT.Player) != "undefined") {

                   window.vwo_player = new YT.Player('vwo_YT', {

                       events: {

                           'onStateChange': onPlayerStateChange

                       }

                   });

                   clearInterval(window.timerX);

               }

           }, 100);

       });

   }

else

{ window.vwo_player = new YT.Player('vwo_YT', {events: {'onStateChange': onPlayerStateChange}});}}

function YTurlCheck(videoURL)

{

  var yTCSS ="'iframe[src*="+videoURL+"]'";

  var vidSrc= vwo_$(yTCSS).attr('src');

  if(vidSrc.indexOf('enablejsapi=1')==-1)

    { vwo_$(yTCSS).attr({'id': 'vwo_YT'});

       if(vidSrc.indexOf('?')>-1){vwo_$(yTCSS).attr({'src': vwo_$(yTCSS).attr('src') + "&enablejsapi=1"});}

       else{vwo_$(yTCSS).attr({'src': vwo_$(yTCSS).attr('src') + "?enablejsapi=1"});}

    }

  else if(vidSrc.indexOf('enablejsapi=1')>-1){vwo_$(yTCSS).attr({'id': 'vwo_YT'});}

}

 

function onPlayerStateChange(event)

{

 if(event.data == YT.PlayerState.PLAYING)

   { console.log('Video Played');

     

// Place your custom conversion goal code here. You can get this code from the summary page of the A/B test inside VWO dashboard

   }

};

 

try{

vwo_$(function(){

YTurlCheck("Replace this with the actual embed youtube URL you want to track");

initYTAPI();});}

catch(e){

console.log('Reach out to us: support@vwo.com');}

 

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login