Veri katmanı

Veri katmanı, Google Etiket Yöneticisi ve gtag.js tarafından etiketlere bilgi iletmek için kullanılan bir nesnedir. Etkinlikler veya değişkenler veri katmanı aracılığıyla aktarılabilir ve tetikleyiciler değişkenlerin değerlerine göre ayarlanabilir.

Örneğin, purchase_total değeri 100 ABD dolarından fazla olduğunda veya belirli etkinliklere (ör. bir düğme tıklandığında) dayalı olarak bir yeniden pazarlama etiketini tetiklerseniz 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ızda dağılmış diğer sinyalleri ayrıştırmak yerine, veri katmanına eklenen bilgileri düzenli ve tahmin edilebilir bir şekilde kolayca referans alacak şekilde tasarlanmıştır. Değişkenler ve ilişkili değerlerle doldurulan veri katmanı uygulaması, etiketleriniz ihtiyaç duyduğunda alakalı verilerin kullanılabilmesini sağlar.

Döşeme

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 ö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ıkları sıraya göre teker teker işlenir. Mesaj bir etkinlikse Etiket Yöneticisi bir sonraki mesaja geçmeden önce, tetikleyici koşulları karşılanmış olan tüm etiketler tetiklenir.

Kod aracılığıyla bir sayfada, Özel Şablonda veya Özel HTML etiketinde 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 bir etkinlik adı eklemeniz ve ardından bu etkinlik adını bir Ö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 etiketler bir Etiket Yöneticisi kapsayıcısında tetiklenmeden ö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'lerinin kullanılması, izin güncellemelerinin veri katmanında sıraya alınmış tüm öğelerden önce işlenmesini sağlar. Böylece aynı etkinlik tarafından tetiklenen tüm etiketler aynı izin durumunu görür.

Önemli Nokta: Bir etkinlik zincirinin herhangi bir noktasında veri katmanınızın durumunu incelemek için Google Tag Assistant'ı 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, event adlı özel bir veri katmanı değişkeni kullanır. Bu değişken, bir kullanıcı web sitesi öğeleriyle etkileşime geçtiğinde JavaScript etkinlik işleyicileri tarafından etiketleri tetiklemek için kullanılı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ısı yapı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 'login', purchase veya search gibi bir dizedir.

Ö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() çağıracak şekilde değiştirin:

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

Bir formda 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 rengi (ör. araba), tıklanan bağlantıların hedef URL'leri gibi bilgileri yakalamak için veri katmanı değişkenlerini veri katmanına dinamik olarak aktarabilirsiniz.

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'nin çağrılmasıyla gerçekleştirilir. Dinamik veri katmanı değişkenlerini ayarlamak için 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 gösteren bir dizedir.

Örneğin: Ziyaretçi bir ü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 aktarabilirsiniz:

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

Önemli: Mevcut bir değişkenle aynı ada sahip bir değişkeni veri katmanına aktarırsanız yeni değer mevcut değerin üzerine yazılır.

Veri katmanı değişkenlerini koruma

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 tarafından kullanılabilmesini istiyorsanız aşağıda gösterildiği gibi Etiket Yöneticisi kapsayıcı kodunun yukarısına 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 belirtilen her değişken, yalnızca ziyaretçi geçerli sayfada kaldığı sürece kalır. 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 yerleştirmeniz gerekmese de tutarlı bir adlandırma kuralı kullanmanız gerekir. Başka bir deyişle, kayıt sayfasında sayfa kategorisini pageCategory adlı bir değişken kullanarak ayarlarsanız ürün ve satın alma sayfalarınızın da pageCategory değişkenini kullanması gerekir.

Sorun giderme

Veri katmanıyla ilgili sorunları gidermeye yönelik 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, window.dataLayer = window.dataLayer || []; kullanarak veri katmanını kaynak kodunda mümkün olduğunca yukarıda, kapsayıcı snippet'inin üzerinde örneklendirmelidir. dataLayer bildirildikten sonra, buna ek değerler eklemek için dataLayer.push({'item': 'value'}) kullanın. Sayfa yüklendiğinde bu değerlerin Etiket Yöneticisi tarafından kullanılabilir olması 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 uygun büyük/küçük harf kullanımı olmadan 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ı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.

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 ü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 aktarırsanız bu işlev, soyut bir veri modeline ayarlanmış olarak ç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 .push kullanarak verileri doğrudan dataLayer değişkenine göndermeniz 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 üzerinden alınacak değerleri belirlemenize olanak tanır.

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

get

Soyut veri modelindeki get işlevi, ayarlanan değerleri almanızı sağlar.

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 yöntem en çok, açık kalacak bir sayfa ve veri katmanı boyutunun zaman içinde büyümeye devam edeceği bir sayfa olduğunda işe yarar. Veri katmanını sıfırlamak için aşağıdaki kodu kullanın:

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