Shopify - Testare i prezzi con Varify.io

Ultimo aggiornamento il 22 apr 20265 min di lettura

Indice

• In breve
• Perché testare i prezzi su Shopify?
• Fase 1: Crea filtri e modifica i prezzi
• Fase 2: Identifica i selettori CSS rilevanti
• Passo 3: Personalizza il codice per l'esperimento
• Passo 4: Salva il nuovo esperimento

In breve

Per scoprire a quale prezzo i tuoi prodotti raggiungono il miglior margine di contribuzione, puoi eseguire test di prezzo. Per il prodotto corrispondente da testare viene aggiunto un filtro di variante supplementare. Usi questo filtro per impostare il prezzo alternativo.

L'esperimento è invisibile all'utente, poiché il filtro prezzo non è visibile all'utente. Un codice JavaScript nell'A/B test garantisce quindi che venga mostrato il prezzo originale o il prezzo da testare nella pagina di dettaglio del prodotto (PDP), a seconda della variante.

Per garantire che il nuovo prezzo venga mostrato anche nelle pagine di categoria (pagine di collezione) e che il filtro prezzo non sia visibile, inserisci gli URL dei prodotti da testare nel codice JavaScript fornito.

Perché testare i prezzi su Shopify?

I test sui prezzi su Shopify ti aiutano a scoprire quale prezzo funziona meglio per un prodotto, ovvero quale prezzo porta a più vendite o a un fatturato più alto. Gli A/B test mirati ti permettono di testare contemporaneamente diverse varianti di prezzo senza compromettere l'esperienza di acquisto. Questo ti consente di prendere decisioni basate sui dati e di ottimizzare il tuo store per ottenere maggiore successo.

Fase 1: Crea filtri e modifica i prezzi

1. Apri il prodotto nel backend di Shopify per cui vuoi testare il prezzo.
2. Crea una nuova variante con il "Nome opzione" "varify-pricing-test".
3. Crea due "Valori opzione" per questa: "Control" e "Variation".

1. Se il prodotto ha altre varianti, come un filtro colore, trascina il filtro varianti in cima in modo che sia posizionato sopra gli altri filtri. Questo è importante affinché il test funzioni correttamente.

1. Imposta il nuovo prezzo da testare per ogni variante di prodotto nella variante di prezzo "varify-pricing-test".

• Suggerimento: attiva "Group by varify-pricing-test" per gestire meglio le varianti.
• Se hai varianti o colori diversi, dovresti adeguare anche qui il prezzo della variante
• Ricorda anche di adeguare la quantità disponibile in modo che il prodotto sia disponibile nello store.
  Ad esempio, se hai 1.000 unità del prodotto in magazzino, puoi impostare 500 unità per il prezzo originale e 500 unità per il nuovo prezzo della variante.

Fase 2: Identifica i selettori CSS rilevanti

Ora trova i selettori CSS per gli elementi:

• Filtro prezzo
• Scheda prodotto nella pagina Collection
• Prezzo nella pagina Collection.

Filtro prezzo

• Apri una pagina di dettaglio prodotto (PDP) su cui hai configurato il filtro prezzo e su cui deve essere eseguito l'esperimento
• Apri gli strumenti per sviluppatori (F12 o tasto destro > "Ispeziona").
• Utilizza lo strumento di ispezione per selezionare l'elemento filtro varify-pricing-test appena creato in modo che sia completamente evidenziato - questo ti garantirà di aver identificato il selettore corretto.
  • In questo esempio, viene selezionato il primo elemento <div> all'interno dell'elemento <variant-selects>. In base al template, la struttura e i tag e le classi HTML potrebbero avere nomi diversi.

• Fai clic con il tasto destro sulla posizione evidenziata nel codice e poi seleziona: Copy → Copy selector
  Questo copia il selettore CSS esatto per il filtro prezzo.

• È meglio salvare il selettore copiato in un documento o in una nota: ti servirà di nuovo a breve.

Scheda prodotto nella pagina Collection

• Apri una pagina collection.
• Esamina la pagina (F12 o tasto destro > "Esamina") e seleziona un elemento della scheda prodotto.
• Trova l'elemento padre della scheda - di solito l'elemento esterno della scheda prodotto è un elemento di lista.
  • Copia di nuovo la classe usando "Copy selector" e salvala nello stesso documento in cui hai salvato il selettore per il filtro prezzo

Prezzo nella pagina Collection

• Apri di nuovo il tile del prodotto nella pagina della collezione negli strumenti per sviluppatori.
• Vai più a fondo nella struttura della mappa e cerca l'elemento "Price"
• Assicurati di selezionare davvero l'elemento che deve cambiare durante il test, ovvero il testo specifico o il blocco HTML che mostra il prezzo.

• In questo caso, la classe dell'elemento prezzo price__regular. Potrebbe essere diversa per il tuo sito.
• Copia questo nome di classe usando "Copy selector" e salvalo insieme agli altri due nomi di classe determinati finora

Passo 3: Personalizza il codice per l'esperimento

Crea un nuovo esperimento tramite la Varify Dashboard. Per farlo, inserisci la pagina iniziale dello store nel campo di input e clicca su "Create new Experiment". Di seguito trovi il codice JavaScript per il test del prezzo. Aggiungilo alla variante del tuo esperimento usando la funzione "Add JS".

Per garantire che il test sul prezzo funzioni anche a livello tecnico nel tuo negozio, è necessario apportare alcune modifiche al codice JavaScript fornito. Modifica il JavaScript nella tua variante come segue:

Riga 1: Incolla il selettore CSS copiato per il filtro del prezzo tra le virgolette.

Riga 2: Inserisci la classe del prezzo, ossia l'elemento che dovrà cambiare in seguito.

Riga 3: Specifica la classe della product tile in modo che il codice sappia dove si trova il prezzo nella pagina della collezione.

Dalla riga 7: Aggiungi qui tutti gli URL dei prodotti su cui deve essere eseguito il test sul prezzo. (Se stai eseguendo un test sul prezzo per un solo prodotto, devi aggiungere solo un URL qui e puoi eliminare gli altri URL). Assicurati di mantenere il formato corrispondente degli URL ('URL'). Aggiungi una virgola dopo ogni 'URL' se seguono altri URL.

💡 Nota: il prezzo nelle pagine di collezione viene completamente sostituito dal codice. Se al prezzo sono associati simboli di valuta aggiuntivi o parole come "ab", puoi modificarli direttamente nel codice (riga 81)

Senza testo aggiuntivo:
es. nuovo prezzo -> 25,99

priceElement.textContent = `${newPrice}`;

Con testo aggiuntivo:
es. nuovo prezzo -> A partire da 25,99 EUR

priceElement.textContent = `From ${newPrice} EUR`;

Codice JavaScript per il test del prezzo

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

Passo 4: Salva il nuovo esperimento

1. Salva l'esperimento e assegnagli un nome
2. Duplica la variante creata nel nuovo esperimento e rinominala in "New Original".
3. Clicca su "Edit" per modificare "New Original".
4. Apri la finestra JavaScript e cambia la variabile alla riga 4 da 'Variation' a 'Controll'
5. Salva le modifiche.
6. Imposta la suddivisione del test al 50:50 tra "Variation 1" e "New Control". "Original" ottiene 0 %.
7. Personalizza il targeting della pagina e impostalo su "Contains" con l'URL del tuo negozio.
8. Avvia l'esperimento.

Attenzione: Varify non si assume alcuna responsabilità per la funzionalità del codice e delle informazioni.
È responsabilità dell'utente testare a fondo il codice e implementarlo correttamente.