Varify.io ile Shopify temalarını test edin
İçindekiler tablosu
Kısa ve tatlı
Varify.io ile yeni bir Shopify temasını kolayca A/B test etmek için "Shopify Tema Önizlemesi" işlevini kullanın. Yeni bir deneme oluşturun ve sağlanan JavaScript kodunu kullanın. Yeni tema kimliğinizle özelleştirin ve mağazanızı dönüştürmeden önce yeni temayı test edin.
Shopify temalarını neden test etmelisiniz?
Yeni bir Shopify teması, mağaza performansını düşürmediğinden emin olmak için değiştirilmeden önce A/B testine tabi tutulmalıdır. Tasarımdaki değişiklikler müşteri davranışını ve dönüşüm oranı gibi KPI'ları etkileyebilir. A/B testi, yeni temanın daha iyi sonuçlar sağlayıp sağlamadığını görmek için veriye dayalı bir kontrol sağlar.
Adım 1: Varify.io snippet'ini theme.liquid dosyasına ekleyin
💡Not: Temaları test etmek için Varify snippet'ini themes.liquid dosyası aracılığıyla entegre etmenizi öneririz. Adım 1'in yalnızca Varify snippet'i henüz sitenize yüklenmemişse gerçekleştirilmesi gerekir.
Varify.io snippet'ini kontrol panelinden kopyalayın ve mağazanızın theme.liquid dosyasında mümkün olduğunca yukarıya yapıştırın. Bunu yapmak için Shopify arka ucunda "Online Mağaza"-> "Temalar" bölümüne gidin ve "kodu düzenle "ye tıklayın
Adım 2: Test etmek istediğiniz yeni temanın tema kimliğini bulun
Shopify'a test katılımcılarının hangi temayı görmesi gerektiğini söylemek için tema kimliğine ihtiyacımız var. Önizleme bağlantısından tema kimliğinin nasıl bulunacağına ilişkin adım adım kılavuzu burada bulabilirsiniz:
1. şuraya gidin: Satış Kanalları > Online Mağaza > Temalar > Tema Kitaplığı.
2. Test etmek istediğiniz temayı arayın.
3. üç noktaya tıklayın (Eylemler)
4. "Önizleme "ye tıklayın ve bağlantıyı kopyalayın.
Önizleme bağlantınız aşağıdaki gibi görünecektir: https://deinshop.myshopify.com/?preview_theme_id=1234567890
Bağlantının sonundaki sayı (1234567890) ihtiyacınız olan tema kimliğidir.
Şimdi aynısını mevcut temanız için yapın ve tema kimliğini de buraya kopyalayın.
Adım 3: Deney oluşturun
Yeni bir deneme oluşturun. Bunu yapmak için Varify kontrol panelinde düzenleyici URL'si olarak mağazanızın ana sayfasını girmeniz yeterlidir. Ardından "JS Ekle "ye tıklayın ve aşağıdaki JavaScript'i deneye ekleyin.
// Wait until the theme instance is present on the page…
window.varify.helpers.waitFor(
'[data-theme-instance-id="143807480072"]',
(themeElement) => {
// …then run your redirect logic.
(function () {
const url = new URL(window.location.href);
const params = url.searchParams;
const shadow = document.querySelector('div#varify-shadow-root');
// only redirect when the variation-param is missing AND the shadow-root isn't present
if (!params.has('pb') && !shadow) {
params.set('preview_theme_id', '178703466760');
params.set('pb', '0'); // hide the preview bar
// replace so you don’t add a new history entry
window.location.replace(url.toString());
} else {
console.log('Redirect skipped:', {
hasVarifyVariation: params.has('varify-variation-id'),
varifyShadowRootExists: !!shadow
});
}
})();
}
);
Kod parçacığı yeni tema kimlikleriyle özelleştirildikten sonra "Bitti "ye tıklayabilir ve denemeye uygun bir ad verebilirsiniz. Ardından deneydeki "Sayfa Hedefleme "yi açın ve "Eşleşme Türü "nü "Basit Eşleşme "den "İçerir "e değiştirin. Ardından "Sayfa Hedeflemeyi Kaydet "e tıklayın.
Adım 4: Hedefleme ve kalite güvencesi
JavaScript ve CSS'yi uyguladıktan ve denemeyi kaydettikten sonra, mağaza URL'nizi denemenin sayfa hedeflemesine kaydedebilirsiniz. Yönlendirmenin çalışıp çalışmadığını ve tüm ayarların doğru yapılıp yapılmadığını kontrol etmek için "Önizleme" bağlantılarını da kullanabilirsiniz.
Adım 5: Deneyi başlatın
Şimdi "Deneyi Başlat" ile deneyi başlatın. Şu andan itibaren ziyaretçilerinizin 50%'si yeni temaya yönlendirilecek ve 50%'si eski temayı görmeye devam edecektir. Ziyaretçiler deney süresince her zaman aynı varyanta atanmış olarak kalacaktır. Bu, bir kez gördükleri temayı deney sırasında tekrar görecekleri anlamına gelir. Bir süre sonra hangi temanın daha iyi performans gösterdiğini anlayacaksınız.
İlk adımlar
Web analitiği entegrasyonları
Deney oluşturun
İzleme ve değerlendirme
- Varify.io ile Takip
- Varify.io'da GA4 değerlendirmesi
- Raporları segmentlere ayırma ve filtreleme
- GA4'te izleyici temelli değerlendirme
- GA 4'te segment bazlı değerlendirme
- Matomo - Sonuç analizi
- etracker değerlendi̇rmesi̇
- Anlamlılığı hesaplayın
- Özelleştirilmiş tıklama olayları
- Keşif raporlarında özel olayları değerlendirin
- GA4 - Alanlar Arası İzleme
- Varify.io ile Takip
- Varify.io'da GA4 değerlendirmesi
- Raporları segmentlere ayırma ve filtreleme
- GA4'te izleyici temelli değerlendirme
- GA 4'te segment bazlı değerlendirme
- Matomo - Sonuç analizi
- etracker değerlendi̇rmesi̇
- Anlamlılığı hesaplayın
- Özelleştirilmiş tıklama olayları
- Keşif raporlarında özel olayları değerlendirin
- GA4 - Alanlar Arası İzleme
Görsel Düzenleyici
- Kampanya Güçlendirici: Yukarı Ok
- Kampanya Güçlendirici: Çıkış Niyeti Katmanı
- Kampanya Güçlendirici: Bilgi Çubuğu
- Kampanya Güçlendirici: Bildirim
- Kampanya Güçlendirici: USP Bar
- Bağlantı Hedefi Ekle
- Gözat Modu
- Özel Seçici Seçici
- İçeriği Düzenle
- Metni Düzenle
- Öğeleri taşıyın
- Öğeyi gizle
- Anahtar kelime ekleme
- Yönlendirme ve Bölünmüş URL Testi
- Öğeyi kaldır
- Görüntüyü Değiştir
- Duyarlı Cihaz Değiştirici
- Stil ve düzen değişiklikleri
- Kampanya Güçlendirici: Yukarı Ok
- Kampanya Güçlendirici: Çıkış Niyeti Katmanı
- Kampanya Güçlendirici: Bilgi Çubuğu
- Kampanya Güçlendirici: Bildirim
- Kampanya Güçlendirici: USP Bar
- Bağlantı Hedefi Ekle
- Gözat Modu
- Özel Seçici Seçici
- İçeriği Düzenle
- Metni Düzenle
- Öğeleri taşıyın
- Öğeyi gizle
- Anahtar kelime ekleme
- Yönlendirme ve Bölünmüş URL Testi
- Öğeyi kaldır
- Görüntüyü Değiştir
- Duyarlı Cihaz Değiştirici
- Stil ve düzen değişiklikleri