Tüm dünyada tüketici davranışları hızlı bir şekilde değişiyor. Günümüz tüketicisinin markalardan beklentisi ile on yıl önceki beklentisi arasında büyük farklar bulunuyor. Özellikle e-ticaretin kişiselleştirilmiş alışveriş deneyimi ve kolay ödeme yöntemleri gibi yanları tüketicinin alışkanlıklarına da etki ediyor. Artık tüketicileri satın almaya ikna etmenin yolu sayfa yüklenmesinin hızı, mobil uyumluluk, ödeme yöntemlerinin çeşitliliği gibi yollardan geçiyor. Dijitalleşen tüketicinin hızla değişen alışkanlıkları, yeni trafik türlerinin, taleplerin ve teknolojilerin gelişmesini sağlıyor. Bu teknolojilerden birisi de “headless commerce”.

Headless Commerce henüz çok yeni bir sistem olmasına rağmen çok hızlı bir şekilde benimsenmeye başlandı. Sağladığı faydalar ile daha iyi bir müşteri deneyimi sağlayarak e-ticaret dönüşümlerini artıran “Headless Commerce”, yapısı ile çok daha kazançlı bir e-ticaret sitesine sahip olabilirsiniz. Çalışma yapısı biraz karmaşık olan headless commerce, çok yakın bir gelecekte tüm e-ticaret siteleri için büyük bir önem taşıyacak.

Bu yazımızda headless commerce nedir ve neden headless commerce kullanmalısınız detaylıca inceleyeceğiz.

Headless Commerce nedir?
Headless Commerce nedir?

Headless Commerce (API-based) ne demek?

Headless Commerce, frontend ve backend kaynaklarının ayrı ayrı işlendiği web sitesi mimarisidir. Web sitenizin e-ticaret platformu, CRM (müşteri ilişkileri yönetimi), OMS (sipariş yönetim sistemi) gibi backend kaynakları, sitenizin ön yüzünü oluşturan frontend kaynaklarından ayrı olarak işlenir.

İlk bakışta backend, frontend, API gibi teknik kelimeler korkutucu gelebilir. Headless commerce konusunu anlamak için öncelikle “headless” konusunu anlamak gerekir. Headless konusunu anlamak için de standart yani “monolitik” bir e-ticaret sitesinin veya CMS’in çalışma yöntemini inceleyelim.

Headless Commerce nedir?
Headless Commerce nedir?

Monolitik CMS’in çalışma sistemini anlamak için WordPress’i ele alalım. Dünyada en çok kullanılan CMS sağlayıcısı WordPress’tir. WooCommerce e-ticaret eklentisi ile kullanımı daha da yaygınlaşan WordPress, frontend ve backend adı verilen kod gruplarından oluşur. Frontend, dijital mağazanızın önyüzünü oluşturan tasarım ögelerini ve komutlarını içerir. HTML, CSS, JavaScript ve JQuery kodlarından oluşur. Backend ise web sitesinin temelini oluşturan bileşenlerdir. Backend bileşenleri PHP, Python gibi kod dillerini kullanır. Backend içerisinde ayrıca sitenin veri tabanı bulunur. Veri tabanı için MySql, Oracle gibi sistemler kullanılır.

Monolitik web sitesinde frontend ve backend kodları sunucu tarafında işlenir ve React, Vue gibi bir framework içerisinde MVC (mimari desen) katmanı olarak tarayıcıya iletilir. Tarayıcı bu katmanları son kez işleyerek web sitesine son görünümünü verir. Bu çalışma düzeni içerisinde frontend kodları “head” olarak adlandırılır.

Headless Commerce nedir?
Headless Commerce nedir?

Headless Commerce modelinde ise “head” yani frontend ile backend kaynakları ayrı olarak işlenir. CMS sadece backend kodlarından oluşur. Backend kaynak kodları sabittir ve tasarım değişkenleri için backend kodlarında değişiklik yapılması gerekmez. Aynı şekilde backend kaynakları da frontend değişimlerinden bağımsızdır. Web sitesine bir erişim isteği geldiğinde API (Application Programming Interface – Uygulama Programlama Arayüzü) bağlantısı veya GraphQL aracılığıyla erişim isteği gönderilir. Sunucu gelen isteğe gerekli verileri gönderir. Gelen veriler yine tarayıcı tarafından işlenerek web sitesinin son hali oluşmuş olur. Kullanılacak veriler her hangi bir veri tabanında tutulabilir, önemli olan API bağlantısının bu verileri tarayıcıya ulaştırabilmesidir. CMS sadece içeriği işlemekle sorumludur.

Headless Commerce nedir?
Headless Commerce nedir?

Headless mimarinin bileşenleri nelerdir?

Headless commerce mimarisinde backend kaynaklarını çeşitlendirebilirsiniz. Bu çeşitlilik sonucunda frontend çıktılarınız da çeşitlenecektir.

Headless Commerce nedir?
Headless Commerce nedir?

Backend bileşenleri

Kodlamanın arka yüzü anlamına gelen backend kodları, web sitesinin çalışmasını sağlayan çarklardır. Headless mimari olsun yada olmasın tüm e-ticaret sitelerinin backend kodlarında sipariş ve müşteri yönetimi olması gerekir. Bu sistemler sayesinde online sipariş alabilir ve satış süreçlerinde müşteri ilişkilerini yönetebilirsiniz. Headless mimaride ise OMS (Order Management System) yani sipariş yönetim sistemi ve CRM (Customer Relationship Management) sistemleri API aracılığıyla bağlanılır. Böylece headless mimariye geçerken mevcut CRM ve OMS verilerinizi koruyabilir ve yeni sisteminize API bağlantısı aracılığıyla entegre edebilirsiniz.

Backend bileşenlerinin bir diğer önemli elemanı ise hosting yani sunucu servisidir. Sunucular web sitesiniz verilerini tarayıcıya ileten ağdır. Sunucunun ilettiği HTML, CSS ve JavaScript kodları tarayıcıda render edilerek ziyaretçiye web sitesinin son hali gösterilmiş olur.

Ziyaretçilerinize daha iyi bir deneyim sunmak ve web sitenizi geliştirmek için "3rd party applications" yani 3. parti uygulamaları kullanıyor olabilirsiniz. Üçüncü parti uygulamalar da web sitenizin backend kaynaklarında yer alır. Üçüncü parti uygulamalar ile web sitenizi çok daha ilgi çekici bir hale getirebilirsiniz fakat bu uygulamaların kalabalık kod yığınları web sitenizin yüklenme hızını düşürecektir. Headless Commerce mimarisinde 3. parti uygulamaları da API bağlantısı kullanarak web sitenize entegre edebilirsiniz, böylece yüklenme hızı etkilenmez.

Frontend bileşenleri

Frontend, dijital mağazanızın vitrini yani önyüz tasarımıdır. Backend kodlarının sorunsuz çalışması kadar, frontend tasarımının da kullanıcı dostu olması, iyi bir hız performansı olması ve tüm cihazlar için uygun olması gerekir. Bu yüzden monolitik yapılarda tüm cihazlar için ayrı kod grubu bulunur. Bu tasarımlara "responsive" tasarım denir. Fakat headless commerce mimarisinde tek bir frontend şemasını tüm cihaz türleri uygulayabilirsiniz.

Özel yapım dijital mağaza tasarımı

Headless commerce mimarisinin en önemli özelliklerinden birisi de önyüz tasarımının sabit bir tasarıma bağlı kalmadan bağımsız çalışabilmesidir. Dijital mağazanızın vitrini müşterilerin ihtiyaçlarına göre özel olarak tasarlanabilir.

Dijital vitrininizin backend kaynaklarından bağımsız olarak çalışması dijital mağazanızı sürekli geliştirmenize ve değiştirmenize olanak tanır. Böylece markanızın ihtiyaçlarına göre web sitenizi de kolayca yönlendirebilirsiniz. Bu tip kişiselleştirilebilir vitrinlerin gelecek zamanda en çok karşılaşacağımız türü Progressive web applications (PWAs) olarak adlandırılan ileri web uygulamaları olacak. PWA tasarımlar çok daha hızlı ve kullanıcı dostu bir deneyim sağlıyor.

Headless commerce nedir?
Headless Commerce nedir?

PWA tasarımlar ile e-ticaret çok daha hızlanacak!

Mobil ticaret her geçen sene masaüstü cihazlara karşı üstünlük kazanmaya devam ediyor. Bu yüzden dijital mağazaların başarıya ulaşması için mutlaka mobil uyumlu olması gerekir. Headless commerce ile kullanılan PWA tasarımlar sayesinde artık mobil cihazlarda çok daha gelişmiş ve hızlı bir kullanıcı deneyimi sunabilirsiniz. Dijital mağazanız mobil uyumlu bir web sitesi gibi değil bir mobil uygulama gibi gözükür. Hem de bir uygulama mağazasından indirmeden doğrudan tarayıcı üzerinden kullanılan bir mobil uygulama gibi gözükür. PWA tasarımlara bu özelliği ile "mobile first" yani "mobil öncelikli" tasarım denir. Fakat sadece mobil cihazlarda değil tüm cihaz türlerinde kolayca kullanılabilir.

M-Ticaret hakkında daha fazla bilgiye "M-Ticaret nedir?" yazımızda ulaşabilirsiniz!

PWA tasarımların bir diğer özelliği de Single Page Application (SPA) yani tek sayfalı bir uygulama gibi dijital mağaza yapabilmenizdir. Bu tip tasarımda dijital mağazanızın tüm bileşenleri tek bir sayfada bulunur ve hızlı bir şekilde yüklendikten sonra bir daha sayfa yüklemesi gerektirmez.

PWA tasarımın faydaları

PWA web sayfaları ile e-ticarete birçok yenilik gelmesi bekleniyor. PWA tasarımlar yapıları itibari ile statik e-ticaret tasarımlarına göre çok daha iyi bir e-ticaret deneyimi sunuyor;

Headless Commerce nedir?
Headless Commerce nedir?
  • Hız optimizasyonu tarihe karışıyor: Headless commerce ile PWA tasarım birlikteliğinin ortaya çıkarttığı en somut gelişme sayfa yüklenme performansının çok daha hızlı olmasıdır. Monolitik yapılarda sayfa yüklenme hızı geri dönüş oranlarının artmasında büyük bir rol oynuyordu. Verilere göre bir sayfa yüklenirken her geçen 1 saniye %7 dönüşüm kaybı anlamına geliyor. PWA tasarımların sayfa yüklenme hızında sağladığı artış, dönüşüm oranları, ortalama sepet tutarı, reklam yatırımı dönüşleri gibi ölçütlere büyük oranda fayda sağlıyor. Ayrıca iyi bir hız performansı, SEO gücünüze de katkıda bulunur.
  • Mobil öncelikli tasarım: Tüm mobil cihazlarda ve tüm ekran türlerinde çalışmaya uygun olan PWA tasarımlar ile dijital mağazanızı bir mobil uygulama tasarımına getirebilirsiniz.
  • Gelişmiş özelleştirme: PWA tasarımları 3. parti CMS uygulamaları ile kullanarak özelleştirebilirsiniz. Böylece bir tasarımcı veya kodlama desteğine gerek duymadan da sayfalarınızı özelleştirebilirsiniz. Ayrıca bu CMS uygulamalarını operasyonlarınızı yönetmek için de kullanabilirsiniz.

ikas ile e-ticaret operasyonlarınızı tek panelden yönetin!

ikas ile e-ticaret sitenizdeki ve pazaryerindeki ürünlerinizi tek bir panelden yönetin! Toplu ürün yükleme, toplu fiyat belirleme ve satış yönetimi gibi birçok işlemi kolayca yapabilir, e-ticaret raporlarınızı görebilirsiniz.

ikas'ı ücretsiz denemek için tıklayın!