> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.vturb.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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


| Atenção: O VTurb agora possui uma funcionalidade nativa e sem código para sincronizar elementos da página! Recomendamos que você use a nova função 'Mostrar conteúdo oculto':
| 1 - Acesse a edição do vídeo no painel
| 2 - Vá em "Botões de Ação (CTA)"
| 3 - Adicione um botão com o Tipo de botão "Mostrar Conteúdo Oculto"
| 4 - No elemento que será ocultado, adicione a classe ou ID desejada **e também aplique `display: none`** para que ele permaneça oculto desde o carregamento da página.
| 5 - No botão, informe a mesma classe ou ID do elemento e defina o tempo em que ele deverá ser exibido.

||| Siga as instruções abaixo apenas se você precisar obrigatoriamente usar códigos manuais no seu site.

# 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:

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2024-04-30-as-_gvrv37.png =1086xauto)

→ 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 de delay 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_A 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:

![](https://storage.crisp.chat/users/helpdesk/website/-/3/9/0/a/390a843820d6ba00/image_14cqkhz.png =828xauto)


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!

Troque "ID_DO_VIDEO_A" pelo ID do vídeo A, assim como o "ID_DO_VIDEO_B" pelo ID do vídeo B, e assim por diante...

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' },
    'ID_DO_VÍDEO_C': { delay: 10, utm: 'utm_content=vslC' }
  };

  var alreadyInitialized = false;

  var updateLinksWithUTM = function(utmParam) {
    var links = document.querySelectorAll('a[href]:not([href*="#"])');
    var separator = '?';
    var queryString = separator + utmParam;
    for (var i = 0; i < links.length; i++) {
      var link = links[i];
      if (link.href.indexOf(utmParam) !== -1) continue;
      if(utmParam === undefined) return
      var baseUrl = link.href.split('?')[0];
      link.href = baseUrl + queryString;
    }
  };

  document.addEventListener('player:ready', function(event) {
    if (alreadyInitialized) return;

    var detail = event.detail || {};
    var config = detail.config || {};
    var player = detail.player || document.querySelector('vturb-smartplayer');
    var playerId = config.id;
    var pitchConfig = listPitch[playerId];

    if (!playerId || !pitchConfig) return;

    alreadyInitialized = true;

    player.displayHiddenElements(pitchConfig.delay, ['.esconder'], { persist: true });
    //updateLinksWithUTM(pitchConfig.utm);
  });
</script>
```

Saiba mais em:
[Como utilizar o teste A/B](https://help.vturb.com/pt-br/article/como-usar-teste-ab-para-turbinar-seu-video-de-vendas-seh03b/?bust=1697654672636)