Google Tag Manager dataLayer ve E-Ticaret Etkinlikleri

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.0¹ 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 gerekir².

// 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 edilir³. 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+⁴, Firefox için dataslayer'dir⁵.

Ö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ğiz². 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.