Veri katmanı

Veri katmanı, etiketlere bilgi aktarmak için Google Etiket Yöneticisi ve gtag.js tarafından 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üğmeyi tıkladığında) bir yeniden pazarlama etiketi tetiklerseniz veri katmanınız bu verileri etiketlerinizin kullanımına 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ıza 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 bir veri katmanı uygulaması, etiketleriniz ihtiyaç duyduğunda alakalı verilere erişebilmenize yardımcı olur.

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östermektedir.

<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 kopyalandığı ve bir web sayfasına eklendiği standart gtag.js uygulamalarında, veri katmanını oluşturan kod sağlanır. Google etiketinin özel uygulamalarında, aşağıda vurgulanan örnekte gösterildiği gibi veri katmanı kodunu 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 çıkar prensibine göre işler: Her mesaj, alındığı sıraya göre tek tek işlenir. Mesaj bir etkinlikse Etiket Yöneticisi bir sonraki mesaja geçmeden önce tetikleyici koşulları karşılanmış tüm etiketler etkinleşir.

Bir sayfadaki, Özel Şablon veya Özel HTML etiketinde kodla gtag() veya 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 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 bir Ö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, Etiket Yöneticisi'nin Google Ads, Analytics ve Floodlight için 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 davranışı 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 kullanmak, izin güncellemelerinin veri katmanındaki 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: Veri katmanınızın durumunu herhangi bir etkinlik zincirinde 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, event adlı özel bir veri katmanı değişkeni kullanır. Bu değişken, JavaScript etkinlik işleyicileri tarafından kullanıcılar web sitesi öğeleriyle etkileşim kurduğunda etiketleri tetiklemek için kullanılır. Örneğin, kullanıcılar satın alma onay düğmesini tıkladığında bir dönüşüm izleme etiketini tetiklemek isteyebilirsiniz. Bir kullanıcı bağlantı, düğme, kaydırma vb. web sitesi öğeleriyle etkileşime girdiğinde etkinlikler çağrılabilir.

Bu işlev, bir etkinlik gerçekleştiğinde dataLayer.push() çağrısıyla 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ğrısı yapacak ş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 vb. 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'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 dizedir. 'variable_value' ise ayarlanacak veya değiştirilecek veri katmanı değişkeninin değerini belirten bir dizedir.

Örneğin: Ziyaretçi bir ürün özelleştirme aracıyla etkileşime geçtiğinde renk tercihiyle bir veri katmanı değişkeni ayarlamak için aşağıdaki dinamik veri katmanı değişkenini aktarabilirsiniz:

dataLayer.push({'color': 'red'});

Bir aktarma, 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: Veri katmanına mevcut bir değişkenle aynı ada sahip bir değişken aktarırsanız yeni değer, mevcut değerin üzerine yazılır.

Veri katmanı değişkenlerini koru

Web sayfaları arasındaki veri katmanı değişkenlerini korumak için, her sayfa yüklemesinde veri katmanı örneklendikten 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 tarafından kullanılabilmesini istiyorsanız, Etiket Yöneticisi kapsayıcı kodunun yukarısına aşağıda 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 bir değişken, ziyaretçi geçerli sayfada kaldığı sürece devam eder. Sayfalar arasında alakalı olan veri katmanı değişkenleri (ör. visitorType), web sitenizin her sayfasındaki veri katmanında beyan edilmelidir. 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ındaki 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

Aşağıda, veri katmanıyla ilgili bazı sorun giderme ipuçları verilmiştir:

window.dataLayer değişkeninin üzerine yazma: 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'in ü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ı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 uygun büyük/küçük harf 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 farklı sayfalarda 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 sürekli olarak 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 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ını tanımlarken veya etkinlikleri ya da dinamik veri katmanı değişkenlerini .push() komutuyla 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 modeliyle çağrılır. Bu soyut veri modeli, bir anahtar/değer deposundaki değerleri alabilir ve ayarlayabilir. Ayrıca, veri katmanını sıfırlamak için de bir yol sunar.

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

ayarla

Soyut veri modelindeki set işlevi, alma 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ı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, en çok bir sayfa açık kalacak ve veri katmanı boyutu zamanla büyümeye devam ediyorsa çok işe yarar. Veri katmanını sıfırlamak için aşağıdaki kodu kullanın:

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