# Shopify

Shopify kurulumu
Kaynak: https://selwise.com/docs/platforms/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.

```html
<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](/docs/channels/domain-verification).

**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ı](/docs/integration/data-layer)) |
| 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](/docs/integration/identify)); 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:

```html
<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>
```

> **Fiyatlar kuruş cinsinden, kod SKU olmalı**
>
> Shopify tutarları kuruş ya da sent olarak verir; `divided_by: 100.0` bunları ana birime çevirir. `line_item.sku` beslemedeki `item_code` ile aynı olmalıdır. `productId` ya da `id` gibi alanlar okunmaz; `orderId` ve `productItemCode` yazın.

**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](/docs/integration/order-tracking) 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](/docs/product-feeds/field-mapping), [Varyant Gruplama](/docs/product-feeds/variant-grouping)). İç 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:

```liquid
{% 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](/docs/integration/identity-verification).

## 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ı](/docs/troubleshooting/tracking-issues).