Artigos sobre: PLAYER E VÍDEO
Este artigo também está disponível em:

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

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 com tempos diferentes 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!
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: Incluindo os parâmetros no botão HTML.



a. Onde tem o .bt-red, entre as aspas simples ( ‘ ‘) você deve substituir pela classe do botão de checkout da sua página, sem excluir as aspas, deve ser colocada a classe entre elas.

Incluindo os parâmetros no botão HTML.

→ Para encontrar a classe do botão, é só seguir os próximos passos:


b. Abrir o “Inspecionar” em seu Navegador:

- Google Chrome

Clique com o botão direito do mouse em qualquer parte do site e selecione Inspecionar.
Você também pode usar as teclas de atalho se estiver no Windows: Ctrl+Shift+I.

- Firefox

Clique com o botão direito em uma área vazia da tela ou em um elemento, então clique em Inspecionar Elemento.
Você também pode usar os atalhos se estiver no Windows: Ctrl+Shift+I ou Ctrl+Shift+I.

- Opera

Utilize o seguinte atalho se estiver no Windows: Ctrl+Shift+I. Ou selecione a opção Inspecionar Elemento ao clicar com o botão direito no elemento desejado.

- Internet Explorer

Como os anteriores, clique com o botão direito em cima do item e selecione Inspecionar Elemento ou aperte a tecla F12 do teclado se estiver no Windows.

c. Aparecerá essa tela dividida:


Incluindo os parâmetros no botão HTML.

d. Você deve clicar no símbolo de mouse. Isso ativará uma opção de rastreio nos elementos em sua página:

ativará uma opção de rastreio nos elementos em sua página

e. Após clicar no ícone de mouse, você deve posicionar o mouse sobre o botão de check out. Aparecerá algumas informações sobre o elemento quando posicionar o mouse sobre ele, você só precisa dar um clique no botão:




f. Após clicar no botão, você verá que ficará uma seção no Inspecionar com um sublinhado azul, como na imagem abaixo:




g. Esse sublinhado azul mostra exatamente a classe e informações sobre o botão.
Você verá no nome Class que terá alguns nomes dentro dele: Você deve copiar apenas o primeiro nome antes do espaço.

→ Exemplo: Se o primeiro nome for separado por traços, você deve copiar ele inteiro dessa forma: button-link (ele será a classe). Os nomes das classes são separados por espaço, um elemento pode ter várias classes. A classe do botão no exemplo abaixo é: bt-red




h. Dê 2 cliques sobre o nome da classe, até que você consiga selecionar o nome dela:



i. O último passo para incluir a classe do botão no script é colar o nome da classe entre as aspas simples ( ‘ ‘ ) e acrescentar um ponto no começo da classe, como no exemplo abaixo.
Lembrando que o nome da classe do botão usado no exemplo é: bt-red



Prontinho, o botão de check out do seu site já está passando os parâmetros da url!

2.º Passo: Ajustando delay.



a. Colocar entre as aspas ( ' ' ) o ID do seu vídeo A!



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

b. Na página de edição do seu vídeo A, aperte em Embed:




c. Posicione o seu mouse nas hachuras marcadas abaixo até o mouse mudar de forma e clique sobre elas, arrastando-as para baixo até que o código JS fique totalmente visível:






d. O ID do vídeo fica entre os nomes “players”. É ele que você deve copiar e colar no seu script!
Verifique a imagem abaixo: O que está entre os nomes “players”, selecionado em azul, é o ID do vídeo.



e. Copiado o ID do seu vídeo no VTurb, você deve colar ele entre as aspas simples ( ‘ ‘ ) como na imagem abaixo:




Pronto!

→ Para usar seu vídeo B do teste A/B, repita todo o processo do 2.o passo!

3.º Passo: Ajustando o tempo de delay.



a. Mais abaixo no script, haverá mais uma seção para colocar o ID dos vídeos.
A primeira, como ilustrada abaixo, deve ser para o vídeo A:

Coloque o ID do vídeo A, que copiamos no passo anterior.
Logo abaixo, onde tem SECONDS_TO_DISPLAY você deve trocar o número “10” pelos segundos que a seção da sua página deve aparecer com delay no vídeo A.



b. Mais abaixo no script, haverá mais uma seção para colocar o ID dos vídeos.
A primeira, como ilustrada abaixo, deve ser para o vídeo B:

Coloque o ID do vídeo B, conforme ensinamos no 2.o passo deste artigo.
Logo abaixo, onde tem SECONDS_TO_DISPLAY você deve trocar o número “20” pelos segundos que a seção da sua página deve aparecer com delay no vídeo B.




Caso o seu teste A/B tenha mais de 2 vídeos, será necessário colocar esse código abaixo com as informações de cada vídeo dentro do script no final do artigo para aplicar o delay:

if ( smartplayer.instances[0].analytics.player.options.id == "ID_DO_VÍDEO" ) {
    SECONDS_TO_DISPLAY = "TEMPO_DE_DELAY_EM_SEGUNDOS";
}


Basta localizar a parte que está com o comentário /* CASO TENHA MAIS VÍDEOS PARA COLOCAR DELAY COLAR NA LINHA ABAIXO*/ e colocar o código na linha seguinte, depois é só configurar o delay e estará tudo funcionando!



Ainda para casos com mais de 2 vídeos, será necessário colocar esse código abaixo com as informações de cada vídeo dentro do script no final do artigo para aplicar os UTMS:

Altere o ID_DO_VÍDEO com o id do seu vídeo e nas duas partes com vslX altere para o nome do VSL que deseja passar


if ( smartplayer.instances[0].analytics.player.options.id ==
 "ID_DO_VÍDEO"
 ) {
       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;
       });
  }


Basta localizar a parte que está com o comentário /* CASO TENHA MAIS VÍDEOS PARA PASSAR O UTM COLAR NA LINHA ABAIXO*/ e colocar o código na linha seguinte, depois é só configurar o delay e estará tudo funcionando!

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

Segue o script:

<style>

  .esconder {
    display: none;
  }
</style>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    /* AQUI VOCÊ NÃO ALTERA NADA */
    var SECONDS_TO_DISPLAY = 12;
    var CLASS_TO_DISPLAY = ".esconder";

    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", () => {
        /* COLOCAR ENTRE AS '' O ID DO SEU PLAYER A */
        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 (
          /* COLOCAR ENTRE AS '' O ID DO SEU PLAYER B */
          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;
          });
        }

/* CASO TENHA MAIS VÍDEOS PARA PASSAR O UTM COLAR NA LINHA ABAIXO*/


        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 (
          /* COLOCAR ENTRE AS '' O ID DO SEU PLAYER A E NO VALOR 10, COLOQUE O 
                   TEMPO QUE AS SEÇÕES DEVEM APARECER DURANTE O VÍDEO A*/
          smartplayer.instances[0].analytics.player.options.id ==
          "62f7b142a90dbc000a0e8f45"
        ) {
          SECONDS_TO_DISPLAY = 10;
        }
        if (
          /* COLOCAR ENTRE AS '' O ID DO SEU PLAYER B E NO VALOR 20, COLOQUE O 
                   TEMPO QUE AS SEÇÕES DEVEM APARECER DURANTE O VÍDEO B*/
          smartplayer.instances[0].analytics.player.options.id ==
          "6286b08c06aa090009247143"
        ) {
          SECONDS_TO_DISPLAY = 20;
        }

      /* CASO TENHA MAIS VÍDEOS PARA COLOCAR DELAY COLAR NA LINHA ABAIXO*/


        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();
    }
  });
</script>


Saiba mais em:
Como utilizar o teste A/B

Atualizado em: 18/01/2024

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!