Saltar al contenido principal

Crear un experimento multipágina

Última actualización el 22 abr 20262 min de lectura
Índice de contenidos
Diagrama de un experimento multipágina: tres páginas en la fila A con un encabezado verde, las mismas tres en la fila B con uno oscuro

En resumen​

Si quieres hacer cambios simultáneos entre páginas dentro de un experimento, necesitas un experimento multipágina. Hay dos formas de crear ese tipo de experimento en Varify.io:

  1. El método sencilloCrea varios experimentos separados y enlázalos entre sí.
  2. El método avanzadoUsa un único experimento y controla las variantes mediante JavaScript. Sin embargo, esto requiere un buen conocimiento de JavaScript.

Ambos enfoques te permiten llevar a cabo experimentos multipágina efectivos, según tus conocimientos técnicos y requisitos.

1ª opción: Crear varios experimentos (principiantes + avanzado)​

La forma más sencilla de crear un experimento multipágina es crear varios experimentos y luego enlazarlos entre sí. Puedes guardar los cambios deseados en un experimento separado para cada página. En cuanto se hayan creado todos los experimentos, la conexión se realiza añadiendo un JavaScript en Audience Targeting. De esta forma, los experimentos se coordinan de manera eficiente y pueden probarse en todas las páginas.

Cómo implementar de forma óptima un experimento multipágina:

  1. Crea un experimento por página
    Crea un experimento separado para cada sitio web en el que se vaya a producir un cambio.
  2. Define el experimento principal
    Determina cuál es el experimento principal. En el experimento principal, los visitantes se convierten en participantes de la prueba. El experimento principal es el experimento en la página que los participantes de la prueba ven primero.
  3. Inserta el código para la segmentación de audiencia
    En todos los experimentos que forman parte del experimento multipágina, pero no en el experimento principal, introduce el siguiente código en la segmentación de audiencia.
const EXPERIMENT_ID = 13013; // Change this to the experiment ID you're interested in
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;
const targetVariationId = 17347; // The specific variation ID to check for

// Retrieve the value for specificStorageKey
const storedValue = localStorage.getItem(specificStorageKey);

if (storedValue) {
    // Parse the stored JSON string
    const storedData = JSON.parse(storedValue);

    // Check if the current user has the specific variation ID
    if (storedData.variationId === targetVariationId) {
        console.log('User has the specific variation ID');
        return true;
    } else {
        console.log('User does not have the specific variation ID');
        return false;
    }
} else {
    console.log('No data found for this experiment ID');
    return false;
}
  1. Personaliza Experiment_ID Sustituye Experiment_ID en el código por el ID del experimento principal.
  2. Personaliza targetVariationId Vincula targetVariationId en el código al ID de la variante del experimento principal.
  3. Ajusta la distribución del tráfico Para todos los experimentos excepto el experimento principal, establece la distribución del tráfico en el 100 % de la variante.

Opción 2: Crear un experimento y usar JavaScript (avanzado)​

Es posible crear un experimento multipágina sin crear varios experimentos. Sin embargo, esto requiere conocimientos avanzados de JavaScript, ya que la lógica para mostrar las variantes se controla mediante tu código. A continuación encontrarás una guía paso a paso:

Cómo crear un experimento multipágina con un solo experimento

  1. Crea un nuevo experimento
    1. añade tu JavaScript a la variante, que se ejecuta dependiendo de la página llamada.

Ejemplo:

if (window.location.href.includes('/produktseite')) {
    // Änderungen für die Produktseite
    document.querySelector('.produkt-titel').innerText = 'Neue Variante';
} else if (window.location.href.includes('/checkout')) {
    // Änderungen für die Checkout-Seite
    document.querySelector('.checkout-banner').style.display = 'none';
}
  1. Guarda la variante
    1. para la segmentación por página, añade todas las páginas/tipos de página al experimento en las que se debe mostrar la variante
En esta página