Shopify

Shopify mağazasında Selwise kurulumu beş adımdır: script'i temaya ekleme, domain doğrulama, veri katmanı ayarı, sipariş takibi ve besleme. Shopify için hazır bir dataLayer eşlemesi yoktur; hangi olayın nereden geldiği aşağıda anlatılır.

1. Script'i temaya ekleyin

Shopify yönetim panelinde Online Store → Themes → Edit code yolunu izleyin ve theme.liquid dosyasında </body> etiketinden hemen önce Selwise parçasını ekleyin. SITE_KEY yerine Kanallar → Kanal Özeti → Setup (Channels → Channel Overview) bölümündeki anahtarı yazın.

<link rel="preconnect" href="https://widget.selwise.com" crossorigin>
<link rel="preconnect" href="https://api.selwise.com" crossorigin>
<script>window.Selwise=window.Selwise||{};window.Selwise.q=window.Selwise.q||[];['track','trackOrder','identify','setTraits','pushDataLayer','grantConsent','revokeConsent','showConsentPreferences','withdrawConsent','endJourney'].forEach(function(m){if(!window.Selwise[m])window.Selwise[m]=function(){window.Selwise.q.push([m,arguments])}});</script>
<script async src="https://widget.selwise.com/client.js" data-site-key="SITE_KEY"></script>

theme.liquid, tema sayfalarının hepsinde çalışır; ödeme ve sipariş durumu sayfaları temayı kullanmaz, orada script'in ayrıca eklenmesi gerekir (3. adım).

2. Domain'i doğrulayın ve veri katmanını açın

Channel Overview sayfasında Verify Now'a basın. Doğrulama ham HTML'de data-site-key arar; tema bunu sunucuda bastığı için geçer. Mağazanın alan adı magaza.com ise www.magaza.com ve alt alan adları da kabul edilir, magaza.myshopify.com ayrı bir alan adıdır. Ayrıntı: Domain Doğrulama.

Ayarlar → Entegrasyonlar → Data Layer Configuration (Settings → Integrations) ekranında:

• Enable Data Layer (Data Layer'ı Etkinleştir) anahtarını açın; varsayılan kapalıdır ve kapalıyken ürün ve sayfa olayları gelmez.
• E-commerce Platform Preset olarak Shopify seçin. Auto Detect de çalışır (window.Shopify, cdn.shopify.com kaynakları ya da myshopify.com alan adından tanır), ama mağazanın kendi sepetini okuyan hedef çubuğu yalnızca açıkça seçilmiş ön ayarla çalışır.
• Save Changes ile kaydedin.

Hangi veri nereden gelir

Veri	Kaynağı
Sayfa görüntüleme	Otomatik
Sayfa türü	URL desenleri: /products/..., /collections/..., /cart, /checkout, /search, /account varsayılan desenlerle tanınır
Ürün görüntüleme	Sayfadan: ürünün Product şemalı JSON-LD'si (sku öncelikli), .product-template ve [data-product-handle]
Sepete ekleme ve çıkarma	Otomatik gelmez: Shopify için hazır dataLayer eşlemesi yoktur. Tema kodunuzdan window.selwiseLayer.push ile gönderin (Veri Katmanı)
Sepet tutarı	Hedef çubuğu için GET /cart.js okunur (tutar kuruş cinsindendir, Selwise ana birime çevirir)
Kullanıcı kimliği	Selwise.identify (Kimliklendirme); oturum açık müşterinin kimliğini tema Liquid'inden geçirin
Arama terimi	Selwise araması açıksa kendisi kaydeder; mağazanın kendi aramasını search_query ile gönderin

Ürün koduna dikkat edin: ürün görüntüleme olayındaki kod, beslemedeki ürün kodu (item_code) ile aynı olmalıdır; JSON-LD sku alanınız beslemedeki sku ile uyuşmuyorsa ürün raporları boş kalır.

3. Sipariş takibi

Sipariş, Shopify'ın sipariş durumu sayfasından gönderilir: Settings → Checkout → Order status page → Additional scripts. Bu sayfa temayı yüklemediği için bloğa önce kurulum parçasını, sonra trackOrder çağrısını koyun. Liquid gerçek sipariş verisini doldurur:

<link rel="preconnect" href="https://widget.selwise.com" crossorigin>
<link rel="preconnect" href="https://api.selwise.com" crossorigin>
<script>window.Selwise=window.Selwise||{};window.Selwise.q=window.Selwise.q||[];['track','trackOrder','identify','setTraits','pushDataLayer','grantConsent','revokeConsent','showConsentPreferences','withdrawConsent','endJourney'].forEach(function(m){if(!window.Selwise[m])window.Selwise[m]=function(){window.Selwise.q.push([m,arguments])}});</script>
<script async src="https://widget.selwise.com/client.js" data-site-key="SITE_KEY"></script>
<script>
  window.Selwise.trackOrder({
    orderId: '{{ order.id }}',
    currency: '{{ shop.currency }}',
    total: {{ order.total_price | divided_by: 100.0 }},
    placedAt: new Date().toISOString(),
    items: [
      {% for line_item in order.line_items %}
      {
        productItemCode: '{{ line_item.sku }}',
        name: '{{ line_item.title | escape }}',
        quantity: {{ line_item.quantity }},
        unitPrice: {{ line_item.price | divided_by: 100.0 }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  });
</script>

Checkout Extensibility kullanan mağazalarda Additional scripts alanı sunulmayabilir. Custom Pixel ya da checkout uzantısı, mağaza sayfasındaki window.Selwise'a erişemeyen yalıtılmış bir ortamda çalışır; Selwise bu ortam için doğrulanmış bir tarayıcı yolu sunmaz. Siparişi sunucunuzdan gönderin: Sipariş Takibi sayfasındaki Sunucu tarafı gönderim.

Sipariş ödeme sayfasının farklı bir alan adında olması durumunda tarayıcıdaki son temas bilgisi (hangi kampanyaya tıklandığı) oradan okunamaz; atıf yalnızca öneri bağlantısındaki taşıyıcı parametreyle kurtarılır. Bu yüzden ödeme alan adınız ana alan adınızdan farklıysa kampanya atfını sipariş sayfasında beklemeyin.

4. Sepete ekleme ve besleme

Öneri ve arama formunda sepet platformu olarak Shopify seçin. Selwise POST /cart/add.js ile ürünü ekler ve temanın sepet göstergesini yeniler. İstek varyant kimliği ister: beslemenizdeki varyant kimliğini taşıyan sütunu alan eşlemesinde Add-to-Cart Code (Sepete Ekleme Kodu) satırına yazın, yoksa ürünün kendi kodu gönderilir ve Shopify isteği reddeder.

Shopify için hazır bir besleme eşlemesi yoktur: Katalog → Ürün Beslemesi (Catalog → Product Feed) ekranında adresi girin ve alanları eşleyin (Alan Eşleme, Varyant Gruplama). İç içe varyant listeleyen Shopify biçimi için gruplama modunda nested seçeneği vardır.

İmzalı kimlik (isteğe bağlı)

Shopify temaları müşteri numarasını sunucuda, Liquid'in hmac_sha256 filtresiyle imzalayabilir. Kanal sırrını temanın ayarlarına bir alan olarak ekleyin (örneğin selwise_identity_secret) ve müşteri giriş yapmışken şöyle çağırın:

{% if customer %}
  {% assign selwise_ts = 'now' | date: '%s' %}
  {% capture selwise_message %}{{ customer.id }}:{{ selwise_ts }}{% endcapture %}
  <script>
    window.Selwise?.identify('{{ customer.id }}', {
      userHash: '{{ selwise_message | hmac_sha256: settings.selwise_identity_secret }}',
      userHashTs: {{ selwise_ts }}
    });
  </script>
{% endif %}

Sır tema ayarında durur ve sayfaya yazılmaz; sayfaya yalnızca imza çıkar. Çalıştığını kanal sayfasındaki Signed identity kartında Signed sayısının artmasından anlarsınız. Ayrıntı: İmzalı Kimlik.

Kurulumu doğrulama

1. Ürün sayfasında kaynak görüntülemede data-site-key görünmeli, Verify Now geçmelidir.
2. Channel Overview → Data flow satırında olay sayısı artmalı; Data Layer Configuration → View Events listesinde page_view ve product_view görünmelidir.
3. Bir test siparişi verin; Orders satırında görünmelidir. Görünmezse sipariş durumu sayfasında konsolda window.Selwise tanımlı mı bakın: tanımsızsa 3. adımdaki kurulum parçası eksiktir.

Sorun giderme: Takip Sorunları.