Headless E-Ticaret için A/B Testi — Hydrogen, commercetools, Saleor ve Özel Stack'lerde Nasıl Çalışır

Headless e-ticaret artık ciddi orta ölçekli ve kurumsal D2C markalar için varsayılan. Frontend (React, Vue, Astro, özel) e-ticaret backend'inden (Shopify, commercetools, Saleor, BigCommerce) ayrı yaşar. Performans, tasarım esnekliği ve temiz bir geliştirici deneyimi elde edersiniz. Ayrıca A/B test araçlarıyla farklı bir ilişki elde edersiniz, çünkü çoğu tema sahibi olduğunuzu varsayarak inşa edilmişti.

Bu sayfa tema tabanlı mağaza üzerinde test etme ile headless vitrin üzerinde test etme arasındaki mimari farkı açıklar, her büyük stack üzerinde entegrasyonun nasıl çalıştığını gösterir ve istemci tarafı ile sunucu tarafı deney arasında karar verdiğinizde neyin değiştiğini gösterir. Bu bir açıklayıcı, araç sıralaması değil.

Headless'e geçtiğinizde değişenler

Shopify Liquid temasına veya WooCommerce sitesine A/B test aracı yüklediyseniz, iş akışı basitti. Tema başlığına bir kod parçacığı yapıştırın, kaydedin, bitti. Bu iş akışı üç şeyi varsayar ve bunların hepsi headless ticarette ortadan kalkar.

Tema editörü yoktur. Monolitik platformlar bilinen bir entegrasyon noktasıyla gelir: tema başlığı. Headless'te ön ucunuz React, Vue, Next.js, Hydrogen veya seçtiğiniz başka bir framework ile oluşturulmuş özel bir uygulamadır. Test kod parçacığının uygulama kodunuza entegre edilmesi veya CDN'den yüklenmesi gerekir. Geliştiricinin aldığı tek seferlik bir karardır, ancak yapıştır-ve-git adımı değil, bir karardır.

Build pipeline sizindir. Hydrogen, Vite ile build eder. commercetools vitrin genellikle Next.js kullanır. Saleor ön uçları tipik olarak Next.js veya Nuxt'tur. Her projenin kendi bundler'ı, bağımlılık grafiği ve deployment hedefi vardır. Tek drop-in script etiketi gönderen bir test aracı her yerde çalışır. SDK kurulumu ve bundler konfigürasyonu gerektiren bir araç bazı stack'lerde çalışır, diğerlerinde çalışmaz.

Rendering farklı gerçekleşir. Monolitik Shopify mağazasında HTML, Shopify sunucuları tarafından render edilir. JavaScript tarayıcıda çalışır ve client-side test açık seçimdir. Headless'te server-side rendering (Next.js SSR), static site generation (Hydrogen, Astro), incremental regeneration veya pure client-side rendering kullanabilirsiniz. Her biri varyant atamasının nerede gerçekleşmesi gerektiğini değiştirir. Bu, headless A/B testi için merkezi karar haline gelir ve aşağıda ele alıyoruz.

Her büyük headless stack'te A/B testinin nasıl çalıştığı

Shopify Hydrogen

Hydrogen, Oxygen'de deploy edilen headless vitrinler için Shopify'ın React framework'üdür. Altında Remix kullanır ve server-side render eder. A/B test için iki yolunuz var:

• Client-side: Test kod parçacığını root layout'ta (root.tsx) yükleyin. Varyant ataması hydration sonrası tarayıcıda çalışır. Herhangi bir UI düzeyindeki test için çalışır (hero, PDP layout, CTA yerleştirme, güven rozetleri). Çoğu ekibin seçtiği budur.
• Server-side: Test aracınızın API'sinden varyant atamalarını almak için Hydrogen'in loader fonksiyonlarını kullanın, ardından bunları render edilen bileşenlere props olarak geçirin. Sıfır flicker, daha yüksek uygulama çabası.

Shopify'ın native A/B test uygulamasının Hydrogen'da çalışmadığını unutmayın. Sadece Liquid temalar için yapılmıştır.

commercetools (herhangi bir frontend ile)

commercetools headless ticaret backend'idir. Frontend tipik olarak Next.js, Nuxt veya custom'dır. Test yaklaşımı commercetools'un kendisine değil frontend'e bağlıdır. Çoğu ekip frontend'in HTML head'ine bir kod parçacığı bırakır ve client-side çalıştırır. Server-side, test aracının API'sini frontend'inizin server fonksiyonlarından çağırarak mümkündür.

Saleor

Saleor, Next.js veya React vitrin referans implementasyonuna sahip açık kaynak headless ticaret platformudur. Saleor backend'i test yaklaşımını dikte etmez. _app.tsx veya root layout'ta kod parçacığı ile client-side standart kalıptır.

BigCommerce headless

BigCommerce, Catalyst Next.js referans vitrini veya herhangi bir custom frontend aracılığıyla headless'i destekler. Diğerleriyle aynı kalıp: Next.js root'ta client-side kod parçacığı, SSR varyantları için isteğe bağlı olarak API ile server-side.

Custom Next.js, Remix, Astro, SvelteKit

Herhangi bir custom ticaret frontend'i aynı şekilde çalışır. Test kod parçacığını root bileşen veya layout'a bırakın. Server-side varyantlara ihtiyacınız varsa (genellikle flicker'ın kabul edilemez olduğu checkout sayfaları için), server fonksiyonlarınızda test API'sini çağırın ve sonuçları props olarak aşağı geçirin.

Headless'te server-side vs client-side: hangisini ne zaman seçmeli

Headless, server-side ve client-side test arasında gerçek bir mimari seçim sunar. Shopify Liquid mağazasında soru neredeyse geçerli değil. Headless'te geçerli.

Client-side test her headless stack'te çalışır. Kurulum dakikalar sürer (root layout'a bir kod parçacığı yapıştır), görsel editör kullanılabilir kalır ve pazarlamacılar mühendislik katılımı olmadan test çalıştırabilir. Bu kategorideki araçlar arasında Varify.io, VWO, AB Tasty ve Convert bulunur. Küçük risk yavaş ağlarda flicker'dır, iyi bir anti-flicker implementasyonu bunu 30 milisaniyenin altına indirir.

Server-side test Hydrogen, Next.js SSR ve Astro gibi SSR veya SSG stack'lerinde en iyi çalışır. Varyant kararı HTML tarayıcıya ulaşmadan önce gerçekleşir, bu yüzden flicker sıfırdır. Maliyet uygulama çabasıdır: her test SDK entegrasyonu, deployment pipeline değişiklikleri ve varyantları yönlendirmek için backend mantığı gerektirir. Bu kategorideki araçlar GrowthBook, Optimizely Full Stack ve LaunchDarkly Experimentation'dır. Mühendislik kapasiteniz olduğunda ve flicker'ın kabul edilemez olduğu checkout-kritik veya backend-mantık testleri için doğru yoldur.

Headless ticaret A/B testlerinin yaklaşık %80'i için client-side doğru seçimdir. İstisnalar flicker'ın önemli olduğu checkout-kritik testler ve fiyatlandırma motorları veya öneri algoritmaları gibi backend mantığının testleridir. Bunlar için server-side veya hibrit kurulumlar mantıklıdır. Client-side vs server-side karşılaştırmamız tam döküme sahiptir.

Varify.io headless vitrin ile nasıl entegre oluyor

Varify.io'nun headless ticarete uygun olmasının üç nedeni.

• Tek snippet, herhangi bir frontend. Kök layout'unuzda bir kez eklenen 11.5 KB JavaScript snippet'i. React, Vue, Astro, SvelteKit, Hydrogen, Next.js ve tarayıcıda JavaScript yükleyen her şeyle çalışır. SDK kurulumu, bundler konfigürasyonu, güncel tutulması gereken framework-özel paket yok.
• SPA-farkında. Headless mağazalar genellikle tek sayfalı uygulamalardır. Varify, React Router, Next.js routing ve Hydrogen navigasyonundaki rota değişikliklerini algılar ve varyantları yeni sayfada otomatik olarak yeniden uygular. Manuel SPA konfigürasyonu gerekmez.
• Cookie'siz, onay engeli yok. Varyant ataması localStorage kullanır, bu da onay banner durumundan ve Safari ITP'den bağımsız çalışır. Bu, yüksek mobil trafikli ve AB müşteri tabanına sahip headless mağazalar için önemlidir. Mimari detaylar için cookie'siz A/B test'e bakın.

Next.js veya Hydrogen vitrininde tipik entegrasyon şöyle görünür:

// app/layout.tsx or root.tsx
<script
  async
  src="https://cdn.varify.io/snippet/YOUR_ID.js"
/>

Çoğu headless vitrin için entegrasyon bu kadar. Snippet yayına geçtikten sonra, deneyler Varify dashboard'unda yönetilir ve yeni testler için başka kod değişikliği gerekmez.

Flicker'ın kabul edilemez olduğu performans kritik sayfalar için, Varify ayrıca atama API'sını sunucu tarafı koddan çağırmayı ve varyant verilerini ilk HTML render'ına enjekte etmeyi destekler. Çoğu takım buna ihtiyaç duymaz ve client-side varsayılan testlerin çoğunluğu için yeterlidir.