How to Utilize A/B Testing to Boost Your Sales Video
How to Utilize A/B Testing to Boost Your Sales Video
In this guide, we'll cover:
Understanding A/B Testing and How It Works
Setting Up Your A/B Test
Tracking Sales from Your A/B Test
1. What is A/B Testing and How Does it Work?
Here is a localization of the text to English (United States), keeping a simple, conversational tone and rewriting as necessary to maintain the meaning:
With the A/B Testing functionality, you can test the performance of 2 or more VSLs (Video Sales Letters)!
You don't necessarily need 2 different videos - the test can be done with different videos, as well as different settings for the same video!
When you create the A/B test, a single embed code is generated for all the videos you want to test. The VSLs will be shown alternately on your page, and the A/B test will generate individual metrics! This way, you can track the play rate, engagement, and button clicks for each VSL, and ultimately analyze which one is performing better.
2. Setting Up Your Test
Click on the "A/B Test" tab, then hit "New Test," and pick the videos you want to test.
By default, traffic goes evenly to each video, but you can change the percentage if you like. After that, just hit "Create A/B Test."
Once you've done that, copy the test code and paste it into your page builder. You only need one code for all your videos, no matter how many you have.
That's all! Now you can monitor the results of your A/B test, and the data will be displayed on your dashboard.
We'll share the play rate, engagement, and button click metrics with you!
To determine the winner of the test, just adjust the traffic and allocate 100% of it to the chosen video!
3. Measuring Sales from Your A/B Test
To check your sales, you've got two options:
3.1 Using the VTurb Action Button
For sales tracking, include a parameter in your checkout that shows which VSL the sale came from. This parameter needs to work with your checkout platform.
For example, let's say you're using the utm_content parameter. If you're using VTurb action buttons in your videos, just add the right parameter in each video's button. So, in Video A, your link could be mycheckout.com?utm_content=VSLA, and in Video B, it might be mycheckout.com?utm_content=VSLB.
🚨 Note: If there's already a utm_content parameter in the browser's URL (from ads), it'll be replaced by the parameter you put in the button. Other parameters in the URL stay the same.
3.2 Using HTML Buttons or Your Page Builder
If you've got HTML buttons or other hidden elements on your page, use the script below. It lets you set the exact delay for your buttons and elements based on which VSL is being shown in the A/B test. Plus, for buttons, it passes the tracking parameter you want for each VSL to the checkout!
Here's how to use the script:
Add the "hide" class to the elements where you want this to work.
Copy the code below and paste it with your player script.
Decide when in the video you want the elements to appear.
If you want, change the utm_content parameter to something else you prefer (and that works with your checkout platform, of course).
If you're running an A/B test with 2 videos, use the script below:
<style>
.hide {
display: none;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
/* DO NOT ALTER THE TIME BELOW */
var SECONDS_TO_DISPLAY = 12;
var CLASS_TO_DISPLAY = ".hide";
var attempts = 0;
var elsHiddenList = [];
var elsDisplayed = false;
var elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
var alreadyDisplayedKey = `alreadyElsDisplayed${SECONDS_TO_DISPLAY}`;
try {
alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey);
} catch (e) {
console.warn('Failed to read data from localStorage: ', e);
}
setTimeout(function () {
elsHiddenList = Array.prototype.slice.call(elsHidden);
}, 0);
var showHiddenElements = function () {
console.log(smartplayer.instances);
elsDisplayed = true;
elsHiddenList.forEach((e) => (e.style.display = "block"));
try {
localStorage.setItem(alreadyDisplayedKey, true);
} catch (e) {
console.warn('Failed to save data in localStorage: ', e);
}
};
var startWatchVideoProgress = function () {
if (
typeof smartplayer === "undefined" ||
!(smartplayer.instances && smartplayer.instances.length)
) {
if (attempts >= 10) return;
attempts += 1;
return setTimeout(function () {
startWatchVideoProgress();
}, 1000);
}
smartplayer.instances[0].on("timeupdate", () => {
if (
smartplayer.instances[0].analytics.player.options.id ==
/* PLACE THE ID OF YOUR PLAYER A BETWEEN THE '' AND SET THE VALUE TO 10,
SETTING THE TIME WHEN THE SECTIONS SHOULD APPEAR */
"62f7b142a90dbc000a0e8f45"
) {
SECONDS_TO_DISPLAY = 10;
}
if (
smartplayer.instances[0].analytics.player.options.id ==
/* PLACE THE ID OF YOUR PLAYER B BETWEEN THE '' AND SET THE VALUE TO 20,
SETTING THE TIME WHEN THE SECTIONS SHOULD APPEAR */
"6286b08c06aa090009247143"
) {
SECONDS_TO_DISPLAY = 20;
}
/* IF THERE ARE MORE VIDEOS TO ADD DELAY, PASTE THE LINE BELOW */
if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY)
return;
showHiddenElements();
});
};
if (alreadyElsDisplayed === "true") {
setTimeout(function () {
showHiddenElements();
}, 100);
} else {
startWatchVideoProgress();
}
});
</script>If your A/B test involves more than 2 videos, you'll need to insert the following code with your video information into the previous script:
if (smartplayer.instances[0].analytics.player.options.id == "VIDEO_ID") {
SECONDS_TO_DISPLAY = "DELAY_TIME_IN_SECONDS";
}Just find the part with the comment /* IF YOU HAVE MORE VIDEOS TO ADD DELAY, PASTE THE CODE BELOW */, and paste the code in the next line. Then, simply set the delay, and everything will be up and running!
Learn more at:
How to Set Up Delay Script + A/B Test Parameters
Updated on: 03/08/2024
Thank you!