Shopify - Varify.io ile Fiyat Testi

Son güncelleme: 22 Nis 20264 dk okuma süresi

İçindekiler

• Kısaca
• Neden Shopify fiyatlarını test etmelisin?
• Adım 1: Filtreleri oluşturun ve fiyatları düzenleyin
• Adım 2: İlgili CSS seçicilerini belirle
• Adım 3: Deney için kodu özelleştir
• Adım 4: Yeni deneyi kaydet

Kısaca

Ürünlerinizin hangi fiyatta en iyi katkı marjına ulaştığını öğrenmek için fiyat testleri yürütebilirsiniz. Test edilecek ilgili ürün için ek bir varyant filtresi eklenir. Alternatif fiyatı ayarlamak için bu filtreyi kullanırsınız.

Deney kullanıcı için görünmezdir, çünkü fiyat filtresi kullanıcıya gösterilmez. A/B testindeki bir JavaScript kodu, ardından varyanta bağlı olarak ürün detay sayfasında (PDP) orijinal fiyatın veya test edilecek fiyatın gösterilmesini sağlar.

Yeni fiyatın kategori sayfalarında (koleksiyon sayfaları) da gösterilmesini ve fiyat filtresinin görünmemesini sağlamak için, test edilecek ürünlerin URL'lerini sağlanan JavaScript koduna girin.

Neden Shopify fiyatlarını test etmelisin?

Shopify'da fiyat testleri, bir ürün için hangi fiyatın en iyi sonucu verdiğini - yani hangi fiyatın daha fazla satışa veya daha yüksek ciroya yol açtığını - bulmana yardımcı olur. Hedefe yönelik A/B testleri, alışveriş deneyimini bozmadan farklı fiyat varyantlarını aynı anda test etmene olanak tanır. Bu sayede veriye dayalı kararlar alabilir ve mağazanı daha fazla başarı için optimize edebilirsin.

Adım 1: Filtreleri oluşturun ve fiyatları düzenleyin

1. Fiyatını test etmek istediğiniz ürünü Shopify yönetim panelinde açın.
2. "Option name" olarak "varify-pricing-test" ile yeni bir varyant oluşturun.
3. Bunun için iki "Option values" oluşturun: "Control" ve "Variation".

1. Ürünün renk filtresi gibi başka varyantları varsa, varyant filtresini sürükleyip diğer filtrelerin üstüne gelecek şekilde en üste taşıyın. Bu, testin doğru çalışması için önemlidir.

1. "varify-pricing-test" fiyat varyasyonunda her ürün varyantı için test edilecek yeni fiyatı belirle.

• İpucu: Varyantları daha iyi yönetmek için "Group by varify-pricing-test" özelliğini etkinleştir.
• Farklı varyantların veya renklerin varsa, varyant fiyatını da burada ayarlamalısın
• Ürünün mağazada mevcut olması için mevcut miktarı da ayarlamayı unutma.
  Örneğin, üründen stokta 1.000 adet varsa, orijinal fiyat için 500 adet ve yeni varyant fiyatı için 500 adet ayarlayabilirsin.

Adım 2: İlgili CSS seçicilerini belirle

Şimdi şu öğeler için CSS seçicilerini bul:

• Fiyat filtresi
• Collection sayfasındaki ürün kartı
• Collection sayfasındaki fiyat.

Fiyat filtresi

• Fiyat filtresini kurduğunuz ve deneyin yürütüleceği bir ürün detay sayfasını (PDP) açın
• Geliştirici araçlarını açın (F12 veya sağ tıklayıp "Incele"ye tıklayın).
• Yeni oluşturulan varify-pricing-test filtre öğesini, tamamen vurgulanacak şekilde seçmek için inceleme aracını kullanın - bu, doğru seçiciyi belirlediğinizden emin olmanızı sağlar.
  • Bu örnekte, <variant-selects>-öğesi içindeki ilk <div>-öğesi seçilmiştir. Şablona bağlı olarak, yapı ile HTML etiketleri ve sınıfları farklı adlara sahip olabilir.

• Kodda vurgulanan konuma sağ tıklayın ve ardından şunu seçin: Copy → Copy selector
  Bu, fiyat filtresi için tam CSS seçicisini kopyalar.

• Kopyalanan seçiciyi bir belgeye veya nota kaydetmen en iyisidir - buna yakında tekrar ihtiyacın olacak.

Koleksiyon sayfasındaki ürün kartı

• Bir koleksiyon sayfası aç.
• Sayfayı incele (F12 veya sağ tık > "İncele") ve bir ürün kartı öğesi seç.
• Kartın üst (parent) öğesini bul - genellikle ürün kartının dış öğesi bir liste öğesidir.
  • Sınıfı tekrar "Copy selector" kullanarak kopyala ve fiyat filtresi için seçiciyi kaydettiğin aynı belgeye kaydet

Koleksiyon sayfasındaki fiyat

• Koleksiyon sayfasındaki ürün kutucuğunu geliştirici araçlarında yeniden açın.
• Haritanın yapısında daha derine inin ve "Price" öğesini arayın
• Test sırasında değişecek olan öğeyi gerçekten seçtiğinizden emin olun - yani fiyatı gösteren belirli metin veya HTML bloğunu.

• Bu durumda, fiyat elementinin sınıfı price__regular. Sizin sitenizde farklı olabilir.
• Bu sınıf adını "Copy selector" kullanarak kopyala ve şimdiye kadar belirlenen diğer iki sınıf adıyla birlikte kaydet

Adım 3: Deney için kodu özelleştir

Varify Dashboard üzerinden yeni bir deney oluşturun. Bunu yapmak için giriş alanına mağazanın başlangıç sayfasını girin ve "Create new Experiment" üzerine tıklayın. Aşağıda fiyat testi için JavaScript kodunu bulacaksınız. Bunu "Add JS" işlevini kullanarak deneyinizin varyantına ekleyin.

Fiyat testinin mağazanızda teknik olarak da çalışmasını sağlamak için, sağlanan JavaScript kodunda birkaç ayarlama yapılması gerekir. Varyantınızdaki JavaScript'i aşağıdaki gibi değiştirin:

1. satır: Fiyat filtresi için kopyaladığınız CSS seçicisini tırnak işaretlerinin arasına yapıştırın.

2. satır: Fiyatın sınıfını girin - yani daha sonra değişecek olan öğeyi.

3. satır: Ürün kutusunun sınıfını belirtin, böylece kod koleksiyon sayfasında fiyatın nerede olduğunu bilir.

4. satırdan itibaren: Fiyat testinin uygulanacağı tüm ürün URL'lerini buraya ekleyin. (Yalnızca tek bir ürün için fiyat testi yapıyorsanız, buraya yalnızca bir URL eklemeniz yeterlidir ve diğer URL'leri silebilirsiniz). URL'lerin ilgili formatını ('URL') koruduğunuzdan emin olun. Devamında başka URL'ler geliyorsa, her 'URL'den sonra virgül ekleyin.

💡 Not: Koleksiyon sayfalarındaki fiyat tamamen kod tarafından değiştirilir. Fiyata "ab" gibi ek para birimi sembolleri veya kelimeler ekleniyorsa, bunları doğrudan kod içinde (satır 81) düzenleyebilirsin

Ek metin olmadan:
örn. yeni fiyat -> 25,99

priceElement.textContent = `${newPrice}`;

Ek metinle:
örn. yeni fiyat -> 25,99 EUR'dan itibaren

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

Fiyat testi için JavaScript kodu

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

Adım 4: Yeni deneyi kaydet

1. Deneyi kaydedin ve bir isim verin
2. Yeni oluşturulan deneyde oluşturulan varyantı çoğaltın ve adını "New Original" olarak değiştirin.
3. "New Original"ı düzenlemek için "Edit"e tıklayın.
4. JavaScript penceresini açın ve 4. satırdaki değişkeni 'Variation'dan 'Controll' olarak değiştirin
5. Değişiklikleri kaydedin.
6. Test için bölünmeyi "Variation 1" ve "New Control" arasında 50:50 olarak ayarlayın. "Original" %0 alır.
7. Sayfa hedeflemesini özelleştirin ve mağaza URL'niz ile "Contains" olarak ayarlayın.
8. Deneyi başlatın.

Not: Varify, kodun ve bilgilerin işlevselliği konusunda herhangi bir sorumluluk kabul etmez.
Kodu iyice test etmek ve doğru şekilde uygulamak kullanıcının sorumluluğundadır.