Saltar al contenido principal

Experiment JavaScript y Experiment CSS

Última actualización el 23 oct 20262 min de lectura
Índice de contenidos

En resumen​

Con Experiment JavaScript y Experiment CSS, puedes entregar código JavaScript y CSS a todas las variantes de un experimento, incluyendo el original. El código del experimento siempre se ejecuta antes que el código de las variantes individuales.

Esto es útil siempre que el código deba ejecutarse de forma idéntica para cada visitante del experimento, por ejemplo para cargar un script de seguimiento en todas las variantes. El código del experimento está pensado para usuarios experimentados con conocimientos de programación.

Panel de Varify con el menú de tres puntos de un experimento abierto, mostrando la sección «Código aplicado a todas las variantes» con las entradas Add Experiment JavaScript, Add Experiment CSS y Add Reset JavaScript

Dónde encontrar Experiment JS y Experiment CSS​

Puedes encontrar ambas funciones en la vista general de experimentos de tu panel:

  1. Haz clic en el menú de tres puntos en la parte superior derecha del experimento.
  2. En Code applied for all variations, selecciona Add Experiment JavaScript o Add Experiment CSS.
  3. Introduce tu código y guárdalo.

La insignia junto a cada entrada muestra si ya se ha añadido código.

Cómo funciona el código de Experiment​

  • Entregado a cada variante: el código de Experiment se aplica a todas las variantes del experimento y al original.
  • Se ejecuta primero: el código de Experiment siempre se ejecuta antes que el código de la variante. El código o los estilos que añadas dentro de una variante pueden, por tanto, basarse en lo que el código de Experiment ya ha configurado.
  • Mismo código, mismo resultado para todos: como el código se entrega a todas las variantes, no crea diferencias entre ellas. Úsalo para cosas que deban aplicarse a todos, y usa el código de la variante (consulta Add JavaScript y Add CSS) para los cambios que quieras probar.

Ejemplos de aplicación​

Ejecutar un script de seguimiento en todas las variantes​

Un caso de uso típico de Experiment JavaScript es un script de seguimiento que debe añadirse a todas las variantes. En lugar de copiar el script en cada variante, lo añades una vez como Experiment JavaScript.

// Runs on the original and on all variations
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: 'experiment_loaded',
});

Compartir estilos entre todas las variantes​

Con Experiment CSS, puedes definir estilos que se necesitan en todas las variantes, por ejemplo para un elemento que añades mediante JavaScript.

.promo-note {
  font-size: 14px;
  color: #333;
}

Usar funciones auxiliares​

Las funciones auxiliares de Varify también funcionan en Experiment JavaScript. Puedes usarlas, por ejemplo, para esperar a que aparezcan elementos en el DOM o para evitar que el código se ejecute en el editor. Puedes encontrar todas las funciones disponibles y ejemplos en el artículo Code Helpers.

window.varify.helpers.waitFor('.product', (element) => {
  // Runs as soon as the element is available in the DOM
});

Añadir JavaScript de reinicio​

En el mismo menú, también encontrarás Add Reset JavaScript. Elimina el código que hayas añadido, lo cual es especialmente útil para Single Page Applications. Puedes encontrar más información en el artículo Add JavaScript Reset.

En esta página