Shopify - Varify.io ile kargo ücreti testi yapma
Kısaca
Ürünlerinizin hangi kargo ücretinde en yüksek dönüşümü veya en iyi katkı marjını elde ettiğini öğrenmek için Shopify'da kargo ücreti testleri yapabilirsiniz. Bunu yapmak için test edilecek ürünlere ek bir varyant filtresi ekleyin. Test edilecek kargo ücretlerine sahip yeni bir kargo profilini ilgili varyantlara atayın.
Varyant filtresi mağazada gösterilmediğinden deney kullanıcılar için görünmez kalır. A/B testindeki bir JavaScript kodu, varyanta bağlı olarak ürün detay sayfasında (PDP) ya orijinal kargo ücretlerinin ya da test kargo ücretlerinin gösterilmesini sağlar.
Kategori sayfalarında (koleksiyon sayfaları) da doğru kargo ücretlerinin gösterilmesini ve varyant filtresinin gizli kalmasını sağlamak için, test edilecek ürünlerin URL'lerini sağlanan JavaScript kodunda saklayın.
Neden Shopify'da kargo ücreti testi yapmalısınız?
Shopify'daki kargo ücreti testleri, hangi kargo ücreti seviyesinin en iyi sonucu verdiğini - yani hangi varyantın daha fazla satışa veya daha yüksek cirоya yol açtığını - bulmanıza yardımcı olur. Hedeflenmiş A/B testleri, alışveriş deneyimini etkilemeden aynı anda farklı kargo ücretlerini test etmenizi sağlar. Bu sayede veriye dayalı kararlar alabilir ve mağazanızı daha fazla başarı için optimize edebilirsiniz.
Adım 1: Yeni ürün varyantları oluşturun
- Kargo ücretlerini test etmek istediğiniz ürünü Shopify arka planında açın.
- "Option name" "varify-pricing-test" olan yeni bir varyant oluşturun.
- Bunun için iki "Option values" oluşturun: "Control" ve "Variation".
- Ürünün renk filtresi gibi başka varyantları varsa, varyant filtresini sürükleyip diğer filtrelerin üzerinde konumlanacak şekilde en üste taşıyın. Bu, testin doğru çalışması için önemlidir.
- "varify-pricing-test" fiyat varyantında her ürün varyantı için test edilecek yeni fiyatı ayarlayın.
- İpucu: Varyantları daha iyi yönetmek için "Group by varify-pricing-test" seçeneğini etkinleştirin.
- Farklı varyantlarınız veya renkleriniz varsa, varyant fiyatını da burada ayarlamalısınız
- Ürünün mağazada mevcut olması için mevcut miktarı da ayarlamayı unutmayın.
Örneğin, ürünün stokta 1.000 adedi varsa, orijinal fiyat için 500 adet ve yeni varyant fiyatı için 500 adet ayarlayabilirsiniz.
Adım 2: Yeni bir kargo profili oluşturun
Ardından, ürün varyantı için test edilecek kargo ücreti miktarını tanımladığımız yeni bir kargo ücreti profili oluşturuyoruz.
- "Settings/Shipping and delivery" bölümüne gidin
- "Create a custom profile" üzerine tıklayın
- Profile bir isim verin, örneğin "Shipping cost experiment"
- Test edilecek kargo ücretlerini alacak ürün varyantlarını ekleyin
- Profile bir isim verin, örneğin "Shipping cost experiment"
- Test edilecek kargo ücretlerini alacak ürün varyantlarını ekleyin
- Şimdi "Add shipping zone" üzerine tıklayın ve varyantların gönderileceği ülkeleri/bölgeleri tanımlayın. Burada genel olarak gönderim yaptığınız aynı bölgeleri seçmelisiniz
- "Add rate" üzerine tıklayın ve test edilecek kargo ücretlerini tanımlayın
Adım 3: Ürün detay sayfasında (PDP) varyant filtresini yapılandırın
Varyantları Gizle filtresi
- Kargo ücreti testi için varyantları kurduğunuz ve deneyin gerçekleştirileceği bir ürün detay sayfasını (PDP) açın
- Geliştirici araçlarını açın (F12 veya sağ tıklayıp "Inspect" seçin).
- Yeni oluşturulan varify-pricing-test filtre elementini 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>-elementi içindeki ilk <div>-elementi seçilmiştir. Şablona bağlı olarak, yapı ile HTML etiketleri ve sınıfları farklı isimlere sahip olabilir.
- Kodda vurgulanan konumda 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 kaydetmeniz en iyisidir - birazdan tekrar ihtiyacınız olacak.
Adım 3: Deney için kodu özelleştirin
Varify Dashboard üzerinden yeni bir deney oluşturun. Bunu yapmak için giriş alanına mağaza ana 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.
Kargo ücreti deneyinin mağazanızda teknik olarak da çalışmasını sağlamak için, sağlanan JavaScript kodunda birkaç ayarlama yapılması gerekir. JavaScript'i varyantınızda aşağıdaki gibi değiştirin:
Satır 1: Fiyat filtresi için kopyaladığınız CSS seçiciyi tırnak işaretlerinin içine yapıştırın.
Satır 2: Fiyatın sınıfını girin - yani daha sonra değişecek olan elementi.
Satır 3: Kodun koleksiyon sayfasında fiyatın nerede olduğunu bilmesi için ürün kutucuğunun sınıfını belirtin.
- satırdan itibaren: Kargo ücreti deneyinin gerçekleştirileceği tüm ürün URL'lerini buraya ekleyin. (Deneyi yalnızca bir ürün için çalıştırıyorsanız, buraya yalnızca bir URL eklemeniz yeterlidir ve diğer URL'leri silebilirsiniz). URL'lerin uygun formatını ('URL') koruduğunuzdan emin olun. Sonrasında başka URL'ler varsa her 'URL'den sonra bir virgül ekleyin.
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 kaydedin
- Deneyi kaydedin ve bir isim verin
- Yeni oluşturulan deneydeki oluşturulan varyantı çoğaltın ve adını "New Original" olarak değiştirin.
- "New Original"ı düzenlemek için "Edit" üzerine tıklayın.
- JavaScript penceresini açın ve 4. satırdaki değişkeni 'Variation'dan 'Controll' olarak değiştirin
- Değişiklikleri kaydedin.
- Testin bölünmesini "Variation 1" ve "New Control" arasında 50:50 olarak ayarlayın. "Original" %0 alır.
- Sayfa hedeflemesini özelleştirin ve mağaza URL'niz ile "Contains" olarak ayarlayın.
- Deneyi başlatın.
