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şturma kodu 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, mesajları "ilk gelen" ilk alır esasına göre işler: Her mesaj, alındığı sırayla teker teker 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 bir etkinlik adı eklemeniz ve ardından bu etkinlik adını bir Özel Etkinlik tetikleyicisi ile 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ş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öndermek için kullanılan 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() öğesini 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() ç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'});

Bir push, birden fazla değişken

Aynı anda birden çok değişkeni ve etkinliği aktarabilirsiniz:

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

Veri katmanı değişkenlerini koruma

Veri katmanı değişkenlerini web sayfaları arasında sürdürmek 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'nin kullanımına sunulmasını 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. Sayfalarla alakalı veri katmanı değişkenleri (ör. visitorType), web sitenizin her sayfasındaki veri katmanında belirtilmelidir. Her sayfadaki veri katmanına aynı değişken grubunu eklemeniz gerekmese de tutarlı bir adlandırma kuralı kullanmanız gerekir. Başka bir deyişle, kayıt sayfasındaki sayfa kategorisini pageCategory adlı bir değişkeni 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 yayınlamaya çalışırsanız yayınlama 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ın sayfalar arasında tutarlı olmasını sağlayın: Farklı sayfalarda aynı kavram için farklı değişken adları kullanırsanız etiketleriniz istenen tüm konumlarda tutarlı bir şekilde etkinleşemez.

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 şeklindedir. Veri katmanınız için farklı bir ad kullanmak isterseniz Google etiketinizdeki veya Etiket Yöneticisi kapsayıcı snippet'inizdeki veri katmanı parametre 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();
})