Setting Up a Delay Script + A/B Test Parameters

The script code is at the end of the article.

This article is for you if you have 2 or more videos with different times in an A/B test and want the page sections to appear according to the predefined time in each video!

For example: If in video A, the sections appear at 5 minutes and in video B at 10 minutes, when video A is playing, its sections will appear at 5 minutes, and for video B, they will appear at 10 minutes.

About the parameters: All checkout buttons will capture the parameters from your URL and send them to your checkout platform manager!

Note: To get the video IDs, you cannot use the A/B test code. The following process is done in the individual editing of each video - video A and video B, separately.

Step 1: Get the video IDs

→ To get the ID of your video A in VTurb, follow these steps.

a. On the editing page of your video A, the ID will appear in the URL:



→ To find the ID of your video B for the A/B test, repeat the entire process from Step 1!

Step 2: At the beginning of the code, you will find this information:

const vturbVideos = [
  {videoId: "VIDEO_A_ID", delayInSeconds: 10, utm: "utm_content=vslA"},
  {videoId: "VIDEO_B_ID", delayInSeconds: 10, utm: "utm_content=vslB"},
];

a. Replace the text VIDEO_A_ID with the ID of the video where you want to apply the delay and UTM settings.

b. In delayInSeconds, change the value 10 to the delay time in seconds you want to apply to the video you added the ID for.

c. In UTM, add the UTM code that will be added to the buttons on your site, it already has utm_content by default.

If you have more than 2 videos, after the comma, you can add as many videos as you want by using the code below and making the same configurations for the new video:

{videoId: "ID_DO_VÍDEO_C", delayInSeconds: 10, utm: "utm_content=vslC"},

Done! 😃

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

Here is the script:

<style>.hide{display: none}</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
      // Add video information below
      const vturbVideos = [
        {videoId: "VIDEO_A_ID", delayInSeconds: 10, utm: "utm_content=vslA"},
        {videoId: "VIDEO_B_ID", delayInSeconds: 10, utm: "utm_content=vslB"},
      ];

      let SECONDS_TO_DISPLAY = 5;
      let CLASS_TO_DISPLAY = ".hide";

      let attempts = 0;
      let elsHiddenList = [];
      let elsDisplayed = false;
      let elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
      let 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);

      let showHiddenElements = function() {
        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);
        }
      };

      let startWatchVideoProgress = function() {
        if (
          typeof smartplayer === "undefined" ||
          !(smartplayer.instances && smartplayer.instances.length)
        ) {
          if (attempts >= 10) return;
          attempts += 1;
          return setTimeout(function() {
            startWatchVideoProgress();
          }, 1000);
        }

        console.log("A/B test delay script loaded");
        const buttonLinks = document.querySelectorAll("a");
        vturbVideos.forEach((video) => {
          if (smartplayer.instances[0].analytics.player.options.id == video.videoId) {
            utmPrefix = window.location.search ? '&' : '?';
            const queryString = window.location.search.replace("utm_source=FB", "") + utmPrefix + video.utm;
            if (buttonLinks[0].href.includes(video.utm)) return;
            buttonLinks.forEach((buttonLink) => {
                if(buttonLink.href.includes('?')) {
                  buttonLink.href += queryString.replace("?", "&");
                }else {
                  buttonLink.href += queryString;
                }
            });
          }
        })

        if (alreadyElsDisplayed === "true") return;

        vturbVideos.forEach((video) => {
          if (smartplayer.instances[0].analytics.player.options.id == video.videoId) {
            SECONDS_TO_DISPLAY = video.delayInSeconds;
          }
        })

        smartplayer.instances[0].on("timeupdate", () => {
          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);
      }
      startWatchVideoProgress();
    });
</script>

Learn more at:
How to Use A/B Testing

Updated on: 10/18/2024