Çoklu Google Tag Manager Kurulumu

Yayınladığım içerikleri ve örnekleri genel olarak iş yapış sürecimde karşılaştığım durumların birer özeti olarak ele alıyorum.
AA

İlgili videolar, yorum alanı, chat uygulaması üzerinden iletilen sorular olduğunda da çözüm yollarını araştırıp yine mümkün olan en kararlı ve pratik yöntem üzerinden yazı yayınlamaya gayret ediyorum.

Google Tag Manager ile ilgili destek talebinde bulunabilirsin.

Bu yazıda iletilen sorulardan ve benim de sıklıkla karşılaştığım durumlardan biri olan çoklu Google Tag Manager kurulum işleminden bahsedeceğim. Google Tag Manager ile ilgili temel pek çok konuyu kurulumlar ve kullanım açıklamaları üzerinden inceledik. Bunlardan öne çıkanları kısaca hatırlatmak gerekirse;;

Yukarıdaki yazılara ek olarak çoklu Google Tag Manager kurulumdan bahsetmeden önce dataLayer için yeni ad atadığımız süreçten ve etkilerinden bahsetmek istiyorum.

Google Tag Manager dataLayer’ı Yeniden Adlandırma

Google Etiket Yöneticisi tarafından başlatılan ve başvurulan, ön tanımlı olarak içeriği alınan veri katmanını dataLayer olarak ifade ediyorduk. Asynchronous olarak işlem gören ve ilk girenin ilk çıktığı (first-in/first-out) dataLayer nesnesiyle ilgili detaylara Data Layer (dataLayer) yazımda değinmiştim. dataLayer kullanımını kısaca hatırlayalım;

ataLayer = [{'item': 'value'}];
dataLayer = [{'pageTitle': 'Anasayfa'}];
// .push() ile
dataLayer.push({'item': 'value'});
dataLayer.push({'pageTitle': 'Anasayfa'});

Ancak, farklı bir nedenden dolayı (özelleştirme, birden fazla kurulum vb.) dataLayer kullanamadığımız süreçler söz konusu olabilir. Bu durumda kapsayıcı kod parçacığındaki (snippet) veri katmanı parametre değerini (dataLayer) seçtiğimiz bir ad ile değiştirerek (GTM ID değerini tanımladığımız satır) kolaylıkla kullanmaya başlayabiliriz. Standart kodumuz şöyleydi:

<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-XXXX');</script>

dataLayer yerine veriKatmani ifadesini kullanalım ve yukarıdaki standart kodu bu yeni veri katmanı ifadesi ile güncelleyelim.

<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','veriKatmani','GTM-XXXX');</script>

Bu işlemin sonrasında, veri katmanı üzerinden yapılan tüm referanslar (örneğin, snippet üstündeki veri katmanını bildirirken ve olayları veya dinamik Veri Katmanı Değişkenlerini (Data Layer Variables) push() API ile veri katmanına iletirken) güncel veri katmanı adını içerecek şekilde tanımlanmalıdır.

<script>
  veriKatmani = [{
    // ...
  }];
  veriKatmani.push({'item': 'value'});
</script>

Bu işlemi birden fazla Google Tag Manager kapsayıcısının söz konusu olduğu durumlarda verileri ilgili kapsayıcı ile ilişkili tutmak için de tercih edebiliriz. Evet, hazır konusu da açılmışken çoklu kapsayıcı kurulumuyla ilgili detaylara geçebiliriz.

Çoklu Google Tag Manager Kurulumu

Unutmamak gerekir ki, çoğu durumda bir problem için üretilecek en etkin çözüm çözümler arasından en yalın ve anlaşılır hali olanıdır.

Dijital Varlık Yönetimi ve Öneriler başlıklı yazımda araç kullanımlarına istinaden değerlendirilebilecek bazı yöntemlerden bahsetmiştim. GTM (Google Tag Manager) kurulum da mülk yönetimi ve sayfa performansıyla ilişkili olarak en etkin yapının tek bir kurulum ile sağlanabileceğini söylemeliyim. Ancak, bir nedenle -örneğin farklı reklam ajansları veya geliştiriciler farklı kurulumlar gerçekleştirmek ve bu kurulumlarda yer alan içeriklerin birbiriyle çakışmamasını isteyebilirler- birden fazla kurulum ihtiyacı söz konusu olabilir. Peki, bu durumda ne yapmak gerekir?

Öncelikli çözüm yolu, ikinci veya üçüncü kurulum ihtiyacına neden olan durumların tek bir kurulumla ortadan kaldırılamayacağının tekrar gözden geçirilmesi olmalıdır. Eğer yeni GTM kurulumları bir zaruret haline gelmişse yapılması gereken işlem GTM kurulum kod parçacığını tekrar içeriğinde yer alan veri katmanı parametre değerini (dataLayer) her kurulum için yeniden isimlendirmek olmalıdır. Google Tag Manager dataLayer’ı Yeniden Adlandırma başlığı altında detayları aktarmıştım1. Yani, bir sayfada birden fazla GTM kurulumu söz konusu ise ilk kurulumu (GTM-XXXX için) standart veri katmanı parametresi olan dataLayer, diğerini de belirlediğimiz bir diğer isimle (GTM-YYYY için) gerçekleştirmeliyiz. Örneğin, belirlediğimiz ad veriKatmani olsun. Bu durumda sayfamızda yer alan GTM standart kod parçacıkları şu şekilde olacaktır.

<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-XXXX');</script>

<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','veriKatmani','GTM-YYYY');</script>

Standart kod alanının yanı sıra JavaScript’in çalışmadığı durumlar için kullandığımız iframe etiketini de yine her iki GTM kapsayıcı (GTM-XXXX ve GTM-YYYY) için oluşturmalıyız.

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYY"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Veri katmanı işlemlerimizde de bu kurulumlara göre yönetmeliyiz. Örneğin, sepete ürün ekleme işleminin (bkz. Enhanced Ecommerce) her iki veri katmanı için de tanımlayalım.

dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': '[para-birimi]', // Para Birimi (Örn. TRY, USD, EUR) / Tip: string (opsiyonel)
    'add': {
      'products': [{
        'id': '[benzersiz-urun-id]', // Benzersiz Ürün ID'si / Tip: string (gerekli)
        'name': '[urun-adi]', // Ürün Adı / Tip: string (gerekli)
        'price': [urun-fiyati], // Ürün Fiyatı / Tip: numeric (gerekli)
        'brand': '[urun-markasi]', // Ürün Markası / Tip: string (opsiyonel)
        'category': '[urun-kategorisi]', // Ürün Kategorisi / Tip: string (opsiyonel)
        'variant': '[urun-ozelligi]', // Ürün Özelliği (örneğin renk, desen vb.) / Tip: string (opsiyonel)
        'quantity': '[urun-adedi]' // Sepete Gönderilen Ürün Adedi / Tip: numeric (opsiyonel)
      }]
    }
  }
});
veriKatmani.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': '[para-birimi]', // Para Birimi (Örn. TRY, USD, EUR) / Tip: string (opsiyonel)
    'add': {
      'products': [{
        'id': '[benzersiz-urun-id]', // Benzersiz Ürün ID'si / Tip: string (gerekli)
        'name': '[urun-adi]', // Ürün Adı / Tip: string (gerekli)
        'price': [urun-fiyati], // Ürün Fiyatı / Tip: numeric (gerekli)
        'brand': '[urun-markasi]', // Ürün Markası / Tip: string (opsiyonel)
        'category': '[urun-kategorisi]', // Ürün Kategorisi / Tip: string (opsiyonel)
        'variant': '[urun-ozelligi]', // Ürün Özelliği (örneğin renk, desen vb.) / Tip: string (opsiyonel)
        'quantity': '[urun-adedi]' // Sepete Gönderilen Ürün Adedi / Tip: numeric (opsiyonel)
      }]
    }
  }
});

Görüldüğü üzere addToCart etkinliği her veri katmanı tanımı için tekrarlanmış oldu. Bu durum ecommerce etkinlikleri başta olmak üzere tüm veri katmanı işlemlerinde tekrarlanmak durumunda. Peki, birden fazla GTM kurulunda GTM ID değerlerine göre işlemler yürütmek istersek ne yapmamız gerekir?

Eğer Google Tag Manager ön tanımlı değişkenler listesindeki Container ID değerini aktifleştirdiyseniz GTM içeriğinde {{Container ID}} ile ID değerini kullanmak mümkün hale gelecektir. GTM dışında ise google_tag_manager[Container_ID] ile ID değerini google_tag_manager ile JavaScript işlemlerinde kullanabiliriz.

window.google_tag_manager['GTM-XXXX'];

Yazı içerisinde bir kaz defa tekrarladığım üzere mümkün olduğu kadar web sayfasında yer alan kodları optimize etmeli ve en minimal kurulum stratejilerini takip etmeliyiz. Ancak, pratikte işlerin böyle yürümediğini biliyoruz. Dolayısıyla bu gibi durumlarda da dikkatli bir şekilde işlemler gerçekleştirerek var olan ve hali hazırda yürüyen yapılara zarar vermeden ek işlemleri oluşturmalı ve yönetmeliyiz. GTM kurulumları ve anlamda içeriklerinde pek çok kod parçacığı ve işlem barındırabildikleri için üzerinde titizlikle durulması gereken işlemlerden biri. Yanlış bir kurulumda dönüşüm kodlarının çalışması istemsiz bir şekilde engellenebilir ve hatta sayfanın yüklenme süreci bile sekteye uğrayabilir. Bu nedense tüm bu süreç boyunca Tag Assistant ve Preview modu aktif olarak kullanılarak ilerlenmeli ve tüm sürecin başarıyla yürüdüğünden emin olmadan tüm kodlar publish edilmemelidir.

  1. Renaming the Data Layer. Google Tag Manager ↩
Yorum alanını göster
Beğendim
Beğenmedim