Shopify'da dataLayer ve Ek Değişkenleri Frame Bazında İzlemek

Console’dan dataLayer debug etmek kimi zaman uğraştırıcı bir hal alabilir. Storefront tarafında dataLayer için GTM (Google Tag Manager) Preview Mode, diğer değişkenler için console’a ilgili değişkeni yazmak yeterli olabilir. Ancak GA4 (Google Analytics 4) veya Google Ads’e giden bir hit’in verisi başka değişkenlerden de gelebilir ya da sayfada yapılan bir işlem bir değişkenin değerini değiştirebilir. Bunları paralelde ve zaman içindeki değişimleriyle takip etmek gerekebilir.

E-ticaret platformunun ve etiketlerin kendi değişkenleri de bu takibin kapsamına girebilir:

• Shopify’da window.Shopify, diğer e-ticaret platformlarında window.globalModel, window.MEMBER_INFO ve benzeri değişkenler
• gtag durumu için window.google_tag_data
• Microsoft Advertising için uetq gibi bir kuyruk ya da bir tag yönetim aracının utag_data nesnesi
• Bir uygulamanın loglarını topladığı bir değişken

Bu değişkenler sayfa boyunca değişir: bir kuyruğa yeni kayıt eklenir, bir nesnede anahtar eklenir ya da değer güncellenir. Shopify gibi pixel’leri sandbox içinde çalıştıran platformlarda ise kayıtların bir kısmı bu ayrı ortamda oluşur ve üst sayfadan görünmez.

Mevcut dataLayer eklentilerini kullandığımda arayüz olarak daha özenli olduklarını, ancak gereken işlevi tam karşılamadıklarını gördüm: Shopify pixel yapılarını kararlı biçimde desteklemiyorlardı, push edilen kayıtları türe göre ayırma, gruplama ve yeni bir değişkeni kapsama dahil etme gibi özellikler de yoktu. Bu yüzden dataLayer’ı öncelikli tutan, ama ek değişkenleri, nesne değişimlerini ve pixel frame’lerini aynı panelde izleyen daha minimal ve işlevsel bir araç yazdım: Data Layers Inspector, bir Chrome extension. Bu yazı aracın neyi okuduğunu ve neyi okumadığını anlatıyor.

Console ve Preview ile Takip

Storefront’ta tipik akış şöyledir: Preview Mode’da event’lere bakılır, gerekirse console’da dataLayer ile uetq, utag_data veya sitenin kendi nesneleri gibi diğer değişkenler tek tek çağrılır. Her çağrı yalnızca o anki durumu gösterir; bir değişkenin zaman içinde nasıl değiştiğini görmek için aynı işlemi tekrar tekrar yapmak gerekir. Sayfa değiştiğinde önceki sayfanın değişkenleri artık okunamaz ve aynı adımlar yeni sayfada baştan başlar. Console’a başka kaynaklardan gelen loglar, JavaScript hataları ve başarısız isteklerin hataları da düşüyorsa, bir noktadan sonra console’u bu takip için kullanmak pratik olmaktan çıkar.

Kuyruklar ve Nesneler: Eklenti Neyi Okur

dataLayer bir dizidir; her push yeni bir kayıt ekler ve geçmiş kayıtlar yerinde kalır. Ek kuyruklar da aynı mantıkla çalışır. Global nesnelerde ise değerlerin üzerine yazılır. Bu yüzden bir değişikliğin ne zaman ve hangi anahtarda olduğu sonradan okunamaz. Eklenti bu iki türü ayrı ele alır:

Tür	Örnek	Panelde ne üretir
Dizi (kuyruk)	dataLayer, uetq	Her yeni öğe için bir push kaydı
Nesne (snapshot)	utag_data, sitenin kendi nesnesi	Önce bir ilk görüntü, sonra değişen anahtarlarla başlıklandırılmış kayıt

Varsayılan dizi window.dataLayer’dır. Ek adlar Settings bölümünden girilir; bunlar window üzerinde doğrudan tanımlı global adlar olmalıdır, noktalı yollar desteklenmez. location, localStorage ve sessionStorage gibi tarayıcı nesneleri reddedilir.

Okuma yoklama (polling) ile yapılır: diziler ve nesneler 500 ms’de bir okunur. Bu yüzden iki okuma arasında yapılıp geri alınan bir değişiklik görünmez, sabit uzunluklu bazı kuyruklarda art arda gelen aynı push’lar birbirinden ayırt edilemez.

Shopify Pixel Sandbox’larında Kayıtlar

Shopify, pixel’leri Lax veya Strict sandbox içinde çalıştırır.¹ Custom pixel’e GTM kurulduğunda container o sandbox’ın içinde yüklenir ve kendi dataLayer’ına yazar. Üst sayfanın console’unda dataLayer yazmak bu kayıtları göstermez. DevTools’ta önce ilgili frame’in bağlamını seçmek gerekir.

Shopify tarafında karşılaştığım sınırlardan biri, checkout adımlarında GTM Preview Mode’un pixel içinde çalışan dataLayer içeriğini görüntüleyememesi. Bazı eklentiler bunu sayfaya kendi GTM snippet’lerini ekleyerek çözüyor. Ancak bu durum bazı event’lerin de yeniden tetiklenmesi anlamına gelebiliyor. Elbette bu yöntem, özellikle GTM içindeki JavaScript müdahalelerinin sonuçlarını görmek için hâlâ geçerli. Öte yandan dataLayer ile birlikte diğer değişkenleri de izlemek gerektiğinde ayrı bir kontrol alanı gerekiyor. Seçenekleri değerlendirdikten sonra bu yolu izlemek yerine her frame’in kuyruklarını doğrudan okuyan bir panel yazdım. Snippet ekleyen eklentiler ise gerektiğinde kullanılabilecek bir seçenek olarak duruyor.

Eklentinin panelinde Shopify pixel frame’leri, pixel’in yönetim panelindeki adıyla birlikte listelenir. Bu ad yalnızca sandbox’ın üst sayfadan aldığı başlatma mesajından okunur. Mesajın biçimi belgelenmiş bir arayüz değil. Shopify bu biçimi değiştirirse ad gelmez ve yerine frame etiketi kullanılır.

Panelde Okumak: Sayfa, Frame ve Kayıt

Kayıt oturumu sitede başlatılır: eklenti kurulumda tüm sitelere erişim istemez. Panelde açıklama okunur, Allow and start recording ile o HTTPS sitesine izin verilir ve sekme yeniden yüklenir. Oturum yalnızca o sekme ve sekmedeki izin verilen frame’ler için geçerlidir.

Panelde sayfa ve frame ayrı ayrı seçilir; frame listesi container kimliklerini gösterir. Kayıtlar sayfa sayfa tutulur, böylece checkout boyunca sayfalar arasında geçmiş kaybolmaz. Bir kayıt açıldığında içeriği listelenir; config ve get kimlikleri, send_to hedefleri ve container kimlikleri rozet olarak görünür.

Okumayı hızlandıran araçlar:

• Filtreler: Events, Consent, Config ve Lifecycle, kaydın ham komut veya event türüne göre çalışır.
• Arama: başlıklarda ve içerikte çalışır; eşleşmenin başka bir sayfada veya frame’de olduğu da seçicilerde gösterilir.
• Gruplama: art arda gelen aynı başlıklı kayıtları birleştirir.
• Pause: görünen listeyi dondurur, kayıt oturumu arka planda sürer.

Bir kaydın tamamı her zaman saklanamaz. Derinlik sınırı, uzun metinler veya okunamayan değerler kesintiye yol açabilir; bu durumda panel kesintinin yerinde bir not gösterir. Eksik veriyi tam veri gibi göstermemek, yanlış teşhisi önlemek için gerekli.

Inspect Signals ile Birlikte

İki eklentiyi birlikte kullanıyorum, çünkü farklı soruları yanıtlıyorlar:

Soru	Araç
Site hangi veriyi push etti, nesnede ne değişti?	Data Layers Inspector
Tarayıcı Google’a hangi isteği gönderdi?	Inspect Signals

Bir purchase hit’inde value yanlışsa, önce Inspect Signals ile hit’in hangi katmandan geldiğine, sonra Data Layers Inspector ile o katmanın frame’inde push edilen kayda bakıyorum. Kayıttaki değer doğruysa sorun büyük ihtimalle etiket yapılandırmasındadır; yanlışsa verinin kaynağında.

Data Layers Inspector GTM container’ı üzerinde bir işlem yapmaz; etiketleri, trigger’ları ve GTM değişkenlerini (variable) göstermez.

Maskeleme ve Kayıt Süresi

Ölçüm verisi kişisel veri taşıyabilir. Bilinen kişisel anahtarlar, user_data ve adres alt ağaçları ile e-posta kalıpları depolanmadan önce maskelenir. Sayfa etiketlerinden sorgu dizesi ve adresin # sonrası bölümü çıkarılır. Maskeleme en iyi çaba ilkesiyle çalışır, anonimleştirme değildir; tanınmayan bir kişisel değer kalabilir.

Ham değerler her kayıt oturumu için ayrıca açılır ve her Start ham modu yeniden kapatır. Kayıtlar tarayıcının oturum belleğinde tutulur; sekme kapanınca silinir. Her frame en fazla 500 kayıt saklar, sekmeler ve frame’ler yaklaşık 8 MB’lık bir bütçeyi paylaşır. Eski kayıtlar çıkarıldığında kaç kaydın düştüğü panelde görünür. Export seçili sayfa ve frame’in kaydını JSON olarak yazar.

Sınırlar ve Kararlar

• Eklenti neyin push edildiğini gösterir, hangi etiketin tetiklendiğini göstermez. Bunu alternatif eklentilerle çözüyorum. Bu özelliğin eklenip eklenmemesi konusu zihnimde o kadar da net değil. Farklı bir bağlam belirleyebilirsem elbette bu da eklenebilir.
• Strict sandbox’ta, worker içinde çalışan pixel’ler bu okuyucunun dışındadır; yalnızca HTTPS adresli frame’ler okunur.
• Başka bir alan adındaki frame için o alan adına ayrıca izin vermek gerekir; about:blank, data: ve blob: belgeleri okunmaz.
• Sayfanın kendi JavaScript’i kayıt üretebilir veya değiştirebilir; panel bir denetim kaydı değil, bir hata ayıklama görünümüdür.
• Pixel adı Shopify’ın belgelenmemiş başlatma mesajına dayanır; biçim değişirse ad görünmez.

İlgili Yazılar

• Shopify’da GA4 ve Ads Sinyallerinin Kaynağını Bulmak
• dataLayer Nasıl Çalışır? GTM, gtag.js ve Consent Mode’un Ortak Katmanı
• Shopify Metafield ile Custom Pixel Arası Köprü: Cart Attribute Pattern’i
• Shopify’da Google Ads Conversion Çift Sayımı: Webpages Raporu ve Checkout Token ile Teşhis

Footnotes

1. Web Pixels API (Shopify). “For app developers integrating app web pixels, pixels are loaded in a strict sandbox.” Sayfa pixel’lerin “one of our Lax or Strict sandboxes” içinde çalıştığını da belirtir. ↩

Önemli Noktalar

• 01 Console ve Preview Mode ile dataLayer okunabilir, ancak uetq gibi ek kuyrukları ve utag_data gibi global nesneleri her sayfada tek tek çağırmak gerekir; eklenti bunları aynı panelde sayfa ve frame bazında tutar.
• 02 Diziler push kaydı üretir; nesneler ise ilk görüntü ve ardından değişen anahtarlarla başlıklandırılmış kayıtlar üretir.
• 03 Shopify custom pixel'leri ayrı bir sandbox frame'inde çalışır; o frame'in dataLayer'ı üst sayfanın console'undan görünmez ve frame seçilerek okunur.
• 04 Eklenti neyin push edildiğini gösterir, hangi etiketin tetiklendiğini göstermez; tarayıcıdan giden istekler için Inspect Signals ile birlikte kullanılabilir.
• 05 Maskeleme her kayıt oturumunda varsayılan olarak açıktır ve en iyi çaba ilkesiyle çalışır; ham değerler her oturum için ayrıca açılır.

Sık Sorulan Sorular (FAQ)

+ Shopify custom pixel içindeki dataLayer neden üst sayfanın console'unda görünmüyor?

Custom pixel kodu ayrı bir sandbox iframe'inde çalışır ve kendi window nesnesine sahiptir. Üst sayfadaki window.dataLayer bu frame'in dizisi değildir. Kayıtları görmek için DevTools'ta o frame'in bağlamını seçmek ya da frame bazında okuyan bir araç kullanmak gerekir.

+ Data Layers Inspector GTM etiketlerinin tetiklenip tetiklenmediğini gösterir mi?

Hayır. Eklenti sitenin push ettiği kayıtları ve seçilen nesnelerin değişimlerini gösterir. Etiketlerin, trigger'ların ve GTM değişkenlerinin (variable) durumu Preview Mode'un konusudur; tarayıcıdan giden istekler için Inspect Signals kullanılabilir.

+ Hangi ek kuyruklar veya nesneler izlenebilir?

Settings bölümüne window üzerinde doğrudan tanımlı en fazla 20 global ad eklenebilir, örneğin uetq veya utag_data. Noktalı yollar desteklenmez; location, localStorage ve sessionStorage gibi tarayıcı nesneleri reddedilir.

+ Kaydedilen veriler bir yere gönderiliyor mu?

Hayır. Eklentinin sunucusu, analitiği veya uzaktan kodu yoktur. Kayıtlar tarayıcının oturum belleğinde tutulur, sekme veya tarayıcı kapanınca silinir. Dışa aktarma yalnızca Export düğmesine basıldığında bir dosya yazar.