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ğeri 100 ABD dolarından büyük olduğunda veya bir düğmenin tıklanması gibi belirli etkinliklere göre bir yeniden pazarlama etiketi 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ı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, sayfanıza dağılmış değişkenleri, işlem bilgilerini, sayfa kategorilerini ve diğer sinyalleri ayrıştırmak yerine, veri katmanına eklenen bilgileri düzenli ve öngörülebilir bir şekilde referans alacak şekilde tasarlanmıştır. Değişkenler ve ilişkili değerlerle doldurulmuş bir veri katmanı uygulaması, etiketlerinizin ihtiyaç duyduğu 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 kod örneğinde, 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 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 komut dosyanızın başına veri katmanı kodunu ekleyin:

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

Not: Snippet kaynak URL'sindeki kapsayıcı kimliği (ör. GTM- ile G- veya AW-), komut dosyası yürütme izinlerini ve özelliklerini belirler. Ayrıntılı bilgi için Kapsayıcı türleri ve kimlik ön ekleri başlıklı makaleyi inceleyin.

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, mesajları ilk giren ilk çıkar esasına göre işler: Her mesaj, 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 tetiklenir.

Bir sayfadaki kodda, ö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. Bu nedenle, güncellenen veri katmanı değerlerinin bir sonraki etkinlikte kullanılabilir olacağı garanti edilmez. Bu durumları yönetmek için veri katmanına aktarılan mesaja bir etkinlik adı eklemeniz ve ardından Özel Etkinlik tetikleyicisi ile bu etkinlik adını 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'nde izin ayarlarını yapılandırmak için özel HTML etiketleri kullanmayın. İzin ayarlarının, bir Etiket Yöneticisi kapsayıcısında ilgili etiketler 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. İzin güncellemelerinin veri katmanında sıraya alınmış öğelerden önce işlendiğinden emin olmak için Etiket Yöneticisi İzin API'lerini kullanın. 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 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ı bağlantılar, düğmeler, kaydırma vb. 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() kullanın. Örneğin, 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>

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 (örneğin, bir 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 aktarabilirsiniz.

Etkinliklerde olduğu gibi bu işlev de veri katmanındaki veri katmanı değişkenlerini eklemek veya 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 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: Veri katmanına mevcut bir değişkenle aynı ada sahip bir değişken 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ş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. Kapsayıcı yüklendiğinde bu veri katmanı değişkenlerinin Etiket Yöneticisi tarafından kullanılabilmesini istiyorsanız Etiket Yöneticisi kapsayıcı kodunun üstüne aşağıdaki örnekte gösterildiği 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ı nesnesinde tanımlanan her değişken, yalnızca ziyaretçi mevcut sayfada kaldığı sürece geçerli 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 üzerinde window.dataLayer = window.dataLayer || []; kullanarak örneklendirmelidir. dataLayer bildirildikten 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 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ı 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 etkinleştirilemez.

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üzenleyebilirsiniz.

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: Vurgulanmayan 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 -->

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 -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());
</script>

Yeniden adlandırıldıktan sonra, veri katmanınıza yapılan tüm referanslar (ör. snippet'in üstünde veri katmanı bildirilirken veya etkinlikler ya da dinamik veri katmanı değişkenleri .push() komutuyla veri katmanına aktarılırken) ö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>

Önemli: Sayfa başına yalnızca bir veri katmanı kullanın

Sayfa başına yalnızca bir dataLayer nesnesi desteklenir. Google Etiket Yöneticisi ve gtag.js, tüm etkinlikleri ve değişkenleri eklendikleri sırayla almak, sıraya koymak ve işlemek için window.dataLayer adlı tek bir global JavaScript dizisine dayanır. Kapsayıcı snippet'leri, dinleyicilerini ve işleme mantığını özellikle bu tek diziye ekler. Birden fazla veri katmanı örneği kullanmaya çalışmak veya veri katmanını yanlış şekilde yeniden başlatmak (ör. GTM yüklendikten sonra window.dataLayer = [] ile üzerine yazmak) önemli sorunlara neden olabilir:

• Etiketler tetiklenmeyebilir: Google Etiket Yöneticisi'nin veya Google etiketinin etkin bir şekilde izlemediği bir dataLayer örneğine aktarılan etkinlikler ve değişkenler, etiketlerinizi tetiklemez.
• Tutarsız veri toplama: Sayfanızın farklı bölümleri veya farklı komut dosyaları, verileri ayrı ve izole dataLayer dizilerine aktarabilir. Bu da analiz ve pazarlama etiketlerinize eksik veya yanlış bilgilerin ulaşmasına neden olur.
• Veri kaybı: İzleme amaçlı bilgiler yanlış dataLayer örneğine gönderilirse kaybolabilir.
• Hata ayıklama zorlukları: İzleme verilerinin akışı öngörülemediğinden etiketleme sorunlarını teşhis etmek zordur.

En iyi uygulama: Veri katmanını her zaman sayfa başına bir kez window.dataLayer = window.dataLayer || []; kullanarak örneklendirin. Bu işlem genellikle sayfanın <head> bölümünün üst kısmında, GTM veya gtag.js snippet'inden önce yapılır. Sonraki etkinlikleri veya değişkenleri eklemek için her zaman dataLayer.push() kullanın. window.dataLayer değişkeninin üzerine hiçbir zaman yazmayın veya bu değişkeni yeniden atamayın.

Özel veri katmanı yöntemleri

Veri katmanına bir işlev gönderirseniz bu işlev, this soyut bir veri modeline ayarlanmış olarak ç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.

Ö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 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, ayarlanmış 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, açık kalacak ve veri katmanı boyutu zaman içinde büyümeye devam edecek bir sayfada en kullanışlı yöntemdir. Veri katmanını sıfırlamak için aşağıdaki kodu kullanın:

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