Shopify - Buy Button (Satın Al Düğmesi) Dönüşüm Takibi

Shopify ürün satışı amacıyla farklı gereksinimlere yönelik olarak çevrimiçi mağaza (online store) seçeneğinin yanı sıra, Satın Al Düğmesi (buy button), Satış Noktası (point of sale), Messenger, Google, Facebook, Amazon ve Wholesale gibi seçenekler de sunmaktadır.
AA

Ek bir not; Amazon seçeneği çevrimiçi mağaza USD veya CAD tanımlı ise aktif olmakta iken, Wholesale kullanımı için Shopify Plus üyeliği gerekmektedir. Bu yazının konusuda da seçenekler arasında yer alan Satın Al Düğmesi (Buy Button).

Buy Button (Satın Al Düğmesi)

Shopfiy satın al düğmesi özelliği Shopify platformuna eklenen ürünlerin mağazanın yanı sıra farklı web sayfaları ve/veya web uygulamaları üzerinden de satışını gerçekleştirme imkanı sunmaktadır. Bu işlem için ürün ve koleksiyon temelinde bir buton oluşturmak yeterli1 2.

Öncelikle izlenmesi gereken adımlardan bahsetmekte fayda var.

Shopify

Shopfiy üzerinde bir mağaza oluşturduğunuzda sadece Online Store seçeneği satış kanalları (sales channels) altında yer alacaktır. Yazının ilk paragrafında da bahsi geçen seçeneklerin her biri için ayrı bir aktivasyon işlemi gerekmekte. Buy Button ve diğer seçenekleri kullanabilmek için Sales Channels başlığı yanındaki + simgesini tıklamanız gerekmekte3.

Shopify Buy Button

Buy Button satış kanalları altına eklendiğinde ilgili seçeneği tıklayarak buton oluşturma adımlarına ulaşılabilir. Sonraki işlemerde Products altında oluşturulan ürünler kullanılacağı için en az 1 ürün tanımı yapılmış olunmalı.

Shopify Buy Button

Adımların takip edilmesi ve buton ile ilişkili ürün(lerin) seçilmesi ile birlikte özelleştirme (customize) adımına ulaşılabilir. Bu adımda ürünün görüntülenme ve buton stilinden tıklama davranışına değin pek çok özelleştirme yapmak mümkün. En temel hali ile buy button klasik düzene ve tıklandığında ürünün sepete atılması davranışına sahiptir.

Buton Tıklama Etkinlikleri

Shopify butonun tıklandığında gerçekleştirilecek işleme yönelik 3 seçenek sunar. Ön tanımlı olarak Add product to cart seçeneği aktiftir.

App product to cart
Bu seçenek web sayfasına bir sepet (cart) özelliği ekler. Satın alma işleminin gerçekleştirileceği sayfanın sağ bölümünde ilgili sepet simgesi görülebilmektedir. Satın al düğmesi tıklandığında sepet bölümü açılır. Ürün adedi, toplam ödeme tutarı gibi bilgiler gösterilir. Ödeme işleminin tamamlanabilmesi için sepet bölümünde yer alan Checkout butonunun tıklanması ve Checkout adımına geçilmesi gerekir.
Cart
Direct to checkout
Buton tıklandığında sepet işlemi atlanır ve doğrudan Checkout adımını görüntüleyen bir popup açılır.
Open product details
Satın al düğmesine tıklandığında bir modal içerisinde ürün detayları (ek görseler, açıklama, vb.) görüntülenir. Bu modal içerisinde bulunan Add to cart butonu ile ürün sepete eklenir. Ödeme işleminin gerçekleştirilebilmesi için Checkout butonunun tıklanması ve Checkout adımına geçilmesi gerekir.
Layout

Sayfa ve ürün temelinde her seçeneği ayrıca test edip dönüşüm sayılarına göre başarılı olan seçenek ile devam edebilirsiniz.

Layout seçeneği ile ürün detaylarının sayfada nasıl (small, medium ve large) görüntüleneceği belirlenebilmekte. Burada görüntülenen seçenekler Layout style ile ilişkili olarak değişkenlik göstermektedir.

Buton tıklama davranışı olarak direct to checkout seçili ise Shopping cart, add product to cart seçili ise detailed pop-up seçenekleri kullanılamaz.

Advanced settings ise checkout işleminin ne şekilde gerçekleştileceğini belirtir. Open pop-up window buton tıklama davranışı ile ilişkili olarak bir popup ile işlemlerin gerçekleştirilmesini sağlarken redirect in the same tab kullanıcının mağaza ile ilişkili bir sayfaya ve ödeme işlemi sonrasında tekrar önceki sayfaya yönlendirilmesini sağlar.

window.postMessage

Checkout İşlemleri

Eğer redirect in the same tab seçeneği seçili ise Shopify mağazasına ait Checkout ayarları da kullanılabilir hale gelmektedir. Bu düzenlemelere Settings > Checkout yolunu izleyerek ulaşmak mümkün. Shopify - Google Analytics ve Tag Manager İşlemleri başlıklı bir önceki yazıda da bahsi geçtiği üzere Additional scripts alanına kod eklemek mümkün4 2.

İşlemlere, buton ve diğer düzenlemlere karar verilmesinin ardından Copy code aşamasına geçilebilir. Bu sayfa üzerinden aşağıdaki örneğe benzer bir kod parçacığı iletilecektir.

<div id='product-component-1607272753249'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'testing-purpose-v1.myshopify.com',
      storefrontAccessToken: '683f692c41dcb79ed3374d7a99c93f4c',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '5966472282274',
        node: document.getElementById('product-component-1607272753249'),
        moneyFormat: '%7B%7Bamount%7D%7DTL',
        options: {
          "product": {
            "styles": {
              "product": {
                "@media (min-width: 601px)": {
                  "max-width": "calc(25% - 20px)",
                  "margin-left": "20px",
                  "margin-bottom": "50px"
                }
              }
            },
            "buttonDestination": "modal",
            "contents": {
              "img": false,
              "title": false,
              "price": false,
              "options": false
            },
            "text": {
              "button": "View product"
            }
          },
          "productSet": {
            "styles": {
              "products": {
                "@media (min-width: 601px)": {
                  "margin-left": "-20px"
                }
              }
            }
          },
          "modalProduct": {
            "contents": {
              "img": false,
              "imgWithCarousel": true,
              "button": false,
              "buttonWithQuantity": true
            },
            "styles": {
              "product": {
                "@media (min-width: 601px)": {
                  "max-width": "100%",
                  "margin-left": "0px",
                  "margin-bottom": "0px"
                }
              }
            },
            "text": {
              "button": "Add to cart"
            }
          },
          "cart": {
            "text": {
              "total": "Subtotal",
              "button": "Checkout"
            }
          }
        },
      });
    });
  }
})();
/*]]>*/
</script>

options nesnesi customize adımındaki kararları içermektedir5.

options = {
  product: {},
  cart: {},
  modal: {}, // configure the modal created by a product embed
  productSet: {}, // configure a collection or set of products
  toggle: {}, // configure the tab that toggles the cart open
  modalProduct: {}, // configure the product within the modal
  option: {}, // configure the variant option selectors within a product
  lineItem: {}, // configure the individual line items within a cart
}
Buy Button - Checkout

Ödeme İşlemleri

Popup aracılığı ile işlemlerde kullanıcının görüntülediği adımlar da JavaScript ile takip edebilmektedir.

// Ürün Etkinlikleri
var events = {
  addVariantToCart: function (product) {},
  updateQuantity: function (product) {},
  openModal: function (product) {},
  openOnlineStore: function (product) {},
  openCheckout: function (product) {},
}

// Sepet Etkinlikleri
var events = {
  openCheckout: function (cart) {},
  updateItemQuantity: function (cart) {},
}

// Özel Etkinlikler
var options = {
  product: {
    DOMEvents: {
      'click .option-select': function (evt, target) {
        var data = target.dataset;
        var product = ui.components.product.filter(function (product) {
          return product.id === 8728441478;
        })[0];
        product.updateVariant(data.option, data.value);
      }
    }
  }
}

Popup İçi Etkinlikler

Web API window.postMessage İle Pencereler Arası İletişim başlıklı yazıda da bahsi geçtiği üzere iframe ve popup ile bu sayfaları oluşturan parent arasında mesaj (message) taşıyabilmek mümkün. Shopify checkout popup da bu yapıya uygun olarak popup ii etkinliklere dair takip edilebilecek mesajlar iletmekte6.

window.postMessage 
window.addEventListener('message', (e) => {
 let data = JSON.parse(e.data);
 console.log(data.current_checkout_page); // /checkout/payment
});

Bir önceki yazıda, Hedefler (Goals) ve Huniler (Funnels) başlığı altında da bahsi geçtiği üzere, Shopify ödeme işlemlerini 6 adımda gerçekleştirmektedir. Pupoup kullanımında, popup'ın açılması ile birlikte /checkout/payment sayfası görüntülenmiş olur. Checkout sayfası yine Checkout İşlemleri başlığında da bahsi geçtiği üzere ayrıca özelleştirilebilmekte. Eğer bir izleme kodunu checkout sayfası için tanımlamış iseniz, funnel tanımında satı butonu üzerinden gelebilecek trafiği de hesaba katmanızda fayda olacaktır. Ödeme işleminin tamamlanmasının ardından görüntülenen sayfa ise /checkout/thank_you olacaktır.

  1. Jody Edgar. (2019). How to Create a Buy Button and a Checkout Page inside Shopify ↩
  2. Tessa Thornton. (2016). Introducing BuyButton.js – Shopify's New JavaScript Library ↩ ↩
  3. Buy Button. Shopify Help Center ↩
  4. Customize the order status page. Shopify Help Center ↩
  5. Customization Options. Shopify BuyButton.js ↩
  6. Shopify/buy-button-js. GitHub ↩
Yorum alanını göster
Beğendim
Beğenmedim