How to Easily A/B Test Your Video With Wistia

A/B Testing = Always Be Testing

UPDATE 2: Wistia finally released their own built-in A/B tester! Read about it here.

UPDATE: we released a tool that does the work for you. Check out our A/B Test Embed Generator tool!

A/B testing is such a mainstay in today’s digital marketing, and testing video content is no exception. But what happens when you don’t have the time or resources to setup multiple pages to host multiple videos? It could be a landing page, a blog post, or any page on your website that you can only have one copy of.

Well, if you’re using Wistia – you’re in luck! It turns out that it’s actually pretty easy to embed an A/B test for Wistia videos on a single page. All it takes is a bit of modified embed code and the video IDs of the videos you want to test.

Here’s the code that you can easily copy and paste into whichever page you want. You just need to be sure to swap out “wistia_hashedId_1” and “…_2” with the alphanumeric Wistia IDs at the end of each video’s URL (i.e. youraccount.wistia.com/medias/3js9dj2s4a).

<script src="//fast.wistia.com/assets/external/E-v1.js" async=""></script>
<div class="wistia_responsive_wrapper style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;">
<div id="ab_test" class="wistia_embed videoFoam=true" style="height: 100%; width: 100%;"></div></div>
<script>
  var hashedIds = ["wistia_hashedId_1", "wistia_hashedId_2"];
  var rand = Math.floor(Math.random() * hashedIds.length);
  var autoPlay = false;
  var hashedId = hashedIds[rand];
  document.getElementById("ab_test").className += " wistia_async_" + hashedId;
</script>

Did I mention that this embed is also fully responsive? Because it totally is. Pretty cool, right? That’s all that you need in order to begin A/B testing your Wistia videos!

But if you want to really understand what’s going on here, allow me to get a little nerdy for a minute…

Gettin’ nerdy with it

The code is an amalgamation of the standard inline embed code and the A/B test code from Wistia’s JavaScript Player API.

First, it creates a div that contains the video embed. Then it creates another div within that one that holds the actual video – but there’s a trick, because, if you noticed, we have yet to actually tell the embed which video we want to embed.

There’s two parts to make that happen – the first is the div id=”ab_test”. This tells the JavaScript code where it needs to put the results of its script. The name of this div id doesn’t matter, it just needs to match the id in the JavaScript.

The second part is the JavaScript. When you input your two video IDs, you’re actually inputting them into an array. The script takes that array, determines how many values are in it, then randomly selects 1 or 2 (because there are two total elements). That 1 or 2 is turned back into its respective video ID and added to the end of a new div class called “wistia_async_”. This div class is injected into the same div that has id=”ab_test” and is what now tells the video embed which video it should actually embed.

If you use this code to start your own Wistia A/B testing, please share a link in the comments so we can take a look! Happy A/B video testing!

Resources

This code was derived from the A/B test code over on Wistia’s Player API docs. They have some pretty neat stuff if you know your way around JavaScript!

Andy Waplinger

I'm the CEO and co-founder of Medialytics. I'm on a mission to make the lives of content creators everywhere easier and more informed. I love to learn and teach and empower others. I also love puppy GIFs.

This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>