Articles on: PLAYER AND VIDEO
This article is also available in:

Setting Up a Delay Script + A/B Test Parameters

Setting Up a Delay Script + A/B Test Parameters



This guide is perfect for those of you running A/B tests with two videos of different durations and wanting on-page sections to display in sync with each video's timeline.
For instance, if Video A has sections appearing after 5 minutes and Video B after 10 minutes, the sections will appear accordingly when each video plays.

On Parameters: Any checkout buttons on your site will automatically capture URL parameters and pass them to your checkout platform's manager.

💡 Note: To get your video IDs, don't look in the A/B test code. The steps below are for setting up each video separately—Video A and Video B.

Step 1: Setting up Parameters on the HTML Button

a. Replace `.bt-red` within single quotes (`''`) with the class of your site’s checkout button. Remember, you need the class inside the quotes.
→ To locate the button’s class, follow the steps below.



b. Open your browser's “Inspect” tool:

- Google Chrome

Right-click anywhere on your webpage and choose Inspect. Or use the shortcut: Ctrl+Shift+I.

- Firefox

Right-click an empty area or an element, then click Inspect Element. Shortcut: Ctrl+Shift+I.

- Opera

Shortcut: Ctrl+Shift+I. Alternatively, right-click your desired element and select Inspect Element.

- Internet Explorer

Right-click an item, select Inspect Element, or press F12.


c. The divided screen that pops up? Here's what to do:



d. Click on the mouse icon. This triggers a tracking tool for elements on your page.



e. Hover over your checkout button. Once its details appear, click on it.



f. After clicking, you'll notice a section in the “Inspect” tool highlighted in blue.



g. This highlighted section reveals the button’s class and details. Typically, the class name is the first item within the Class attribute. For instance, if it's button-link, that's the class you need. If it's bt-red, go with that.



h. Double-click to select the class name.



i. Finally, paste the class name into your script, prefixed with a dot (like .bt-red).



Voila! Your checkout button is now set up to capture the URL parameters.

Step 2: Adjusting the Delay

a. Within single quotes (`''`), insert the ID of your Video A.
→ To get the ID from VTurb, follow the next steps.



b. On your Video A edit page, click on "Embed."



c. Hover over the marked areas till the cursor changes, then drag down to reveal the entire JS code.





d. The video ID lies between the “players” tags. Copy it for your script.



e. Once you have the Video A ID, paste it between the single quotes ('').



Done with Video A? Repeat for Video B!

Step 3: Setting the Delay Time

a. Further in the script, you'll see a spot to add the video IDs.
For Video A, input the ID you just copied. Then, where you see SECONDS_TO_DISPLAY, replace “10” with the desired delay time in seconds for Video A.



b. Down the script, you’ll spot another section for video IDs.
For Video B, enter its ID as shown in Step 2. Then, replace the “20” under SECONDS_TO_DISPLAY with the desired delay time for Video B.



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!




For situations involving more than 2 videos, you'll need to insert the following code at the end of the article script, including the details for each video to apply the UTMs:

Replace VIDEO_ID with your video's ID, and in both instances with vslX, substitute it with the desired VSL name.

if (smartplayer.instances[0].analytics.player.options.id ==
 "VIDEO_ID"
 ) {
       const queryString = window.location.search.replace("utm_source=FB", "") + "&utm_source=vslX";
       if (buttonLinks[0].href.includes("vslX")) {
           return;
       }
       buttonLinks.forEach((buttonLink) => {
           buttonLink.href += queryString;
       });
  }


Just locate the part marked with the comment /* IF THERE ARE MORE VIDEOS TO ADD UTM, PASTE IN THE LINE BELOW */ and insert the code in the following line. Then, simply set the delay, and everything will be up and running!

There you go! 😃

Your A/B test videos are now working with the delay, and the checkout buttons will be passing the URL parameters!

<style>
  .hide {
    display: none;
  }
</style>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    /* DO NOT CHANGE ANYTHING HERE */
    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("play", () => {
        /* PUT YOUR PLAYER A ID BETWEEN '' HERE */
        const buttonLinks = document.querySelectorAll(".bt-red");
        console.log(buttonLinks);
        if (
          smartplayer.instances[0].analytics.player.options.id ==
          "62f7b142a90dbc000a0e8f45"
        ) {
          const queryString =
            window.location.search.replace("utm_source=FB", "") +
            "&utm_source=vslA";
          if (buttonLinks[0].href.includes("vslA")) {
            return;
          }
          buttonLinks.forEach((buttonLink) => {
            buttonLink.href += queryString;
          });
        }
        if (
          /* PUT YOUR PLAYER B ID BETWEEN '' HERE */
          smartplayer.instances[0].analytics.player.options.id ==
          "6286b08c06aa090009247143"
        ) {
          const queryString =
            window.location.search.replace("utm_source=FB", "") +
            "&utm_source=vslB";

          if (buttonLinks[0].href.includes("vslB")) {
            return;
          }
          buttonLinks.forEach((buttonLink) => {
            buttonLink.href += queryString;
          });
        }

        /* IF YOU HAVE MORE VIDEOS TO PASS UTM, PASTE THE LINE BELOW */

        if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
        if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY)
          return;
        showHiddenElements();
      });
      smartplayer.instances[0].on("timeupdate", () => {
        const buttonLinks = document.querySelectorAll(".bt-red");

        if (
          /* PUT YOUR PLAYER A ID AND SET THE VALUE TO 10, THE TIME SECTIONS SHOULD APPEAR DURING VIDEO A */
          smartplayer.instances[0].analytics.player.options.id ==
          "62f7b142a90dbc000a0e8f45"
        ) {
          SECONDS_TO_DISPLAY = 10;
        }
        if (
          /* PUT YOUR PLAYER B ID AND SET THE VALUE TO 20, THE TIME SECTIONS SHOULD APPEAR DURING VIDEO B */
          smartplayer.instances[0].analytics.player.options.id ==
          "6286b08c06aa090009247143"
        ) {
          SECONDS_TO_DISPLAY = 20;
        }

        /* IF YOU HAVE 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();


Dive deeper with:

- How to Use A/B Testing

Updated on: 11/30/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!