Veri katmanı

Veri katmanı, Google Etiket Yöneticisi ve gtag.js tarafından etiketlere bilgi aktarmak için kullanılan bir nesnedir. Etkinlikler veya değişkenler veri katmanı üzerinden iletilebilir ve tetikleyiciler, değişkenlerin değerlerine göre ayarlanabilir.

Örneğin, purchase_total değeri 100 ABD dolarından büyük olduğunda veya belirli etkinliklere (ör. bir düğme tıklandığında) göre bir yeniden pazarlama etiketi tetiklerseniz veri katmanınız, bu verileri etiketlerinize sunacak şekilde yapılandırılabilir. Veri katmanı nesnesi JSON olarak yapılandırılmıştır. Örneğin:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Google etiketleri, değişkenleri, işlem bilgilerini, sayfa kategorilerini ve sayfanızda dağınık halde bulunan diğer sinyalleri ayrıştırmak yerine veri katmanına eklenen bilgileri düzenli ve tahmin edilebilir bir şekilde kolayca referans verecek şekilde tasarlanmıştır. Değişkenler ve ilişkili değerlerle doldurulmuş bir veri katmanı uygulaması, etiketleriniz ihtiyaç duyduğunda alakalı verilerin kullanılabilir olmasını sağlar.

Kurulum

Etiket Yöneticisi web sayfası yüklemeleri için bir veri katmanı oluşturmanız gerekir. Aşağıda vurgulanan kod, Etiket Yöneticisi yüklenmeden önce veri katmanının nerede oluşturulduğunu gösterir.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(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-XXXXXX');</script>
<!-- End Google Tag Manager -->

Etiketin ürün içinden kopyalanıp bir web sayfasına eklendiği standart gtag.js uygulamalarında, veri katmanını oluşturacak kod sağlanır. Google etiketinin özel uygulamalarında, veri katmanı kodunu aşağıdaki vurgulanan örnekte gösterildiği gibi komut dosyanızın başına ekleyin:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Veri katmanı bilgilerinin işlenme şekli

Bir kapsayıcı yüklendiğinde Etiket Yöneticisi, sıraya alınan tüm veri katmanı push mesajlarını işlemeye başlar. Etiket Yöneticisi, iletileri ilk gelen ilk çıkar prensibiyle işler: Her ileti, alındığı sırayla tek tek işlenir. Mesaj bir etkinlikse Etiket Yöneticisi sonraki mesaja geçmeden önce koşulları tetiklenen tüm etiketler tetiklenir.

Sayfada, Özel Şablonda veya Özel HTML etiketinde kod tarafından gtag() veya dataLayer.push() çağrısı yapılırsa ilgili mesaj, bekleyen diğer tüm mesajlar değerlendirildikten sonra sıraya alınır ve işlenir. Yani, güncellenen veri katmanı değerlerinin bir sonraki etkinlik için kullanılabileceği garanti edilmez. Bu tür durumları yönetmek için, veri katmanına aktarılırken mesaja etkinlik adı eklemeniz ve ardından bu etkinlik adını Özel Etkinlik tetikleyicisi ile dinlemeniz gerekir.

Etkinlik işleyicileriyle veri katmanı kullanma

dataLayer nesnesi, etkinliklerin gönderilmesini başlatmak için bir event komutu kullanır.

Google etiketi ve Etiket Yöneticisi, kullanıcı web sitesi öğeleriyle etkileşime geçtiğinde etiketleri tetiklemek için JavaScript etkinlik işleyicileri tarafından kullanılan event adlı özel bir veri katmanı değişkeni kullanır. Örneğin, bir kullanıcı satın alma onayı düğmesini tıkladığında bir dönüşüm izleme etiketi tetiklemek isteyebilirsiniz. Etkinlikler, bir kullanıcı bağlantılar, düğmeler, kaydırma çubuğu vb. gibi web sitesi öğeleriyle etkileşimde bulunduğunda çağrılabilir.

Bu işlev, bir etkinlik gerçekleştiğinde dataLayer.push() çağrılarak gerçekleştirilir. dataLayer.push() ile etkinlik göndermeyle ilgili söz dizimi aşağıdaki gibidir:

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

Burada event_name, etkinliği açıklayan bir dizedir (ör. 'login', purchase veya search).

Ölçmek istediğiniz bir işlem gerçekleştiğinde etkinlik verileri göndermek için dataLayer.push() öğesini kullanın. Örneğin, bir kullanıcı düğmeyi tıkladığında etkinlik göndermek için düğmenin onclick işleyicisini dataLayer.push() çağıracak şekilde değiştirin:

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

Bir forma girilen veya seçilen değerler, ziyaretçinin oynattığı bir videoyla ilişkili meta veriler, ziyaretçi tarafından özelleştirilen bir ürünün (ör. araba) rengi, tıklanan bağlantıların hedef URL'leri gibi bilgileri yakalamak için veri katmanı değişkenlerini veri katmanına dinamik olarak gönderebilirsiniz.

Etkinliklerde olduğu gibi bu işlev, veri katmanına veri katmanı değişkenleri eklemek veya mevcut değişkenleri değiştirmek için push() API'si çağrılarak gerçekleştirilir. Dinamik veri katmanı değişkenlerini ayarlamayla ilgili temel söz dizimi aşağıdaki gibidir:

dataLayer.push({'variable_name': 'variable_value'});

Burada 'variable_name', ayarlanacak veri katmanı değişkeninin adını belirten bir dize, 'variable_value' ise ayarlanacak veya değiştirilecek veri katmanı değişkeninin değerini belirten bir dizedir.

Örneğin: Bir ziyaretçi ürün özelleştirme aracıyla etkileşime geçtiğinde renk tercihi içeren bir veri katmanı değişkeni ayarlamak için aşağıdaki dinamik veri katmanı değişkenini gönderebilirsiniz:

dataLayer.push({'color': 'red'});

Tek bir itme, birden fazla değişken

Aynı anda birden fazla değişken ve etkinlik gönderebilirsiniz:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

Veri katmanı değişkenlerini kalıcı hale getirme

Veri katmanı değişkenlerini web sayfaları arasında devam ettirmek için her sayfa yüklendiğinde veri katmanı oluşturulduktan sonra dataLayer.push() çağrısı yapın ve değişkenleri veri katmanına aktarın. Bu veri katmanı değişkenlerinin kapsayıcı yüklendiğinde Etiket Yöneticisi tarafından kullanılabilmesini istiyorsanız Etiket Yöneticisi kapsayıcı kodunun üzerine aşağıdaki gibi bir dataLayer.push() çağrısı ekleyin.

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(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-XXXXXX');</script>
<!-- End Google Tag Manager -->

Veri katmanı nesnesi içinde tanımlanan her değişken, yalnızca ziyaretçi mevcut sayfada kaldığı sürece devam eder. Sayfalar arasında alakalı olan veri katmanı değişkenleri (ör. visitorType), web sitenizin her sayfasında veri katmanında tanımlanmalıdır. Her sayfadaki veri katmanına aynı değişken grubunu eklemeniz gerekmese de tutarlı bir adlandırma kuralı kullanmanız gerekir. Diğer bir deyişle, kayıt sayfasındaki sayfa kategorisini pageCategory adlı bir değişken kullanarak ayarlarsanız ürün ve satın alma sayfalarınız da pageCategory değişkenini kullanmalıdır.

Sorun giderme

Veri katmanıyla ilgili sorun gidermeyle ilgili bazı ipuçlarını aşağıda bulabilirsiniz:

window.dataLayer değişkeninin üzerine yazmayın: Veri katmanını doğrudan kullandığınızda (ör. dataLayer = [{'item': 'value'}])), dataLayer içindeki mevcut değerlerin üzerine yazılır. Etiket Yöneticisi yüklemeleri, veri katmanını window.dataLayer = window.dataLayer || []; kullanarak kaynak kodda mümkün olduğunca yüksek bir yerde, kapsayıcı snippet'inin üzerinde oluşturmalıdır. dataLayer tanımlandıktan sonra, dataLayer.push({'item': 'value'}) kullanarak ek değerler ekleyin. Sayfa yüklendiğinde bu değerlerin Etiket Yöneticisi'nin kullanımına sunulması gerekiyorsa bu dataLayer.push() çağrısının Etiket Yöneticisi kapsayıcı kodunun üzerinde de olması gerekir.

dataLayer nesne adı büyük/küçük harfe duyarlıdır: Bir değişkeni veya etkinliği doğru büyük/küçük harf kullanımı olmadan göndermeye çalışırsanız gönderme işlemi çalışmaz.

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push, geçerli JavaScript nesneleriyle çağrılmalıdır. Tüm veri katmanı değişken adları tırnak içine alınmalıdır.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

Değişken adlarını sayfalar arasında tutarlı tutun: Farklı sayfalarda aynı kavram için farklı değişken adları kullanırsanız etiketleriniz istenen tüm konumlarda tutarlı bir şekilde tetiklenemez.

Kötü:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

İyi:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Veri katmanını yeniden adlandırma

Google etiketi veya Etiket Yöneticisi tarafından başlatılan veri katmanı nesnesinin varsayılan adı dataLayer'tür. Veri katmanınız için farklı bir ad kullanmak istiyorsanız Google etiketinizdeki veya Etiket Yöneticisi kapsayıcı snippet'inizdeki veri katmanı parametresi değerini istediğiniz adla düzenleyerek bunu yapabilirsiniz.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

<!-- Google Tag Manager -->
<script>(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','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Yeniden adlandırıldıktan sonra, veri katmanınıza yapılan tüm referanslar (ör. veri katmanını snippet'in üzerinde tanımlarken veya etkinlikleri ya da dinamik veri katmanı değişkenlerini .push() komutuyla veri katmanına gönderirken) özel veri katmanı adınızı yansıtacak şekilde ayarlanmalıdır:

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Özel veri katmanı yöntemleri

Veri katmanına bir işlev gönderirseniz bu işlev, soyut bir veri modeline ayarlanarak çağrılır. Bu soyut veri modeli, bir anahtar/değer deposunda değer alıp ayarlayabilir ve veri katmanını sıfırlamanın bir yolunu da sağlar.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

window.dataLayer.push(function() {
  this.reset();
})