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ğerinin 100 ABD dolarından fazla olduğu durumlarda 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ılı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 kolayca referans verecek şekilde tasarlanmıştır. Değişkenler ve ilişkili değerlerle doldurulmuş bir veri katmanı uygulaması, etiketlerinizin ihtiyaç duyduğu zaman ilgili verilerin kullanılabilir olmasını sağlamaya yardımcı olur.

Kurulum

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

<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, veri katmanı kodunu komut dosyanızın başına ekleyin. Aşağıdaki vurgulanmış örnekte bu işlem gösterilmektedir:

<!-- 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 çıkar prensibiyle işler: Her mesaj, alındığı sırayla teker teker işlenir. İleti bir etkinlikse Etiket Yöneticisi sonraki iletiye geçmeden önce tetikleyici koşulları karşılanan tüm etiketler tetiklenir.

Bir sayfadaki kod, Özel Şablon veya Özel HTML etiketi tarafından gtag() ya da dataLayer.push() çağrısı yapılırsa ilişkili mesaj sıraya alınır ve bekleyen diğer tüm mesajlar değerlendirildikten sonra 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ı eklemeli ve bu etkinlik adı için Özel Etkinlik tetikleyicisi ile işleme yapmalısınız.

Önemli: gtag.js tabanlı kodu dağıtmak için Özel HTML etiketlerini kullanmayın. Bunun yerine, Google Ads, Analytics ve Floodlight için Etiket Yöneticisi'nin yerel etiket şablonlarını kullanın.

Önemli: Etiket Yöneticisi'nde izin ayarlarını yapılandırmak için özel HTML etiketlerini kullanmayın. İzin ayarlarının, ilgili etiketlerin bir Etiket Yöneticisi kapsayıcısında tetiklenmesinden önce uygulanması gerektiğinden varsayılan ve güncelleme davranışını yapılandırmak için Etiket Yöneticisi İzin API'lerini uygulamanız gerekir. Etiket Yöneticisi İzin API'lerini kullanarak izin güncellemelerinin veri katmanındaki sıraya alınmış öğelerden önce işlenmesini sağlayabilir, böylece aynı etkinlik tarafından tetiklenen tüm etiketlerin aynı izin durumunu görmesini sağlayabilirsiniz.

Önemli nokta: Veri katmanınızın durumunu bir etkinlik zincirinin herhangi bir noktasında incelemek için Google Tag Assistant'ı kullanabilirsiniz.

Etkinlik işleyicileri olan bir veri katmanı kullanma

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

Google etiketi ve Etiket Yöneticisi, kullanıcı web sitesi öğeleriyle etkileşimde bulunduğunda 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 dönüşüm izleme etiketini tetiklemek isteyebilirsiniz. Etkinlikler, kullanıcı bağlantılar, düğmeler, kaydırmalar 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ö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ı 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 bunları değiştirmek için push() API'si çağrılarak gerçekleştirilir. Dinamik veri katmanı değişkenlerini ayarlamaya yönelik temel söz dizimi şöyledir:

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

Burada 'variable_name', ayarlanacak veri katmanı değişkeninin adını belirten bir dizedir ve 'variable_value', 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şimde bulunduğunda renk tercihiyle ilgili 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'
});

Önemli: Veri katmanına mevcut bir değişkenle aynı ada sahip bir değişkeni gönderirseniz mevcut değerin üzerine yeni değer yazılır.

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

Veri katmanı değişkenlerinin web sayfaları arasında kalıcı olmasını sağlamak için her sayfa yüklemesinde veri katmanı oluşturulduktan 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 bildirilmelidir. Her sayfadaki veri katmanına aynı değişken grubunu yerleştirmeniz gerekmez ancak tutarlı bir adlandırma kuralı kullanmanız gerekir. Diğer bir deyişle, kaydolma sayfasında pageCategory adlı bir değişken kullanarak sayfa kategorisini 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 sorun giderme 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, window.dataLayer = window.dataLayer || []; kullanarak veri katmanını kaynak kodda mümkün olduğunca yukarıda, kapsayıcı snippet'inin üzerinde oluşturmalıdır. dataLayer bildirildikten sonra, dataLayer.push({'item': 'value'}) kullanarak buna ek değerler ekleyin. Bu değerlerin sayfa yüklendiğinde Etiket Yöneticisi tarafından kullanılabilmesi gerekiyorsa dataLayer.push() çağrısı da Etiket Yöneticisi kapsayıcı kodunun üzerinde olmalıdır.

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ı sayfalarda 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'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.

gtag.js

Yeni veri katmanı adını ayarlamak için URL'ye "l" adlı bir sorgu parametresi ekleyin (ör. l=myNewName). Google etiketi snippet'indeki tüm dataLayer örneklerini yeni adla güncelleyin.

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

Etiket Yöneticisi

Kapsayıcı snippet'inizdeki veri katmanı parametre değerini (aşağıda vurgulanmıştır) istediğiniz adla değiştirin.

Önemli: Vurgulanmamış parametre değerini değiştirmeyin.

<!-- 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. 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>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Not: Sayfa başına yalnızca bir dataLayer nesnesi desteklenir.

Özel veri katmanı yöntemleri

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

Önemli: Özel veri katmanı yöntemlerini kullanmak için verileri doğrudan dataLayer değişkenine göndermek üzere .push kullanmanız gerekir. gtag kullanırsanız işlev geçersiz bir komut olarak yorumlanır ve yoksayılır.

grup

Soyut veri modelindeki set işlevi, get ile alınacak değerleri ayarlamanıza olanak tanır.

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

get

Soyut veri modelindeki get işlevi, ayarlanan değerleri almanıza olanak tanır.

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

sıfırla

Soyut veri modelindeki reset işlevi, veri katmanındaki verileri sıfırlamanıza olanak tanır. Bu özellik, açık kalacak ve veri katmanı boyutu zaman içinde büyümeye devam edecek bir sayfada en kullanışlıdır. Veri katmanını sıfırlamak için aşağıdaki kodu kullanın:

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