Web sayfasıyla Google Tag Manager taşıyıcısı (container) arasında bilgi taşımayı sağlayan JavaScript nesnesi olarak açıklanabilir. İletilen bu bilgiyi Google Tag Manager tarafından sunulan değişkenler ve tetikleyiciler ile düzenlemek, kontrol etmek ve geliştirmek mümkündür. Google Tag Manager web sayfası içeriğinde bulunan (referans değişkenler, işlem bilgileri, sayfa kategorileri ve diğer bilgiler) sinyaller yerine data layer olarak tanımlanan bilgileri referans almaktadır. Bu bilgiler Facebook Pixel olaylarını GTM taşıyıcısı bünyesinde yapılandırdığımız durumlarda da ortak bir şekilde kolaylıkla kullanılabilmektedir.

Data Layer Nedir?

Bir web sayfasına ve/ya mobil uygulamaya GTM kurulduğunda ve data layer yapısı oluşturulduğunda bir sonraki aşama katman dahilinde hangi bilgilerin değerlendirileceği olmalıdır. Dikkat etmemiz gereken bir diğer hususta GTM’nin yüklendiği anda 3 event’i işleme almasıdır.

  • gtm.js GTM kodu yüklendiği anda oluşturulur. PageView gibi sayfa ziyaretçi tarafından görüntülendiği anda tetiklenmesini istediğimiz durumları bu etkinlikle ilişkilendiririz.
  • gtm.dom DOM (Document Object Model) yüklendiği anda oluşturulur.
  • gtm.load sayfa ve sayfadaki tüm elemanlar (görseller, CSS ve JavaScript dosyaları vb.) yüklendiğinde oluşturulur. Elemanlar üzerinde işlem gerçekleştirileceği durumlarda gtm.load etkinliğinden faydalanılır.

Peki, bu etkinlikler ve veri katmanı sayesinde kullanabileceğimiz veriler neler?

  • Ürün verileri (özellikle e-ticaret sitelerinde, ürün adı, fiyatı, kategorileri, tip ve varyeteler gibi bilgiler vb.)
  • Pazarlama kampanyaları (kampanya adı, aracı, kaynak, yönlendirici, promosyonlar vb.)
  • İşlem bilgileri (sepet içeriği, sepete ekleme/çıkarma, ödeme biçimleri, işlem tarihleri vb.)
  • Müşteri bilgileri (yeni ve/ya geri gelen müşteri, kayıtlı kullanıcı vb.)

data layer işlemleri şu yapı içerisinde tanımlanır:

<script>
  dataLayer = [];
  dataLayer = [{
    // ...
  }];
  dataLayer.push({'degiskenAdi': 'degiskenDegeri'});
</script>

Eğer bilgi bir eylem ve/ya olay ile işlenecekse dataLayer.push() ile uygulanır.

<a href="#" onclick="dataLayer.push({'degiskenAdi': 'degiskenDegeri'});">Bağlantı</a>

Her iki durum için de bir örnek oluşturalım.

<script>
  dataLayer = [{
    'bookCategory': 'Fiction',
    'bookTitle': 'Jonathan Livingston Seagull',
    'bookAuthor': 'Richard Bach'
  }];
</script>
<a href="#" onclick="dataLayer.push({'bookCategory': 'Fiction', 'bookTitle': 'Jonathan Livingston Seagull', 'bookAuthor': 'Richard Bach'});">Bağlantı</a>

Önemli bir not; data layer her zaman GTM snippet öncesinde tanımlanmalıdır. Böylelikle GTM ve diğer snippetler ihtiyaç duydukları veri içeriklerine sahip olabilirler. Şayet bir nedenden dolayı data layer içeriğini GTM öncesinde oluşturamıyorsanız veriyi gtm.dom, veriyi kullanacak etiketi de gtm.load ile ilişkilendirebilirsiniz.

GTM Değişken Tanımlama

Tanımlama sürecindeki ilk aşama hangi bilgileri ne amaçla kullanacağınızı netleştirmek olmalı. Ardından gerekli parametreleri istediğimiz yapılar içerisinde kolaylıkla kullanabilir ve geliştirebiliriz. Diğer durumda sadece bir veri kalabalığı oluşturmuş olacağız.

GTM taşıyıcısı altında Variables > User-Defined Variables > New Variable için bir ad / başlık tanımladıktan sonra Variable Configuration bölümünden değişken yapılandırmasını gerçekleştirebiliriz. İlgili alanı tıkladığımızda Choose variable type başlığı altında pek çok alt başlıkta, farklı tip ve özellikle seçeneklerle (HTTP Referrer, Custom JavaScript, Data Later Variable, DOM Element, Constant ve dahası) karşılaşacağız. Bu aşamada bizim için önemli olan Data Layer Variable seçeneği.

Data Layer kullanımı için Data Layer Variable için bir isim oluşturmamız gerekir. Burada dikkat edilmesi gereken tanımladığımız isim üzerinden bu veri katmanına ulaşabilecek olmamız. Bu nedenle yukarıdaki örnek kod üzerinden ilerleyecek ve bookTitle başlığını vereceğim. Herhangi bir yazım farklılığı olmaması önemli. Örneğin book title ya da book_Title gibi bir başlık verdiğinizde ilgili bilgiye erişim sağlamamız mümkün olmayacaktır.

Çoğu durumda Data Layer Version ön tanımlı olarak Version 2 şeklinde kullanılır. Başka bir yazı altında data layer sürüm farklılığından ayrıca bahsedeceğim.

Artık Save butonunu tıklayarak ilgili variable tanımlama işlemini onaylayabilir ve bookCategory ve bookAuthor gibi diğer alanları oluşturmaya geçebiliriz.

Kitap örneğinin dışında bir de sayfa nezdinde kullanıcı tanımlı bir değer oluşturalım.

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

Örneğimiz üyelik temelinde kullanıcılara bir değer atfediyor ve data layer içerisinde bu değeri kullanıyoruz. Yani, bir kullanıcı eğer kayıt olmuşsa 'pageCategory': 'signup' bizim için artık high-value değerini alıyor 'visitorType': 'high-value' ve böylelikle sonraki etkinlikleri çerçevesinde bu bilgiyi pek çok amaçla kullanabiliyoruz.

Elbette örneklerimizi daha da genişletebiliriz. Örneğin, HTML etkinliklerini dahil edebiliriz.

dataLayer.push({'event': 'etkinlikAdi'});

etkinlikAdi kullanıcı ilişkili (link ve buton tıklama gibi) etkinlikler olabilir. Aşağıdaki örnekte yer alan link1-click ifadesini istediğiniz gibi düzenleyebilirsiniz.

<a href="#" name="button1" onclick="dataLayer.push({'event': 'link1-click'});" >Bağlantı 1</a>

Bu amaçla ön tanımlı event değişkenini kullanacağız. Örnek bir uygulama olarak Contact Form 7 Dönüşüm Tanımlama başlıklı yazımda WordPress eklentisi olan CF7 formunu nasıl takip edebildiğimizi görebilirsiniz.

Data Layer Ad Tanımlama

Yukarıdaki örneklerde data layer tanımlama işlemini dataLayer ile gerçekleştirdik. Ancak bu bir kural değil ve farklı isimlerle de benzer veri iletimi işlemlerini gerçekleştirebiliriz. Sadece yapmamız gereken belirlediğimiz ismi GTM tarafında da işaretlemek.

<script>
  yeniLayerAdi = [{
    // ...
  }];
  yeniLayerAdi.push({'degiskenAdi': 'degiskenDegeri'});
</script>

İsim değişikliği sonrasında bilgileri edinmek için GA kurulumu ve diğer alanlarda Veri katmanı kullan seçeneği altında yani isimlendirdiğimiz veri katmanı ismini seçmemiz gerekir. İlgili yönergeyi Data Layer Ad Tanımlama başlığı altındaki görselde görebilirsiniz.

JavaScript Desteği Olmadan Data Layer Kullanımı

GTM kurulumunda snippet haricinde yer alan iframe JavaScript sorunu yaşanması ya da JavaScript desteği olmaması durumunda GTM mülkünün işlenmesini sağlamaktadır. GTM kullanımı çerçevesinde JavaScript dışında bu iframe üzerinden de veri katmanı aracılığıyla bilgiler iletebilmekteyiz.

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX&degiskenAdi=degiskenDegeri&degiskenAdi2=degiskenDegeri2" height="0"
                  width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Yukarıdaki örnekte görüleceği üzere id=GTM-XXXX, degiskenAdi=degiskenDegeri, degiskenAdi2=degiskenDegeri2 tanımlamaları mevcut. id ile GTM mülkümüzü işaretlemiş ve sonraki değerleri bu id tanımlı hesaba iletiyoruz.

Transaction Data İletimi

data layer aracılığıyla işlem bilgilerini paylaşabileceğimizi yazının başında belirtmiştim. Bu işlemleri Google Analytics ile paylaşırken 2 ana tip üzerinden ilerleyebilmekteyiz; Standard ecommerce ve Enhanced ecommerce.

Standard Ecommerce

Standard ecommerce kullanımında Google Analytics satın alma sürecini ve ödeme işlemlerini site ve/ya uygulama üzerinden takip eder. Panel üzerinden ürün ve ödemelere dair bilgiler ve dönüşüm oranları kolaylıkla takip edilebilir.

Bu işlemlerin gerçekleştirilebilmesi için Google Analytics kurulumunda ecommerce özelliğini aktifleştirmeniz gerekmekte.

Ardından Kurulum içerisindeki İzleme Türü‘nü İşlem olarak belirleyip Firing Trigger altında ödeme sonuç sayfasına ait URL’i belirtebilirsiniz. Bu sayede sayfa içerisinden şu bilgileri Google Analytics raporlarına aktarabiliriz.

İşlem Verileri (Transaction Data)
Değişken AdıAçıklamaVeri Türü
transactionId (zorunlu)Benzeriş işlem kimliğistring
transactionAffiliation (opsiyonel)Partner ya da mağazastring
transactionTotal (zorunlu)Toplam işlem tutarınumeric
transactionShipping (opsiyonel)Kargo ücretinumeric
transactionTax (opsiyonel)Vergilendirme ve benzeri diğer ek ücretlernumeric
transactionProducts (opsiyonel)İşlem içerisindeki ürünlerürün nesneleri dizisi (array)

Tabloyu bir örnekle göstermek gerekirse;

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
   'transactionId': '1234',
   'transactionAffiliation': 'Acme Clothing',
   'transactionTotal': 38.26,
   'transactionTax': 1.29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'T-Shirt',
       'category': 'Apparel',
       'price': 11.99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'Hat',
       'category': 'Apparel',
       'price': 9.99,
       'quantity': 2
   }]
});
</script>

Özellikle transactionProducts alanına baktığınızda ürüne ait alt verilerin dahil edildiğini görebilirsiniz. Bu özellik yukarıda bahsi geçen Data Layer Version alanında yer alan Version 2 sayesinde mümkün hale gelmektedir. Ürün verilerini ayrı bir tablo haline getirerek görüntüleyelim.

Ürün Verileri (Product Data)
Değişken AdıAçıklamaVeri Türü
name (zorunlu)Ürün adıstring
sku (gerekli)Ürün SKU (Stock Keeping Unit / Stok Tutma Birimi) numarasıstring
category (opsiyonel)Ürün kategorisistring
price (gerekli)Ürün fiyatınumeric
quantity (gerekli)Ürün adedinumeric

Enhanced Ecommerce

Enhanced ecommerce kullanımında ise Standard ecommerce işlemlerini geliştirerek daha kapsamlı bilgileri raporlara dahil edebiliriz; sepet işlemleri, ödeme süreci adımları ve kullanıcıların ödeme sürecindeki durumları bunlardan bazıları. Enhanced ecommerce işlemlerini GTM üzerinde gerçekleştirmek için 2 metoddan faydalanabiliriz. Bunlardan ilki Daya Layer, diğeri ise Custom JavaScript variable. Data layer, çoğunlukla tercih edilen metoddur ve ecommerce verilerinin doğrudan data layer ile iletilmesiyle işlenir. Custom JavaScript variable kullanımında ise data layer içeriği olarak konumlandırılacak veriler bir nesne olarak yeni bir Custom JavaScript variable içerisinde iletilir.

Örnek bir Custom JavaScript variable içeriği şu şekildedir:

function() {
 var ecommerceData = {
   'ecommerce' : {
     currencyCode : 'TRY',
     // ihtiyaç duyduğumuz ek parametreler
   }
 };
 return ecommerceData;
}

Örnekte yer alan ecommerceData variable değiştirilebilir.

Yukarıdaki örnekler ve ilgili teknik detaylara dair Enhanced Ecommerce (UA) Developer Guide sayfasını inceleyebilirsiniz.

One reply on “Data Layer (dataLayer) Nedir? Nasıl Kullanılır?

Leave a Reply