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ğıdaki 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, 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.

Ö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'ndeki 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 davranışı ve güncelleme davranışını yapılandırmak için Etiket Yöneticisi İzin API'lerini uygulamanız gerekir. Etiket Yöneticisi izin API'lerinin kullanılması, izin güncellemelerinin veri katmanında sıraya alınmış öğelerden önce işlenmesini sağlar. Böylece, aynı etkinlik tarafından tetiklenen tüm etiketler aynı izin durumunu görür.

Önemli Bilgi: Bir etkinlik zincirinin herhangi bir noktasında veri katmanınızın durumunu incelemek için Google Etiket Asistanı'nı kullanabilirsiniz.

Etkinlik işleyicilerle birlikte 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. Bir kullanıcı bağlantılar, düğmeler, kaydırmalar vb. gibi web sitesi öğeleriyle etkileşime girdiğinde etkinlik ç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 verilerini 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'});

Bir push, 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: Mevcut bir değişkenle aynı ada sahip bir değişkeni veri katmanına gönderirseniz mevcut değerin üzerine yeni değer yazılır.

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

Web sayfaları arasında veri katmanı değişkenlerini korumak 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'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. 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. 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ı 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.

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: Vurgulanan olmayan 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 üzerindeki veri katmanını tanımlarken veya .push() komutuyla etkinlikleri ya da dinamik veri katmanı değişkenlerini veri katmanına aktarırken) ö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 ayarlanarak çağrılır. Bu soyut veri modeli, değerleri bir anahtar/değer deposuna getirip ayarlayabilir. Ayrıca, veri katmanının sıfırlanması için de bir yöntem sunar.

Önemli: Özel veri katmanı yöntemlerini kullanmak için verileri doğrudan dataLayer değişkenine göndermek üzere .push'i 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 aracılığıyla 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 {
    // ...
  }
})

reset

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

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