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 SmartCode 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 is not possible to place the VWO code.
To track clicks on your YouTube videos using VWO, follow these steps:
- Add Custom Conversion goal to track clicks.
- Add the code snippet under the Pre-JS section inside the VWO editor.
Add Custom Conversion Goal to Track Clicks
- In the section for defining goals, add Custom Conversion as the goal you want to track.
- 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.
Add the code snippet under the Pre-JS section inside the 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 vwoRetries = 0; // Track the number of retries | |
| var vwoMaxRetries = 10; | |
| // Function to update the iframe source with enablejsapi=1 | |
| function updateIframeSrc() { | |
| var iframe = vwo_$(yTCSS); | |
| var vidSrc = iframe.attr("src"); | |
| // Check if vidSrc is defined | |
| if (vidSrc !== undefined && vidSrc !== null) { | |
| clearInterval(vwointerval123); // Clear the interval when vidSrc is defined | |
| if (vidSrc.indexOf("enablejsapi=1") === -1) { | |
| iframe.attr("id", "vwo_YT"); | |
| var separator = vidSrc.indexOf("?") > -1 ? "&" : "?"; | |
| iframe.attr("src", vidSrc + separator + "enablejsapi=1"); | |
| } else { | |
| iframe.attr("id", "vwo_YT"); | |
| } | |
| } | |
| // Check if maximum retries have been reached | |
| if (vwoRetries >= vwoMaxRetries) { | |
| clearInterval(vwointerval123); // Stop the interval after reaching the limit | |
| } | |
| vwoRetries++; // Increment the retry count | |
| } | |
| // Start the polling process with setInterval | |
| var vwointerval123 = setInterval(updateIframeSrc, 100); | |
| } | |
| 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'); | |
| } |
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 page URL where the video is, add the code snippet, that is shown in the above section to the webpage where the YouTube video is available or add the same code snippet via GTM. Make sure to replace the following text in the code snippet with your custom conversion goal code:
/* Place your custom conversion goal code here. You can get this code from the summary page of the A/B test inside VWO dashboard */