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('?')) {
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: 18/05/2024
Obrigado!