Como configurar script de delay + Parâmetros do teste A/B

O código do script está no final do artigo

Este artigo serve para você que tem 2 ou mais vídeos no teste A/B e quer que as seções das páginas apareçam de acordo com o tempo predefinido em cada vídeo, podendo passar um parâmetro UTM para os links do seu site e dessa forma identificar qual é o vídeo na página!

Por exemplo: Se no vídeo A, o tempo para as seções aparecerem é de 5 minutos e no vídeo B é de 10 minutos, quando o vídeo A estiver rodando, suas seções aparecerão aos 5 minutos e, quando for o B, vão aparecer aos 10 minutos.

Sobre os parâmetros: Todos os botões de checkout captarão os parâmetros da sua url e serão enviados ao gerenciador da sua plataforma de checkout!

Atenção: Para pegar o ID dos vídeos, não pode ser pelo código do teste A/B. O processo abaixo é feito na edição individual de cada vídeo - o vídeo A e o vídeo B, separadamente.

1.º Passo: Pegar id dos vídeos.

→ Para pegar o ID do seu vídeo A no VTurb, siga os próximos passos.

a. Na página de edição do seu vídeo A o ID dele vai aparecer na URL:



→ Para encontrar o id do seu vídeo B do teste A/B, repita todo o processo do 1.o passo!

2.º Passo: No início do código do Teste A/B_você vai encontrar essas informações:

const vturbVideos = [
  {videoId: "ID_DO_VÍDEO_A", delayInSeconds: 10, utm: "utm_content=vslA"},
  {videoId: "ID_DO_VÍDEO_B", delayInSeconds: 10, utm: "utm_content=vslB"},
];

a. Troque o texto ID_DO_VÍDEO pelo id do vídeo que vai aplicar as configurações de delay e UTM

b. Em delayInSeconds você irá alterar o valor 10 para o tempo de delay em segundos que deseja aplicar no vídeo em que adicionou o ID

c. Em UTM você coloca o código UTM que será acrecentado nos botões do seu site, já está com o utm_content por padrão

Caso tenha mais do que 2 vídeos, após a vírgula você pode adicionar quantos vídeos desejar, basta colocar o código abaixo e fazer as mesmas configurações de acordo com o novo vídeo

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

3.º Coloque a classe "esconder" nos elementor em que deseja aplicar o delay

Caso sua página seja em HTML PURO, você deverá criar uma div ao redor dos elementos que você quer que sejam influenciados pelo script de delay e nomear a div com a classe esconder , exemplo:

<div class="esconder">
_SEÇÃO A SER ESCONDIDA
</div>

Caso esteja em Elementor você deve clicar com botão direito sobre o elemento que receberá o delay dentro da sua página e ir em "editar elemento", podendo também ser uma seção completa, abrirá uma seção de edição na lateral. Você deverá clicar em "avançado" e adicionar a classe "esconder" em classe CSS:



Pronto! 😃
Seus vídeos do teste A/B estão funcionando com o delay e os botões de checkout estarão passando os parâmetros da url!

Segue o script:

<style>.esconder {display: none}</style>
   <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
          // adicione as informações dos vídeos abaixo
    const vturbVideos = [
        {videoId: "ID_DO_VÍDEO_A", delayInSeconds: 10, utm: "utm_content=vslA"},
        {videoId: "ID_DO_VÍDEO_B", delayInSeconds: 10, utm: "utm_content=vslB"},
    ];

    const EXPIRATION_DAYS = 14;
    const CLASS_TO_DISPLAY = ".esconder";
    const elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
    let elsDisplayed = false;
    let attempts = 0;

    class StorageHandler {
        static expiryTime = EXPIRATION_DAYS * 86400000;

        static set(key, value) {
            localStorage.setItem(
                key,
                JSON.stringify({ value, expiry: Date.now() + this.expiryTime })
            );
        }

        static get(key) {
            const item = localStorage.getItem(key);
            if (!item) return null;

            const { value, expiry } = JSON.parse(item);
            if (Date.now() > expiry) {
                localStorage.removeItem(key);
                return null;
            }
            return value;
        }
    }

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

        const currentVideoId = smartplayer.instances[0].analytics.player.options.id;
        return vturbVideos.find(video => video.videoId === currentVideoId);
    }

    function showHiddenElements() {
        elsDisplayed = true;
        elsHidden.forEach(e => e.style.display = "block");
    }

    function startWatchVideoProgress() {
        const videoSettings = getVideoSettings();
        if (!videoSettings) return;

        const alreadyDisplayedKey = `alreadyElsDisplayed_${videoSettings.videoId}`;
        const alreadyElsDisplayed = StorageHandler.get(alreadyDisplayedKey);

        if (alreadyElsDisplayed) {
            showHiddenElements();
            return;
        }

        smartplayer.instances[0].on("timeupdate", () => {
            if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
            if (smartplayer.instances[0].video.currentTime < videoSettings.delayInSeconds) return;
            showHiddenElements();
            StorageHandler.set(alreadyDisplayedKey, true);
        });

        updateButtonUTMs(videoSettings.utm);
    }

    function updateButtonUTMs(utmParam) {
        const buttonLinks = document.querySelectorAll("a");
        const utmPrefix = window.location.search ? '&' : '?';
        const queryString = window.location.search.replace("utm_source=FB", "") + utmPrefix + utmParam;

        buttonLinks.forEach(buttonLink => {
            if (buttonLink.href.includes("#") || buttonLink.href.includes(utmParam)) return;
            buttonLink.href += buttonLink.href.includes('?') ? queryString.replace("?", "&") : queryString;
        });
    }

    startWatchVideoProgress();
});
</script>

Saiba mais em:
Como utilizar o teste A/B

Atualizado em: 03/03/2025