Parole chiave popolari
Categorie
Totale Risultati
Nessun record trovato
Shopify - Testate i prezzi con Varify.io
Indice dei contenuti
Breve e dolce
Per scoprire a quale prezzo i vostri prodotti ottengono il miglior margine di contribuzione, potete effettuare dei test di prezzo. A tal fine, viene aggiunto un filtro variante supplementare per il prodotto corrispondente da testare. Con questo filtro si imposta il prezzo alternativo.
L'esperimento è invisibile all'utente, poiché il filtro del prezzo non è visibile all'utente. Un codice JavaScript nel test A/B assicura che nella pagina di dettaglio del prodotto (PDP) venga visualizzato il prezzo originale o quello da testare, a seconda della variante.Â
Per assicurarsi che il nuovo prezzo venga visualizzato anche nelle pagine delle categorie (pagine delle collezioni) e che il filtro prezzo non sia visibile, inserire gli URL dei prodotti da testare nel codice JavaScript fornito.
Perché testare i prezzi di Shopify?
I test sui prezzi su Shopify vi aiutano a scoprire quale prezzo funziona meglio per un prodotto, ovvero quale prezzo porta a più vendite o a un fatturato più elevato. I test A/B mirati consentono di testare contemporaneamente diverse varianti di prezzo senza interrompere l'esperienza di acquisto. Questo vi permette di prendere decisioni basate sui dati e di ottimizzare il vostro negozio per ottenere un maggiore successo.
Fase 1: Creare filtri e regolare i prezzi
- Aprite il prodotto nel backend di Shopify per il quale volete testare il prezzo.
- Creare una nuova variante con il "Nome opzione" "varify-pricing-test".
- Creare due "valori di opzione" per questo: "Controllo" e "Variazione".
- Se il prodotto ha altre varianti, ad esempio un filtro colore, trascinare il filtro variante in alto in modo che sia posizionato sopra gli altri filtri. Questo è importante perché il test funzioni correttamente.
Impostare il nuovo prezzo da testare per ogni variante di prodotto nella variante di prezzo "varify-pricing-test".
Suggerimento: Attivare "Raggruppa per varifichi-prezzo-test" per gestire meglio le varianti.
Se avete diverse varianti o colori, dovrete adattare anche il prezzo della variante.
Ricordate anche di regolare la quantità disponibile in modo che il prodotto sia disponibile nel negozio.
Ad esempio, se avete 1.000 unità del prodotto in magazzino, potete impostare 500 unità per il prezzo originale e 500 unità per il prezzo della nuova variante.
Passo 2: identificare i selettori CSS rilevanti
Ora trovate i selettori CSS per gli elementi:Â
- Filtro prezzo
- Scheda prodotto nella pagina della collezione
- Prezzo alla pagina della collezione.
Filtro prezzo
Aprire una pagina di dettaglio del prodotto (PDP) su cui è stato impostato il filtro prezzo e su cui si vuole effettuare l'esperimento
Aprire gli strumenti di sviluppo (F12 o clic destro > "Ispezione").
Utilizzare lo strumento di ispezione per selezionare l'elemento filtrante varify-pricing-test appena creato, in modo che sia completamente evidenziato: questo assicura che sia stato identificato il selettore corretto.
In questo esempio, il primo <div>-elemento nel <variant-selects>-è selezionato. A seconda del modello, la struttura e i tag e le classi HTML possono avere nomi diversi.
- Fare clic con il tasto destro del mouse sulla posizione evidenziata nel codice e selezionare : Copia → Selettore di copia
Copia l'esatto selettore CSS per il filtro del prezzo.
È preferibile salvare il selettore copiato in un documento o in una nota: ne avrete presto bisogno.
Scheda prodotto nella pagina della collezione
Aprire una pagina di raccolta.
Esaminare la pagina (F12 o clic destro > "Esaminare") e selezionare un elemento della scheda prodotto.
Trovare l'elemento genitore della scheda: di solito l'elemento esterno della scheda prodotto è un elemento elenco.
Copiare di nuovo la classe con "Copia selettore" e salvarla nello stesso documento in cui è stato salvato il selettore per il filtro dei prezzi.
Prezzo alla pagina della collezione
Aprire nuovamente il riquadro del prodotto nella pagina della raccolta negli strumenti per gli sviluppatori.
Approfondite la struttura della mappa e cercate l'elemento "Prezzo".
Assicuratevi di selezionare davvero l'elemento che deve cambiare durante il test, cioè il testo specifico o il blocco HTML che mostra il prezzo.
In questo caso, la classe dell'elemento prezzo prezzo__regolare. Per il vostro lato può essere chiamato in modo diverso.
Copiate il nome di questa classe con "Copia selettore" e salvatelo con gli altri due nomi di classe determinati finora
Passo 3: personalizzare il codice per l'esperimento
Creare un nuovo esperimento tramite la dashboard di Varify. A tale scopo, inserire la pagina iniziale del negozio nel campo di input e fare clic su "Crea nuovo esperimento". Di seguito è riportato il codice JavaScript per il test del prezzo. Aggiungerlo alla variante dell'esperimento utilizzando la funzione "Aggiungi JS".Â
Per garantire che il test del prezzo funzioni tecnicamente anche nel vostro negozio, è necessario apportare alcune modifiche al codice JavaScript fornito. Modificate il codice JavaScript nella vostra variante come segue:
Riga 1: incollare il selettore CSS copiato per il filtro prezzo tra le virgolette.
Riga 2: inserire la classe del prezzo, ovvero l'elemento da modificare successivamente.
Riga 3: specificare la classe della piastrella prodotto, in modo che il codice sappia dove si trova il prezzo nella pagina della collezione.
Dalla riga 7: aggiungere qui tutti gli URL dei prodotti sui quali si vuole effettuare il test dei prezzi. (Se si esegue un test dei prezzi per un solo prodotto, è sufficiente aggiungere qui un solo URL e si possono eliminare gli altri URL). Assicuratevi di mantenere il formato corrispondente degli URL ('URL'). Aggiungete una virgola dopo ogni "URL" se seguono altri URL.
💡 Nota: il prezzo nelle pagine delle collezioni è completamente sostituito dal codice. Se al prezzo sono associati altri simboli di valuta o parole come "ab", è possibile modificarli direttamente nel codice (riga 81).
Senza testo aggiuntivo:
es. nuovo prezzo -> 25,99
priceElement.textContent = `${newPrice}`;
Con testo aggiuntivo:
es. nuovo prezzo -> 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: salvare il nuovo esperimento
Salvate l'esperimento e dategli un nome
Duplicare la variante creata nell'esperimento appena creato e rinominarla "Nuovo originale".
Fare clic su "Modifica" per modificare il "Nuovo originale".
Aprite la finestra JavaScript e cambiate la variabile nella riga 4 da "Variation" a "Controll".
Salvare le modifiche.
Impostare la suddivisione per il test a 50:50 tra "Variante 1" e "Nuovo controllo". "Originale" riceve 0 %.
Personalizzate il targeting della pagina e impostatelo su "Contiene" con l'URL del vostro negozio.
Avviare l'esperimento.
Primi passi
Tracciamento e valutazione
- Tracciamento con Varify.io
- Valutazione GA4 in Varify.io
- Segmentare e filtrare i report
- Valutazione basata sul pubblico in GA4
- Valutazione basata sui segmenti in GA 4
- Matomo - Analisi dei risultati
- Valutazione di etracker
- Calcolo della significativitÃ
- Eventi click personalizzati
- Valutare eventi personalizzati in rapporti esplorativi
- GA4 - Tracciamento cross-domain
- Tracciamento con Varify.io
- Valutazione GA4 in Varify.io
- Segmentare e filtrare i report
- Valutazione basata sul pubblico in GA4
- Valutazione basata sui segmenti in GA 4
- Matomo - Analisi dei risultati
- Valutazione di etracker
- Calcolo della significativitÃ
- Eventi click personalizzati
- Valutare eventi personalizzati in rapporti esplorativi
- GA4 - Tracciamento cross-domain
Targeting
Integrazioni di analisi web
Ulteriori integrazioni
Creare un esperimento
Funzioni esperte
Editor visivo
- Booster della campagna: Freccia su
- Booster della campagna: strato di intenti di uscita
- Booster della campagna: Barra delle informazioni
- Booster della campagna: Notifica
- Booster della campagna: Barretta USP
- Aggiungi destinazione del collegamento
- Modalità di navigazione
- Selettore personalizzato Picker
- Modifica del contenuto
- Modifica del testo
- Spostare gli elementi
- Nascondere l'elemento
- Inserimento di parole chiave
- Test di reindirizzamento e split URL
- Rimuovere l'elemento
- Sostituire l'immagine
- Commutatore di dispositivi reattivo
- Modifiche allo stile e al layout
- Booster della campagna: Freccia su
- Booster della campagna: strato di intenti di uscita
- Booster della campagna: Barra delle informazioni
- Booster della campagna: Notifica
- Booster della campagna: Barretta USP
- Aggiungi destinazione del collegamento
- Modalità di navigazione
- Selettore personalizzato Picker
- Modifica del contenuto
- Modifica del testo
- Spostare gli elementi
- Nascondere l'elemento
- Inserimento di parole chiave
- Test di reindirizzamento e split URL
- Rimuovere l'elemento
- Sostituire l'immagine
- Commutatore di dispositivi reattivo
- Modifiche allo stile e al layout