Este artigo fornece instruções que devem ser usadas no Novo VTurb Player. Se você estiver usando o Antigo Player clique aqui.

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>
  var listPitch = {
    'ID_DO_VÍDEO_A': { delay: 10, utm: 'utm_content=vslA' },
    'ID_DO_VÍDEO_B': { delay: 10, utm: 'utm_content=vslB' },
  };

  var alreadyInitialized = false;

  document.addEventListener('player:ready', ({ detail }) => {
    if (alreadyInitialized) return;

    const playerId = detail.config.id;
    const pitch = listPitch[playerId];

    if (!pitch) return;

    alreadyInitialized = true;

    detail.player.displayHiddenElements(pitch.delay, ['.esconder'], { persist: true });

    updateLinksWithUTM(pitch.utm);
  });

  function updateLinksWithUTM(utmParam) {
  const links = document.querySelectorAll('a[href]:not([href*="#"])');
  const separator = '?'; 
  const queryString = separator + utmParam;

  links.forEach(link => {
    if (link.href.includes(utmParam)) return;

    const baseUrl = link.href.split('?')[0];
    link.href = baseUrl + queryString;
  });
}

</script>

Saiba mais em:
Como utilizar o teste A/B

Atualizado em: 14/05/2025