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ı kullanılarak iletilebilir ve tetikleyiciler değişkenlerin değerlerine göre ayarlanabilir.

Örneğin, purchase_total değerinin 100 ABD dolarından fazla olması durumunda veya belirli etkinliklere (ör. bir düğme tıklandığında) göre bir yeniden pazarlama etiketi etkinleştirirseniz veri katmanınız, bu verileri etiketleriniz için kullanılabilir hale getirecek ş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ıza dağılmış diğer sinyalleri ayrıştırmak yerine, veri katmanına eklenen bilgilere düzenli ve tahmin edilebilir bir şekilde referans verecek şekilde tasarlanmıştır. Değişkenler ve ilişkili değerlerle doldurulmuş bir veri katmanı uygulaması, etiketlerinizin ihtiyaç duyduğu zamanlarda alakalı verilerin kullanılabilmesini sağlar.

Kurulum

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

<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ü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, aşağıdaki kod örneğinde gösterildiği gibi veri katmanı kodunu 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ınmış tüm veri katmanı push mesajlarını işlemeye başlar. Etiket Yöneticisi, iletileri ilk giren ilk çıkar (FIFO) prensibine göre işler: Her ileti, alındığı sırayla tek tek işlenir. Mesaj bir etkinlikse tetikleyici koşulları karşılanan tüm etiketler, Etiket Yöneticisi bir sonraki mesaja geçmeden önce etkinleşir.

Bir sayfadaki, özel şablondaki veya özel HTML etiketindeki kod tarafından gtag() veya dataLayer.push() çağrısı yapılırsa ilişkili ileti sıraya alınır ve bekleyen diğer tüm iletiler değerlendirildikten sonra işlenir. Bu nedenle, güncellenen veri katmanı değerlerinin bir sonraki etkinlikte kullanılabileceği garanti edilmez. Bu durumları ele almak için veri katmanına aktarılırken mesaja bir etkinlik adı eklemeniz ve ardından özel etkinlik tetikleyicisi ile bu etkinlik adını dinlemeniz gerekir.

Etkinlik işleyicilerle 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şimde bulunduğunda etiketleri tetiklemek için JavaScript etkinlik dinleyicileri 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 dönüşüm izleme etiketini tetiklemek isteyebilirsiniz. Etkinlikler, kullanıcı web sitesi öğeleriyle (ör. bağlantılar, düğmeler, kaydırma vb.) her 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önderme 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 verilerini göndermek için dataLayer.push() kullanın. Örneğin, bir kullanıcı bir düğmeyi tıkladığında etkinlik göndermek için düğmenin onclick işleyicisini dataLayer.push() işlevini ç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 de 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 ayarlamak için kullanılan 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şim kurduğunda 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 kalıcı hale getirmek için her sayfa yüklemesinde veri katmanı örneklendirildikten sonra dataLayer.push() işlevini çağırın ve değişkenleri veri katmanına aktarın. Bu veri katmanı değişkenlerinin kapsayıcı yüklendiğinde Etiket Yöneticisi'nde kullanılabilmesini istiyorsanız aşağıdaki örnekte gösterildiği gibi Etiket Yöneticisi kapsayıcı kodunun üzerine 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ı nesnesinde tanımlanan her değişken yalnızca ziyaretçi mevcut sayfada kaldığı sürece kalıcı olur. Sayfalar arasında alakalı olan veri katmanı değişkenleri (ör. visitorType), web sitenizin her sayfasındaki veri katmanında tanımlanmalıdır. Her sayfadaki veri katmanına aynı değişken grubunu yerleştirmeniz gerekmese de tutarlı bir adlandırma kuralı kullanmanız gerekir. Başka bir deyişle, kaydolma sayfasında sayfa kategorisini pageCategory adlı bir değişken kullanarak ayarlarsanız ürün ve satın alma sayfalarınızda da pageCategory değişkeni kullanılmalıdır.

Sorun giderme

Veri katmanıyla ilgili sorunları gidermeye yönelik bazı ipuçları:

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ı kaynak kodunda mümkün olduğunca yukarıda, kapsayıcı snippet'inin üstünde, window.dataLayer = window.dataLayer || []; kullanarak örneklendirmelidir. dataLayer tanımlandıktan sonra, ek değerler eklemek için dataLayer.push({'item': 'value'}) kullanın. Bu değerlerin sayfa yüklendiğinde Etiket Yöneticisi tarafından kullanılabilmesi gerekiyorsa dataLayer.push() çağrısının da Etiket Yöneticisi kapsayıcı kodunun üzerinde olması gerekir.

dataLayer nesne adı büyük/küçük harfe duyarlıdır: Bir değişkeni veya etkinliği doğru harf büyüklüğünü kullanmadan aktarmaya çalışırsanız aktarma 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ı sayfalarda tutarlı tutun: Farklı sayfalarda aynı kavram için farklı değişken adları kullanırsanız etiketleriniz amaçlanan 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'dır. Veri katmanınız için farklı bir ad kullanmayı tercih ederseniz Google etiketinizdeki veya Etiket Yöneticisi kapsayıcı snippet'inizdeki veri katmanı parametre değerini istediğiniz adla düzenleyerek bunu yapabilirsiniz.

<!-- 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 -->

<!-- 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>

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

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

Özel veri katmanı yöntemleri

Veri katmanına bir işlev gönderirseniz bu işlev, this soyut bir veri modeline ayarlanmış şekilde çağrılır. Bu soyut veri modeli, bir anahtar/değer deposuna değerler alıp ayarlayabilir ve veri katmanını sıfırlamanın bir yolunu da sunar.

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();
});