Ana içeriğe geç

Varify.io ile Shopify temalarını test et

Son güncelleme: 22 Nis 20263 dk okuma süresi
İçindekiler

Kısaca​

Varify.io ile yeni bir Shopify temasını eski temanla kolayca A/B testine tabi tutmak için „Shopify Theme Preview“ özelliğini kullan. Bunu yapmak için yeni bir deney oluştur ve sağlanan JavaScript kodunu kullan. Kodu yeni tema ID'in ile özelleştir ve mağazanı geçirmeden önce yeni temayı test et.

Tema testlerini yalnızca gerçekten yeni bir temayı test etmek istiyorsanız kullanın. Genel olarak değişiklikleri Varify görsel düzenleyici ile veya JSS ve/veya CSS değişiklikleriyle yapmanızı öneririz. Sağlanan kodun işlevselliğini ve Shopify'ın işlevselliğini garanti etmiyoruz. Bir tema testi için kapsamlı bir QA kesinlikle gereklidir.

Neden Shopify temaları test edilmeli​

Yeni bir Shopify teması, mağaza performansını düşürmediğinden emin olmak için geçiş yapılmadan ö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 mi yoksa daha kötü mü sonuçlar verdiğinin veri destekli bir şekilde kontrol edilmesini 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ı üzerinden entegre etmenizi öneririz. Adım 1 yalnızca Varify snippet'i sitenizde henüz kurulu değilse gerçekleştirilmelidir.

Varify.io snippet'ini panodan kopyalayın ve mağazanızın theme.liquid dosyasının içinde mümkün olduğunca yukarıya yapıştırın. Bunu yapmak için Shopify arka planında "Online Store" -> "Themes" bölümüne gidin ve "edit code" üzerine tıklayın

Mevcut temanın bağlam menüsü açık ve "Edit code" girişi vurgulanmış şekilde Shopify "Themes" ekranı Ardından Varify.io snippet'ini aşağıdaki örnekteki gibi ekleyebilirsiniz. Lütfen snippet üzerinde hiçbir şeyi değiştirmeyin, Shopify değişiklik önerileri sunsa bile - yapılacak değişiklikler titreme (flicker) efektlerine neden olur veya A/B testi artık çalışmaz.

theme.liquid dosyası açık Shopify kod düzenleyicisi; Varify snippet'i doğrudan açılış "<head>" etiketinin altında yer alıyor Uygulamanın başarılı olup olmadığını test edin. Test olarak Varify.io panosu üzerinden mağazanızın bir ürün sayfasında yeni bir deney oluşturun. Editör açılırsa, uygulama başarılı olmuştur.

Shopify mağaza URL'sinin „Create new Experiment“ butonunun yanına girildiği Varify kontrol paneli

Adım 2: Test etmek istediğin yeni temanın theme ID'sini bul​

Test katılımcılarının hangi temayı görmesi gerektiğini Shopify'a bildirmek için theme ID'ye ihtiyacımız var. İşte önizleme bağlantısından theme ID'yi nasıl bulacağına dair adım adım bir kılavuz:

  1. şuraya git: Sales Channels > Online Store > Themes > Theme Library.

  2. test etmek istediğin temayı ara.

  3. üç noktaya (Actions) tıklayın

  4. „Preview“ öğesine tıklayın ve bağlantıyı kopyalayın.

Önizleme bağlantınız şuna benzer şekilde görünecektir: https://deinshop.myshopify.com/?preview_theme_id=1234567890

Bağlantının sonundaki sayı (1234567890) ihtiyacınız olan tema ID'sidir.

Şimdi mevcut temanız için de aynısını yapın ve tema ID'sini buraya da kopyalayın.

Adım 3: Deney oluştur​

Yeni bir deney oluştur. Varify panosunda editör URL'si olarak mağazanın ana sayfasını gir. Ardından "Add JS"e tıkla ve aşağıdaki JavaScript'i deneye ekle.

Temayı değiştiren betiği içeren Varify editör iletişim kutusu „Add JS“; „preview_theme_id“ satırı yeni temanın ID'sini alır

💡Not: 6. satıra şu anda kullandığın temanın theme ID'sini, 17. satıra ise test edilecek temanın theme ID'sini gir.

// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Add your original theme id here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="148175061290"]',
  (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) {
      // Add your preview theme id here
        params.set('preview_theme_id', '177143382392');
        params.set('pb', '0');   // hide the preview bar
        const paramAsBase64 = window
          .btoa(`${experimentId}:${variationId}`)
          .replace(/=/g, '');
        params.append(
          'va-red',
          paramAsBase64,
        );
        // 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ığını yeni theme ID'leriyle güncelledikten sonra „Finished“e tıkla ve deneye uygun bir isim ver. Ardından deneyde „Page Targeting“i aç ve „Match Type“i „Simple Match“ten „Contains“e değiştir. Sonra „Save Page Targeting“e tıkla.

„Shopify Theme Test“ testinin sayfa hedeflemesi: URL koşulu „Contains“ mağaza alan adıyla eşleşiyor

Sen ya da bir ziyaretçi test versiyonunu bir kez gördükten sonra, deney tamamlandıktan sonra bile önizleme versiyonunu görmeye devam eder. Orijinal varyantta orijinal temayı da tekrar görebilmen için "New Original" adında yeni bir varyant oluştur. Ardından görsel düzenleyicide "Add JS" üzerine tıkla ve aşağıdaki JavaScript kodunu ekle, data-theme-instance-id değerini test etmek istediğin Shopify temasının önizleme tema ID'siyle değiştir.

Üç satırlı çalışan „Shopify Theme Test“: Original %0 trafikte, „Variation 1“ ve „New Original“ ise her biri %50'de 
// Add your correct preview theme ID here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="167804502324"]',
  (themeElement) => {
    let currentUrl = window.location.href;

    if (!currentUrl.includes('varify-variation-id')) {
        if (currentUrl.includes('?')) {
            currentUrl += '&exitPreview=1';
        } else {
            currentUrl += '?exitPreview=1';
        }

        window.location.href = currentUrl;
    }
  }
);

Adım 4: Hedefleme ve kalite güvencesi​

JavaScript'i uyguladıktan ve deneyi kaydettikten sonra, deneyin sayfa hedeflemesine mağaza URL'ini kaydedebilirsin. Yönlendirmenin çalışıp çalışmadığını ve tüm ayarların doğru şekilde yapılıp yapılmadığını kontrol etmek için "Preview" bağlantılarını da kullanabilirsin. Bunu yapmak için, mağaza kodunda ilgili tema ID'sini aramanız yeterlidir. Test versiyonunda ya orijinal tema ID'si ya da önizleme tema ID'si bulunmalıdır.

Adım 5: Deneyi başlat​

Şimdi "Start Experiment" ile deneyi başlat. Şu andan itibaren ziyaretçilerinin %50'si yeni temaya, %50'si de eski temayı görmeye devam edecek şekilde yönlendirilecek. Ziyaretçiler, deney süresince her zaman aynı varyanta atanmış kalır. Bu, bir kez gördükleri temayı deney boyunca tekrar görecekleri anlamına gelir. Bir süre sonra hangi temanın daha iyi performans gösterdiğini görebileceksin.

Adım 6: Deney sona erdikten sonra önizleme modunu sıfırlama​

Kullanıcıların önizleme tema varyantını gördükten sonra, deney sona erse bile bu varyantı görmeye devam edecekler. Kullanıcıların orijinal temanı tekrar görebilmesi için bir "Clean Up" deneyi başlatabilirsin. Bunun için yeni bir deney oluştur ve "Add JS" altına "New Original" varyantının JavaScript kodunu ekle (yukarıya bak). Deneyi istediğin bir isimle kaydet. Trafik dağılımını %100 varyant olarak ayarla ve deneyi başlat.

Önceki tüm test katılımcıları için, varyantı görmüş olan kullanıcılar dahil, önizleme modu artık sona erdirilmiştir. Deneyi başlatmadan önce, önceki adımlarda olduğu gibi kodun işlevselliğini kontrol etmeyi unutma.

Bu sayfada