Ejecutar un test A/B en una tienda Shopify

• Prueba con intercambio de contenido: cada variante de su experimento reside en una plantilla de Shopify distinta, a la que se puede acceder mediante una URL de página específica (por ejemplo, www.mystore.com/products/products/produc-name?view=version-b). La herramienta de tests A/B permite intercambiar su contenido por el de la variante (por ejemplo, páginas B, C, etc.).
• Utilizar un editor visual: cree variantes directamente en su página de producto con nuestro editor gráfico, o personalícelas inyectando JS/CSS.
• Aprovechar Liquid de Shopify y un SDK JS: añada lógica en su plantilla Liquid para activar o desactivar variantes específicas para un subconjunto de usuarios.

• Si va a ejecutar experimentos web, le recomendamos utilizar nuestra aplicación Shopify x Kameleoon, que simplifica la configuración. Asegúrese de consultar nuestra documentación para conocer las instrucciones paso a paso.
• Si va a ejecutar feature flags o feature experiments, siga las pautas que se indican en nuestra documentación de feature experimentation.

​

Tests de intercambio de contenido

• https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi
• https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi?view=version-b

• product-template: contiene el código fuente de la página de producto.
• product-recommendations: contiene el código del bloque de recomendaciones «You may also like».

1. Haga clic en Add a new template en su editor de temas de Shopify.
2. Elija el tipo de plantilla Product y póngale un nombre (hemos utilizado version-b, pero puede usar cualquier nombre).

3. Haga clic en Add a new section; nómbrela product-template-version-b y copie y pegue el código de su archivo original product-template.liquid en esta nueva sección.

4. Elimine el código del botón Add to cart de la sección product-template-version-b.liquid.

5. Llame a su sección modificada (product-template-version-b) desde la plantilla de producto alternativa que ha creado (product.version-b.liquid).

1. Vaya a la aplicación Kameleoon.
2. Haga clic en New experiment > With the code editor.
3. Introduzca la información requerida y haga clic en Create.

4. Haga clic en el chevrón situado junto a Add variation > Add code variation.

5. Añada el siguiente código, adaptando las variables VIEW y SELECTOR a su caso de uso.

var VIEW = 'version-b';        // Alternate template handle, e.g. 'version-b'
var SELECTOR = '#MainContent'; // Main container selector

Kameleoon.API.Core.runWhenElementPresent(
  SELECTOR,
  function () {
    fetch(window.location.pathname + '?view=' + encodeURIComponent(VIEW), {
      credentials: 'same-origin'
    })
      .then(function (r) { return r.text(); })
      .then(function (html) {
        var doc = new DOMParser().parseFromString(html, 'text/html');
        var newContent = doc.querySelector(SELECTOR) || doc.body;

		var main = document.querySelector(SELECTOR);
        main.replaceWith(newContent);
      })
      .catch(function (err) {
        console.error('[Kameleoon] Swap failed:', err);
      });
  }
);

• Targeting: defina quién debe ver el experimento (todos los usuarios, segmentos de usuarios específicos).
• Traffic allocation: elija cómo dividir a los visitantes entre la original y la variación B.
• Goals: establezca cómo medirá el éxito (clic, conversiones, pedidos).

• Incluir las URL que contengan /products/.
• Excluir las URL con el parámetro view=version-b para evitar un bucle de redirección infinito.

​

Crear variantes con un editor gráfico o de código

1. Abra la aplicación Kameleoon.
2. Haga clic en New experiment > With the graphic editor.
3. Introduzca la información requerida y haga clic en Create.

4. Seleccione el botón Add to Cart.
5. Para ocultar el botón:
   • Haga clic en el menú de tres puntos de la barra lateral izquierda > Hide;
   • O bien, haga clic en el icono Hide de la barra de herramientas que aparece debajo del elemento seleccionado.

• Asigne el 50 % del tráfico.
• Segmente todas las páginas con URL que contengan /products/.
• Establezca Shopify Orders como su KPI principal.

​

Utilizar el SDK JS en Liquid para activar features

1. Vaya a la aplicación Kameleoon.
2. Acceda al menú Feature flags.
3. Haga clic en New feature flag y siga los pasos de esta guía.

• Si el visitante está en la variación B, ocultaremos el CTA.
• Si el visitante está en la variación A (el control), mostraremos el CTA.

• Garantiza que el SDK JS de Kameleoon esté cargado e inicializado.
• Comprueba si el feature flag está activo y en qué variación se ha asignado al visitante.
• Aplica la lógica para ocultar o mostrar el CTA en consecuencia.

1. En su administrador de Shopify, vaya a Online Store > Themes > Actions > Edit Code.
2. Abra el archivo product-template.liquid (o equivalente).
3. Inserte la lógica del feature flag de Kameleoon.

4. Haga clic en Save para aplicar los cambios a su tema.