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 source code of the website is not in your control and the videos are present inside the iFrame hosted on the YouTube domain. To track clicks on your YouTube videos using VWO, create Custom Conversion goals that are triggered when someone either plays or pauses a YouTube video.

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

  1. Add Custom Conversion goal to track clicks.
  2. Add the CSS path of video in the Custom Code snippet generated.
  3. Add the Pre-JS code snippet using VWO code 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 test creation process, copy the corresponding code snippet generated for the Custom Conversion goal you have added to the test. You will need this code snippet in the next steps.

youtube3

Add CSS Path of the Video

Copy the following code snippet and then modify it to include the CSS path of the video to be tracked.

vwo_$('CSS PATH OF THE YOUTUBE VIDEO IFRAME').attr({'src':vwo_$('CSS PATH OF THE YOUTUBE IFRAME VIDEO').attr('src')+"?enablejsapi=1″})
vwo_$('CSS PATH OF THE YOUTUBE VIDEO IFRAME').attr({'id':'Any ID TO ASSIGN'});

For example:

vwo_$('body > p:nth-child(11) > iframe').attr({'src':vwo_$('body > p:nth-child(11) > iframe').attr('src')+"?enablejsapi=1″})

vwo_$('body > p:nth-child(11) > iframe').attr({'id':'sampleid1'});

Add Pre-JS Code Using the VWO Code 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.

youtube6

vwo_$('body > p:nth-child(11) > iframe').attr({'src':vwo_$('body > p:nth-child(11) > iframe').attr('src')+"?enablejsapi=1″}) ;

vwo_$('body > p:nth-child(11) > iframe').attr({'id':'sampleid1′});

var tag = document.createElement('script');

tag.id = 'iframe-demo';

tag.src = 'https://www.youtube.com/iframe_api';

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('sampleid1', {

events: {

//'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

}

function onPlayerStateChange(event)

{

window._vis_opt_queue = window._vis_opt_queue || [];

window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(206);});

}

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

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. You can also use Google Tag Manager (GTM) for pushing the changes.

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.

vwo_$('body > p:nth-child(11) > iframe').attr({'src':vwo_$('body > p:nth-child(11) > iframe').attr('src')+"?enablejsapi=1″})

vwo_$('body > p:nth-child(11) > iframe').attr({'id':'sampleid1′});

<script type='text/javascript'>

var tag = document.createElement('script');

tag.id = 'iframe-demo';

tag.src = 'https://www.youtube.com/iframe_api';

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('sampleid1', {

events: {

//'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

}

function onPlayerStateChange(event)

{

window._vis_opt_queue = window._vis_opt_queue || [];

window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(206);});

}
</script>

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

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

Product
Resources Home