Pular para o conteúdo principal

Assistentes de Código

Última atualização em 24 de mar. de 20261 min de leitura
Índice

Em resumo​

Code Helpers ajudam-te, como desenvolvedor web, a configurar testes A/B, especialmente ao desenvolver testes A/B para single page applications.

Funções auxiliares de JavaScript​

waitFor -> Esperar por elementos no DOM​

Com a função waitFor um mutation observer é usado para esperar por um elemento definido. Assim que novos elementos correspondentes ao seletor definido são adicionados ao DOM (por exemplo, via AJAX ou JavaScript), a função de callback é executada.

A função de callback é chamada para cada elemento recém-identificado.

Exemplo de código​

<div>
  <p>This is existing content.</p>
  <!-- <p class="lazyloaded-content">This content will be loaded later.</p> -->
</div>
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
  // After the content was loaded, we want to color it red.
  element.style.color = 'red';
});

Adicionar múltiplos seletores​

window.varify.helpers.waitFor('.lazyloaded-content, .another-selector, and-another-selector', (element) => {
  // After the content was loaded, we want to color it red.
  element.style.color = 'red';
});

onDomChanged -> Alterações no DOM​

Esta função chama o CallBack sempre que elementos são adicionados ou removidos no DOM. Também é baseada em um Mutation Observer.

window.varify.helpers.onDomChanged(() => {
  // Write code here, which will run everytime the dom changes.
});

onDomLoaded -> DOM foi carregado​

Esta função chama o callback assim que o DOM é carregado. Se o DOM já estiver carregado, o callback é chamado imediatamente.

window.varify.helpers.onDomLoaded(() => {
  // Write code here, which will run, when the DOM has loaded.
});

isInView -> Elemento completamente na viewport​

Com a função isInView espera-se que um determinado elemento DOM esteja totalmente visível na viewport. O callback é executado apenas uma vez por padrão, mas pode opcionalmente ser executado cada vez que o elemento estiver na viewport.

// The callback here will be triggered ONE TIME, when the element is in view.
window.varify.helpers.isInView('.product', (element) => {
  window.dataLayer.push({
    event: 'product viewed',
    element,
  });
});

// Adding true as third parameter
// will trigger the callback EVERY TIME the element is in view.
window.varify.helpers.isInView('.product', () => {}, true);

isInEditor -> Verificar o Varify Editor​

Podes usar esta função auxiliar para verificar se estás atualmente no Varify Editor. Isto garante que o teu código é executado apenas no website em produção - e não no editor.

Isto é particularmente útil se o teu script, por exemplo, Forwarding via JavaScript, for acionado: Podes usar esta verificação para evitar especificamente o redirecionamento no editor, de forma a poderes continuar a testar e editar aí sem problemas.

if (window.varify.helpers.isInEditor()) {
  return
}

// Your JavaScript Code (won't run in editor)

resetListeners -> Repor todos os observadores​

Esta função reinicia todos os observadores (intersection e mutation observer) das funções acima. Assim, as funções de callback definidas deixam de ser executadas.

// As an example, we setup a waitFor listener here. This will use a MutationObserver under the hood.
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
  element.style.color = 'red';
});

// The next resetting function call could e.g. be located in a navigation callback function.
window.varify.helpers.resetListeners()
Nesta página