Google Tag Manager dataLayer ve E-Ticaret Etkinlikleri
Google Analytics E-Ticaret Raporları ve Etkinlik Kurulumları ve Patreon'da yayınladığım Google Analytics E-Ticaret Kurulum ve Rapor Özellikleri başlıklı yazılarda Google Analytics e-ticaret etkinliklerinin nasıl kurulması gerektiğinden ve ilgili parametrelerin hangi raporlar ile ilişkili olduğundan bahsetmiştim.
Bu yazıda ise e-ticaret etkinliklerini Google Tag Manager vasıtasıyla kullanabileceğimizden ve gtag karşılıklarından bahsedeceğim.
Öncelikle dataLayer konusunu tekrar hatırlayalım.
dataLayer
dataLayer, müşteri deneyimi ile ilgili verilerin web veya diğer dijital kaynaklarda JavaScript Nesnesi (JavaScript Object) olarak tutulmasını, dijital analiz ve raporlama sunucularına iletilmesini sağlayan, pek çok organizasyon tarafından da (Google, Adobe, Yandex, vb.) bir methodu ifade etmektedir. dataLayer bu nesnenin sıklıkla kullanılan bir adı olsa da farklı tanımlar altında da aynı işlem gerçekleştirilebilmektedir. Örneğin, Customer Experience Digital Data Layer 1.01 içerisinde yapı digitalData olarak adlandırılmaktadır.
Google Tag Manager ve Global Site Etiketi kodları içerisindeki tanımlama dataLayer olduğu için ben de örneklerde bu şekilde ilerleyeceğim. Bu tanımı değiştirmek istediğiniz ya da web sitenizde veya uygulamanızda var olan bir JavaScript nesnesi ile bu kondu ilişkilendirmek istediğinizde kurulum kodlarındaki ilgili alanları güncellemeniz gerekir2.
// Google Tag Manager (gtm)
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TRGXFL');
// Global Site Tag (gtag)
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-59809868-2');
Bu konu ile ilgili olarak daha önce yayınladığım Data Layer (dataLayer) Nedir? Nasıl Kullanılır? başlıklı yazıya göz atabilirsiniz.
Google Tag Manager ve dataLayer
dataLayer'ın bir JavaScript nesnesi olduğundan bahsettik. Dolayısıyla, internet tarayıcısının console alanını kullanarak bu nesnenin içeriğini dataLayer
veya window.dataLayer
yazarak görüntüleyebiliriz. Bu nesne bir global değişken olarak tanımlanmaktadır. JavaScript global nesneleri internet tarayıcısı tarafında window
Node.js global
olarak ifade edilir3. Biz elbette internet tarayıcısı ile açıklamalarımıza devam edeceğiz. Ancak burada bir not eklemekte fayda var. Bu veri katmanı tanımı (dataLayer) Google Tag Manager kapsayıcı snippet'in üzerinde tanımlanmalıdır. Aksi durumda, Google Tag Manager tarafından da yürütülen veri katmanı içeriğine ekleme yapılmamış, içerik değiştirilmiş olur.
Bir deneme yapalım ve console alanına dataLayer
yazalım. Alacağımız dönüş 0: Object { "gtm.start": 1602931942224, event: "gtm.js" }
olacaktır. Şimdi aşağıdaki kod parçacağını Google Tag Manager kapsayıcı snippet'i öncesinde konumlandıralım ve sayfayı yeniledikten sonra yine console üzerinden dataLayer
içeriğini döndürelim.
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
Görüldüğü üzere dataLayer
içerisinde yeni değişkenlerimiz yer almakta.
0: Object { pageCategory: "signup", visitorType: "high-value" }
1: Object { "gtm.start": 1602932141963, event: "gtm.js" }
Şimdi, bu değişkenleri Google Tag Manager kapsayıcı snippet'i sonrasında konumlandırıp tekrar console üzerinden içeriği görüntüleyelim. Alacağımız dönüş ilkinden farklı olacaktır.
0: Object { pageCategory: "signup", visitorType: "high-value" }
Görüldüğü üzere artık gtm.start
tanımlı değil. Yeni tanımlarımız önceki tanımların kaybına neden oldu. Peki, bu durumun bir çözümü yok mu? Var elbette. dataLayer
bir JavaScript nesnesi olduğuna göre bu nesneye yine JavaScript ile müdahale edebiliriz. push()
metotu da kullanabileceğimiz seçeneklerden biri. Bu metot sayesinde bu nesneyi değiştirmek yerine nesne içerisine eklemeler yapabiliriz.
dataLayer.push({'degiskenAdi': 'degiskenDegeri'});
Yukarıdaki işlemi Google Tag Manager kapsayıcı snippet'i öncesinde kullanmak istediğimizde öncesinde dataLayer
objesi oluşturulmadığı için Uncaught ReferenceError: dataLayer is not defined
hatasını alırız. Değişken tanımı Google Tag Manager kapsayıcı snippet'i içerisinde bulunduğu için push()
metotunu snippet sonrasında hatasız bir şekilde kullanabiliriz. Peki, daha genel bir çözümümüz yok mu?
Var elbette, değişkeni kontrol edip eğer tanımlı değilse tanımlayabiliriz.
window.dataLayer = window.dataLayer || [];
dataLayer.push({'degiskenAdi': 'degiskenDegeri'});
// veya
window.dataLayer.push({'degiskenAdi': 'degiskenDegeri'});
Yukarıdaki kodu Google Tag Manager kapsayıcı snippet'i öncesinde veya sonrasında kullanabiliriz. Artık bir hiyerarşi takip etmek durumunda değiliz.
0: Object { degiskenAdi: "degiskenDegeri" }
1: Object { "gtm.start": 1602932828874, event: "gtm.js" }
Bu bilgiyi bir kenara not edin. Çünkü, e-ticaret etkinlikleri çerçevesinde verinin kontrolü için sıklıkla console üzerinden kontroller gerçekleştireceğiz. Elbette console dışında da kontroller yapmamız gerekiyor. Örneğin, gerçekleştirilen bir işlemin eğer Google Tag Manager tarafında karşılığı yoksa gözardı edilecektir. Dolayısıyla, parametrelerimizi de belirli kurallar çerçevesinde kullanmamız gerekir.

Bu amaçla kullanabileceğimiz diğer eklentiler ise, Chrome internet tarayıcısı için Google tarafından geliştirilen Google Tag Assistant ve Adswerve tarafından sunulan Adswerve - dataLayer Inspector+4, Firefox için dataslayer'dir5.

Ön bilgilendirmeler de tamamlandığına göre, ecommerce
etkinlikleri üzerinden dataLayer işlemlerine geçebiliriz.
dataLayer ve E-ticaret (eCommerce) Etkinlikleri
Aşağıdaki işlemleri hem Enhanced Ecommerce (UA), hem de Ecommerce (GA4) için dataLayer.push()
ile gerçekleştireceğiz2. Elbette bu etkinliklerin işleme alınabilmesi için Google Analytics kodumuzun da Google Tag Manager üzerinden tanımlanmış olması, geliştirilmiş E-ticaret özelliğinin (true) ve veri katmanı seçiminin aktifleştirilmesi gerekmektedir.
Enable Enhanced Ecommerce Features: true
Use Data Layer: true

Artık e-ticaret etkinliklerimizi kullanmaya başlayabiliriz.
- W3.org (2013). Customer Experience Digital Data Layer 1.0. (pdf) ↩
- Renaming the Data Layer. Google Tag Manager ↩ ↩
- Javascript.info. (2020). Global object ↩
- Adswerve - dataLayer Inspector+. Chrome Extention ↩
- dataslayer. Firefox Extension ↩
- Measuring Product Clicks. Google Tag Manager ↩
- Measure product/item list clicks. Google Tag Manager ↩