• Código de ayuda

    Índice

    Corto y dulce

    Los Ayudantes de Código le ayudan como desarrollador web a configurar pruebas A/B, especialmente cuando desarrolla para aplicaciones de una sola página. 

    Funciones auxiliares de JavaScript

    varifyHelpers.waitFor

    Con la función waitFor se utiliza un observador de mutaciones para esperar un elemento definido. En cuanto se añaden al DOM nuevos elementos que corresponden al selector definido (por ejemplo, mediante AJAX o JavaScript), se ejecuta la función de devolución de llamada.

    La función callback se llama para cada elemento recién identificado. 

    Ejemplo 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';
    });
    				
    			

    Añadir varios selectores

    				
    					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';
    });
    				
    			

    varifyHelpers.onDomChanged

    Esta función llama al CallBack cada vez que se añaden o eliminan elementos en el DOM. También se basa en un observador de mutaciones. 

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

    varifyHelpers.onDomLoaded

    Esta función llama a la llamada de retorno tan pronto como se haya cargado el DOM. Si el DOM ya está cargado, la llamada de retorno se llama inmediatamente.

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

    varifyHelpers.isInView

    Con la función isInView  el sistema espera a que un elemento DOM específico sea completamente visible en la ventana gráfica. Por defecto, la llamada de retorno sólo se ejecuta una vez, pero opcionalmente puede ejecutarse cada vez que el elemento se encuentre en la ventana gráfica. 

    				
    					// 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);
    				
    			

    varifyHelpers.resetListeners

    Esta función reinicia todos los observadores (observador de intersección y de mutación) de las funciones mencionadas. Esto significa que las funciones de devolución de llamada definidas dejan de ejecutarse.

    				
    					// 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()
    				
    			
  • Primeros pasos

    Seguimiento y evaluación

    Dirigiéndose a

    Avanzado

    Resumen de funciones

    Otros contenidos útiles