• Shopify - Realizar prueba de gastos de envío con Varify.io

    Índice

    Corto y dulce

    Para saber con qué gastos de envío tus productos consiguen la mayor conversión o el mejor margen de contribución, puedes realizar pruebas de gastos de envío en Shopify. Para ello, añade un filtro de variante adicional a los productos que se van a probar. Asigna un nuevo perfil de envío con los gastos de envío a probar a las respectivas variantes.

    El experimento permanece invisible para los usuarios, ya que el filtro de variantes no se muestra en la tienda. Un código JavaScript en la prueba A/B garantiza que se muestren los gastos de envío originales o los gastos de envío de prueba en la página de detalles del producto (PDP), en función de la variante.

    Para asegurarse de que los gastos de envío correctos también se muestran en las páginas de categoría (páginas de colección) y el filtro de variantes permanece oculto, guarde las URL de los productos que se van a probar en el código JavaScript proporcionado.

    ¿Por qué probar los gastos de envío en Shopify?

    Las pruebas de gastos de envío en Shopify te ayudan a averiguar qué nivel de gastos de envío funciona mejor, es decir, qué variante conduce a más ventas o a una mayor facturación. Las pruebas A/B específicas te permiten probar diferentes gastos de envío al mismo tiempo sin comprometer la experiencia de compra. Esto le permite tomar decisiones basadas en datos y optimizar su tienda para lograr un mayor éxito.

    Paso 1: Crear nuevas variantes de productos

    1. Abra el producto en el backend de Shopify para el que desea probar los gastos de envío.
    2. Cree una nueva variante con el "Nombre de la opción" "varify-pricing-test".
    3. Para ello, cree dos "Valores de opción": "Control" y "Variación".

    1. Si el producto tiene otras variantes, como un filtro de color, arrastre y suelte el filtro de variante a la parte superior para que se sitúe por encima de los demás filtros. Esto es importante para que la prueba funcione correctamente.

    1. Establezca el nuevo precio que se probará para cada variante de producto en la variante de precio "varify-pricing-test".

      • Sugerencia: Active "Agrupar por varificar-precio-prueba" para gestionar mejor las variantes.

      • Si tiene diferentes variantes o colores, también debe ajustar aquí el precio de la variante

      • Recuerde también ajustar la cantidad disponible para que el producto esté disponible en la tienda.
        Por ejemplo, si tiene 1.000 unidades del producto en stock, puede establecer 500 unidades para el precio original y 500 unidades para el precio de la nueva variante.

    Paso 2: Crear un nuevo perfil de envío

    A continuación, creamos un nuevo perfil de gastos de envío en el que definimos el importe de los gastos de envío que se van a probar para la variante del producto.

    • Vaya a "Ajustes/Envío y entrega".
    • Haga clic en "Crear un perfil personalizado".

    • Dé un nombre al perfil, por ejemplo "Experimento de gastos de envío".
    • Añada las variantes de producto que deben recibir los gastos de envío que se van a comprobar

    • Dé un nombre al perfil, por ejemplo "Experimento de gastos de envío".
    • Añada las variantes de producto que deben recibir los gastos de envío que se van a comprobar
    • Ahora haga clic en "Añadir zona de envío" y defina los países/zonas a los que deben enviarse las variantes. Aquí debe seleccionar las mismas zonas a las que generalmente realiza envíos
    • Haga clic en "Añadir tarifa" y defina los gastos de envío que desea comprobar

    Paso 3: Configurar el filtro de variantes en la página de detalles del producto (PDP)

    Variantes Ocultar filtro

    • Abra una página de detalles del producto (PDP) en la que haya configurado las variantes para la prueba de gastos de envío y se vaya a realizar el experimento

    • Abra las herramientas de desarrollo (F12 o botón derecho del ratón > "Inspeccionar").

    • Utilice la herramienta de inspección para seleccionar el elemento de filtro de prueba de tarificación variable recién creado, de modo que quede completamente resaltado, lo que le garantizará que ha identificado el selector correcto.

      • En este ejemplo, el primer <div>-en el <variant-selects>-elemento. Dependiendo de la plantilla, la estructura y las etiquetas y clases HTML pueden tener nombres diferentes.

    • Haga clic con el botón derecho del ratón en la posición resaltada del código y seleccione : Copiar → Selector de copia
      Esto copia el selector CSS exacto para el filtro de precios.

    • Lo mejor es guardar el selector copiado en un documento o una nota, ya que pronto volverá a necesitarlo.

    Paso 3: Personalizar el código para el experimento

    Cree un nuevo experimento a través del Panel de Control de Varify. Para ello, introduzca la página de inicio de la tienda en el campo de entrada y haga clic en "Crear nuevo experimento". A continuación encontrará el código JavaScript para la prueba de precios. Añádalo a la variante de su experimento utilizando la función "Añadir JS". 

    Para que el experimento de los gastos de envío también funcione técnicamente en su tienda, es necesario realizar algunos ajustes en el código JavaScript proporcionado. Cambie el JavaScript en su variante de la siguiente manera:

    Línea 1: Pegue el selector CSS copiado para el filtro de precios entre comillas.

    Línea 2: Introduzca la clase del precio, es decir, el elemento que debe modificarse posteriormente.

    Línea 3: Especifique la clase de la ficha de producto para que el código sepa dónde se encuentra el precio en la página de la colección.

    A partir de la línea 8: Añada aquí todas las URL de los productos sobre los que se va a realizar el experimento de gastos de envío. (Si está realizando el experimento para un solo producto, sólo necesita añadir aquí una URL y puede eliminar las demás). Asegúrese de mantener el formato adecuado de las URL ('URL'). Añada una coma después de cada 'URL' si hay más URLs a continuación.

    Código JavaScript para la prueba de precio

    				
    					const varifyPriceFilterSelector = '#variant-selects-template--25418368778580__main > div:nth-child(1)';
    const priceClass = 'price__regular';
    const cardClass = 'grid__item';
    const desiredVariantOption = 'Variation'; // Variation or Control
    
    // Only URLs – variant IDs no longer required
    const productURLs = [
        'https://demo-shop.com/products/article1',
        'https://demo-shop.com/products/article2',
        'https://demo-shop.com/products/article3'
    ];
    
    const updatedHandles = new Set();
    
    function hidePriceFilterOnMatchingProductPages() {
        const currentURL = window.location.href;
        const matchesProductPage = productURLs.some(url => currentURL.includes(url));
    
        if (matchesProductPage && varifyPriceFilterSelector) {
            const style = document.createElement('style');
            style.textContent = `
          ${varifyPriceFilterSelector} {
            display: none !important;
          }
        `;
            document.head.appendChild(style);
            console.log('Hiding price filter on matching product page:', varifyPriceFilterSelector);
        }
    }
    
    hidePriceFilterOnMatchingProductPages();
    
    function formatPrice(priceInCents) {
        return (priceInCents / 100).toFixed(2);
    }
    
    function extractHandleFromHref(href) {
        const match = href.match(/\/products\/([^/?#]+)/);
        return match ? match[1] : null;
    }
    
    function extractHandlesFromURLs(urls) {
        return urls.map(extractHandleFromHref).filter(Boolean);
    }
    
    function updateProducts(retryCount = 0) {
        const productCards = document.querySelectorAll(`.${cardClass}`);
        const allowedHandles = extractHandlesFromURLs(productURLs);
    
        if (productCards.length === 0 && retryCount < 5) {
            console.warn(`No product cards found – retrying (${retryCount + 1}/5)`);
            setTimeout(() => updateProducts(retryCount + 1), 300);
            return;
        }
    
        allowedHandles.forEach((handle) => {
            if (updatedHandles.has(handle)) return;
    
            fetch(`/products/${handle}.js`)
                .then(response => response.json())
                .then(product => {
                    const targetVariant = product.variants.find(v => v.option1 === desiredVariantOption);
                    if (!targetVariant) {
                        console.warn(`No variant found with option1 === '${desiredVariantOption}' for "${handle}"`);
                        return;
                    }
    
                    let updated = false;
    
                    productCards.forEach(card => {
                        const link = card.querySelector('a[href*="/products/"]');
                        if (!link) return;
    
                        const href = link.getAttribute('href');
                        const linkHandle = extractHandleFromHref(href);
    
                        if (linkHandle === handle) {
                            const priceElement = card.querySelector(`.${priceClass}`);
                            if (priceElement) {
                                const oldPrice = priceElement.textContent.trim();
                                const newPrice = formatPrice(targetVariant.price);
                                priceElement.textContent = `${newPrice}`;
    
                                console.log(`"${product.title}" – Price updated: ${oldPrice} → €${newPrice}`);
                            }
    
                            const imageElement = card.querySelector('.product-card-image img');
                            if (imageElement && targetVariant.featured_image) {
                                imageElement.src = targetVariant.featured_image.src;
                                console.log(`Image updated for "${product.title}".`);
                            }
    
                            // Update link with ?variant=...
                            const url = new URL(link.href, window.location.origin);
                            url.searchParams.set('variant', targetVariant.id);
                            link.href = url.toString();
    
                            updated = true;
                        }
                    });
    
                    if (updated) {
                        updatedHandles.add(handle);
                    }
                })
                .catch(error => {
                    console.error(`Error loading product "${handle}":`, error);
                });
        });
    }
    
    // Optional: Set filter selection on the PDP
    function setPriceFilter() {
        const selectElement = document.querySelector(`${varifyPriceFilterSelector} select`);
        if (selectElement) {
            selectElement.value = desiredVariantOption;
            selectElement.dispatchEvent(new Event('input', { bubbles: true }));
            selectElement.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }
    
    // Initial call after DOM ready
    window.varify.helpers.onDomLoaded(() => {
        setPriceFilter();
        updateProducts();
    });
    
    // Optional: Repeat on DOM changes
    window.varify.helpers.onDomChanged(() => {
        updateProducts();
    });
    				
    			

    Paso 4: Guardar el nuevo experimento

    1. Guarda el experimento y dale un nombre

    2. Duplique la variante creada en el experimento recién creado y cámbiele el nombre a "Nuevo original".

    3. Haga clic en "Editar" para modificar el "Nuevo original".

    4. Abra la ventana de JavaScript y cambie la variable de la línea 4 de "Variación" a "Controll".

    5. Guarda los cambios.

    6. Establezca la división para la prueba en 50:50 entre "Variación 1" y "Nuevo control". "Original" recibe 0 %.

    7. Personalice la orientación de la página y configúrela como "Contiene" con la URL de su tienda.

    8. Comienza el experimento.

  • Primeros pasos