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 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"},
          ];
  
          let SECONDS_TO_DISPLAY = 5;
          let CLASS_TO_DISPLAY = ".esconder";
  
          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("teste a/b 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("#")) return;
                    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>


Saiba mais em:
Como utilizar o teste A/B

Atualizado em: 30/08/2024

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!