Nasıl çalışır
Zonos Checkout farklı bir kaynakta iframe içinde çalıştığı için, sayfanızın gtag işlevine doğrudan erişemez. Geçiş sistemi, bunu iki adımlı bir el sıkışma (adımlar 1-2) ve ardından olay iletme (adım 3) ile çözer:
- Checkout üst öğeyi pingeler -- Checkout iframe içinde yüklendiğinde, ödeme hattını geçişe hazır olduğunu belirten üst penceresine bir mesaj gönderir.
- Üst öğe onaylar -- Sayfanızdaki geçiş komut dosyası, pingi alır, mevcut GA4 yapılandırmanızı algılar ve etkinlik almaya hazır olduğunu belirten sinyal gönderir.
- Etkinlikler iletilir -- Alışveriş yapanlar ödeme hattında ilerledikçe, her analitik etkinliği
postMessagearacılığıyla sayfanıza gönderilir; burada geçiş komut dosyasıgtag'a iletilir.
Tüm mesajlar, yalnızca HTTPS üzerinde güvenilir Zonos kaynaklarına (zonos.com ve iglobalstores.com) karşı doğrulanır.
Ön koşullar
- Ölçüm kimliği (format:
G-XXXXXXXXXX) olan bir GA4 özelliği. Google Analytics'de bir tane oluşturabilirsiniz. - Sayfanızda iframe'de Zonos Checkout yükleyen eski Checkout entegrasyonu.
Kurulum
Adım 1: GA4 etiketini sayfanıza ekleyin
Sitenizde GA4 yüklü değilse, Checkout iframe'ini barındıran sayfanın <head> bölümüne standart Google Analytics 4 etiketini ekleyin.
G-XXXXXXXXXX yerine kendi ölçüm kimliğinizi yazın.
<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX');</script>Not: Sitenizde GA4 etiketi zaten yüklüyse (ör. Google Tag Manager aracılığıyla veya doğrudan bir parçacık), bu adımı atlayabilirsiniz. Geçiş komut dosyası mevcut
gtagişlevinizi kullanacaktır.
Bu parçacığı GA4 özelliğinizde Admin -> Veri Akışları -> akışınızı seçin -> Etiket talimatlarını görüntüleyin -> Manuel olarak yükleyin altında bulabilirsiniz.
Adım 2: Ölçüm kimliğinizi Zonos Checkout'a iletin
Zonos Checkout'a hangi GA4 ölçüm kimliğini kullanacağını söyleyin ve window.Zonos.googleAnalyticId öğesini Checkout'unuzun customHTML içinde ayarlayın. Zonos panosu, Checkout ayarları altında bir customHTML editörü gösterir -- bunun gibi bir <script> etiketi ekleyin:
<script> window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';</script>Bu değer, geçiş el sıkışması sırasında üst öğeye gönderilir. Üst sayfanızda gtag zaten yüklü değilse, geçiş komut dosyası bu kimliği kullanarak GA4 temel etiketini sizin için enjekte edecektir.
Adım 3: Zonos analitik geçiş komut dosyasını ekleyin
GA4 etiketinden sonra aynı sayfaya aşağıdaki komut dosyası etiketini ekleyin. Bu komut dosyası, Zonos Checkout iframe'den analitik etkinliklerini dinler ve bunları gtag'a iletilir.
<script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"></script>Tam örnek
Sayfanızın <head> bölümündeki tam kurulum şu şekilde görünür:
<head> <!-- ... mevcut head etiketleriniz ... --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script> <!-- iframe ödeme hattı için Zonos analitik geçişi --> <script async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js" ></script></head>Hepsi bu. Her iki komut dosyası sayfanızda olduğunda, geçiş komut dosyası iframe ödeme hattı ile el sıkışmayı otomatik olarak tamamlar ve tüm ödeme hattı etkinliklerini GA4 özelliğinize iletilir.
GA4 etkinlikleri referans
Zonos Checkout geçiş aracılığıyla aşağıdaki etkinlikleri yayar. Tüm etkinlikler bir isTestMode bayrağı ve checkoutSessionId içerir.
| Etkinlik↕ | Tetikleyici↕ | Ek meta veri↕ |
|---|---|---|
zonos-checkout-start | Checkout açılır | -- |
zonos-checkout-customer-info | Alışveriş yapan müşteri bilgilerini girer | -- |
zonos-checkout-shipping-info | Alışveriş yapan kargo yöntemini seçer | serviceLevelId |
zonos-checkout-payment-info | Alışveriş yapan ödeme detaylarını girer | paymentMethod |
zonos-checkout-payment-fail | Ödeme denemesi başarısız olur | -- |
zonos-checkout-success | Sipariş başarıyla tamamlanır | transaction_id, currency, value, items |
zonos-checkout-close | Alışveriş yapan ödeme hattını kapatır | -- |
purchase | Sipariş tamamlandı (GA4 standart e-ticaret etkinliği) | transaction_id, currency, value, items |
Satın alma etkinliği meta verileri
purchase etkinliği, GA4 e-ticaret purchase etkinliği
şemasını izler:
| Alan↕ | Açıklama↕ |
|---|---|
transaction_id | Zonos sipariş kimliği veya ödeme oturumu kimliği |
currency | Üç harfli para birimi kodu (ör. USD) |
value | Toplam sipariş değeri |
items | Sepet öğeleri dizisi; her biri item_id, item_name, price ve quantity ile |
Hata ayıklama
Geçiş komut dosyası için hata ayıklama günlüğünü etkinleştirmek üzere, sayfa URL'inize zonosDebug=1 sorgu parametresini ekleyin:
https://www.yourstore.com/checkout?zonosDebug=1Geçiş el sıkışması ve iletilen etkinliklerin ayrıntılı günlüklerini görmek için tarayıcınızın geliştirici konsolunu açın. Bu, aşağıdakileri doğrulamak için kullanışlıdır:
- Geçiş komut dosyası, ödeme iframe'den ping alır.
- GA4, doğru ölçüm kimliği ile yapılandırılır.
- Etkinlikler
gtag'a iletilir.
Sık sorulan sorular
createTempCart API çağrımı değiştirmem gerekir mi?
Hayır. Geçiş sistemi createTempCart API'den bağımsız olarak çalışır. Sayfanıza GA4 etiketini ve geçiş komut dosyasını eklemeniz yeterlidir.
Zaten Google Analytics için footerHTML kullanıyorsam ne olur?
createTempCart API'deki footerHTML parametresi, komut dosyalarını ödeme iframe'ne enjekte eder; bu, iframe kaynağı içinde sayfa düzeyinde etkinlikleri izlemekle sınırlıdır. Geçiş yaklaşımı önerilir çünkü etkinlikleri kendi alan adınızda kendi GA4 özelliğinize gönderir ve size tek bir özellikte tam huni görünürlüğü verir.
footerHTML'dan GA4 komut dosyalarını geçişi ayarladıktan sonra güvenli bir şekilde kaldırabilirsiniz.
Bu, Google Analytics'te GA4 hata ayıklama modu ile çalışır mı?
Evet. Tarayıcınızın geliştirici konsolunda geçiş komut dosyası günlüklerini etkinleştirmek için zonosDebug=1 kullanabilir ve etkinlikleri gerçek zamanlı olarak doğrulamak için Google Analytics'te GA4 DebugView kullanabilirsiniz.
Test siparişleri izlenir mi?
Tüm etkinlikler bir isTestMode alanı içerir. Checkout test modundayken, etkinlikler yine de GA4'e gönderilir ancak isTestMode: true ile işaretlenir. Gerekirse özel boyutlar kullanarak GA4'te bunları filtreleyebilirsiniz.
iframe Checkout için Google Analytics 4
iframe tabanlı eski Checkout entegrasyonunu kullanırken GA4 ile tam ödeme hattını izleyin.
Eski Checkout entegrasyonunu kullanan (iframe
iglobalstores.comüzerinde barındırılan) tüccarlar artık tam ödeme hattı boyunca GA4 analitik etkinliklerini izleyebilir. Zonos Checkout, hafif bir geçiş komut dosyası kullanarak iframe'den analitik etkinliklerini üst sayfaya otomatik olarak aktarır, böylece etkinlikler GA4 özelliğinizde kendi sitenizden kaynaklanmış gibi görünür.