GTM 101: Data Layer (dataLayer) nedir?

Web analitiği, bir web sitesinin performansını ölçmek ve iyileştirmek için kritik bir unsurdur. Bu bağlamda, Google Tag Manager ve Data Layer gibi araçlar, veri toplama ve analiz süreçlerini optimize etmede önemli bir rol oynar. Bu yazıda, Data Layer’ı detaylı bir şekilde ele alarak, Google Tag Manager aracılığıyla nasıl kullanıldığını anlatacağız.

1. Google Tag Manager Data Layer Çalışma Prensibi nedir?

Google Tag Manager (GTM), web sitenizdeki etkileşimleri izlemek ve analiz etmek için kullanılan bir araçtır ve bu sayede web sitenizin performansını daha iyi anlamanıza ve geliştirmenize olanak tanır. GTM’nin temelini oluşturan Data Layer, bu süreçte bilgilerin depolanmasını ve iletilmesini sağlar. Data Layer’ın çalışma prensiplerini örneklerle detaylandıralım.

1.1. JavaScript Veri Türleri:

JavaScript, çeşitli veri türlerine sahiptir ve bu veri türleri, Data Layer içinde bilgilerin düzenli bir şekilde depolanmasını sağlar. İşte JavaScript nesneler (Objects), diziler (Arrays) ve diğer veri türleri hakkında daha fazla bilgi:

1.1.1. JavaScript Nesneler (Objects):

Birincisi, nesneler, anahtar-değer (key-value) çiftlerini içeren karmaşık veri yapılarıdır. Her bir anahtar, bir değeri temsil eder. Data Layer’da genellikle belirli bir olaya veya nesneye ait detayları içermek için kullanılır.

// Örnek bir JavaScript nesnesi var userObject = {   ‘userID’: ‘12345’,   ‘userName’: ‘John Doe’,   ‘userType’: ‘registered’ };

Yukarıdaki kod parçacığının key-value çiftlerine ait örneği aşağıdaki gibidir

• key= ‘userID’
• value= ‘12345’

Data Layer’da kullanılan nesneler, genellikle belirli bir olaya ait bilgileri içerir. Örneğin, bir sayfanın yüklenmesi olayında sayfa türü gibi.

1.1.2. JavaScript Diziler (Arrays):

İkincisi, diziler, sıralı veri koleksiyonlarını temsil eden JavaScript veri türleridir. Bu veri türlerini, Data Layer içinde genellikle birçok benzer öğeyi içeren listeleri temsil etmek için kullanıyoruz.

Diziler, özellikle tekrar eden yapılar veya listelerle çalışırken kullanışlıdır. Örneğin, bir kullanıcının sepetine eklediği ürünleri içeren bir dizi.

// Örnek bir JavaScript dizisi var productsArray = [   'Product 1',   'Product 2',   'Product 3' ];

1.1.3. Diğer JavaScript Veri Türleri:

String (Dize): Metin verilerini temsil eder. Örneğin, kullanıcının adı veya bir ürünün adı gibi.

var userName = ‘John Doe’;

Number (Sayı): Sayısal verileri temsil eder. Örneğin, bir ürünün fiyatı gibi.

var productPrice = 29.99;

Boolean (Boolean): Mantıksal değerleri temsil eder. True veya false değerlerini alabilir. Örneğin, bir kullanıcının giriş yapmış olup olmadığını kontrol etmek için.

var isLoggedIn = true;

Null (Boş): Değeri bilinmeyen veya atanmamış bir durumu temsil eder.

var unknownValue = null;

Undefined (Tanımsız): Bir değişkenin değerinin atanmamış olduğunu belirtir.

var undefinedValue;

1.2. Olay (Event) Bazlı Çalışma:

Google Tag Manager Data Layer’ın temel özelliklerinden biri, olay (event) bazlı çalışma prensibidir. Bu prensip, web sitenizde gerçekleşen belirli olaylarla ilişkilendirilmiş verilerin Data Layer aracılığıyla GTM’e iletilmesini içerir. Nihayetinde olay bazlı çalışma, kullanıcı etkileşimlerini izlemek ve bu etkileşimlere özel tepkiler oluşturmak için güçlü bir yöntemdir. Örneğin, bir kullanıcının bir ürünü sepete eklemesi bir olaydır.

// Örnek: Sepete Ürün Ekleme Olayı var dataLayer = window.dataLayer = window.dataLayer || []; window.dataLayer.push({   ‘event’: ‘addToCart’,   ‘productID’: ‘ABC123’,   ‘productName’: ‘Örnek Ürün’,   ‘quantity’: 1 });

Olay bazlı çalışma, web sitenizdeki kullanıcı etkileşimlerini daha ayrıntılı bir şekilde analiz etmenizi ve bu etkileşimlere özel olarak tasarlanmış izleme ve analiz kodları eklemenizi sağlar. Bu prensip, Google Tag Manager ve Data Layer’ın esnek ve özelleştirilebilir bir yapıya sahip olmasını sağlar, böylece web analitiği ihtiyaçlarınıza uygun çözümler oluşturabilirsiniz.

1.3. Özelleştirilmiş Veri Yapıları:

Data Layer, JavaScript nesneleri aracılığıyla özelleştirilebilir. Bu, sitenizin ihtiyaçlarına uygun olarak özel veri yapısı oluşturmanıza olanak tanır.

<!– Özelleştirilmiş Data Layer Yapısı –> <script>   var dataLayer = window.dataLayer = window.dataLayer || [];   window.dataLayer.push({     ‘event’: ‘customEvent’,     ‘customData’: {       ‘key1’: ‘value1’,       ‘key2’: ‘value2’     }   }); </script>

2. Data Layer Nasıl Eklenir?

Data Layer’ı eklemek için iki temel yöntem vardır: GTM Snippet ve JavaScript kodu aracılığıyla dataLayer.push. İşte her iki yöntemi de içeren örnekler:

2.1. GTM Snippet:

Google Tag Manager’ı etkinleştirmek için sayfanızın <head> bölümüne GTM Snippet’ını eklemeniz gerekir. Bu snippet, GTM’nin sayfanızdaki etiketleri yönetmesine ve Data Layer ile etkileşimde bulunmasına olanak tanır.

<!– Google Tag Manager Snippet –> <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>

Bu kod parçası, GTM Snippet’ını sayfanıza ekleyerek Google Tag Manager’ı etkinleştirir ve Data Layer ile iletişim kurmaya hazır hale getirir.

2.2. dataLayer.push:

Data Layer’a özel bilgiler eklemek için JavaScript kodu aracılığıyla dataLayer.push kullanılır. Örneğin, bir kullanıcının sayfa görüntülemesi olayını eklemek için:

<!– Sayfa görüntüleme olayını Data Layer’a ekleme –> <script>   var dataLayer = window.dataLayer = window.dataLayer || [];   window.dataLayer.push({     ‘event’: ‘pageView’,     ‘pageType’: ‘home’   }); </script>

Bu örnek, sayfa görüntüleme olayının Data Layer’a eklenmesini sağlar. ‘event’ anahtarı olayı temsil eder ve ‘pageType’ anahtarı ise sayfa türünü belirtir.

3. GTM, Data Layer Bilgilerini/İçeriğini Nasıl Kullanır?

Data Layer bilgilerini kullanmak için GTM’de değişkenler oluşturabilir ve bu değişkenleri etiketlerinizde veya tetikleyicilerinizde kullanabilirsiniz.

3.1. Data Layer Variable Kullanımı:

Data Layer’dan gelen bilgileri kullanabilmek için GTM içinde “Data Layer Variable” (Data Layer Değişkeni) oluşturmanız gerekir. Örneğin, yukarıdaki dataLayer.push örneğinde bir sayfanın türünü temsil eden pageType değerini kullanmak için:

1. GTM hesabınıza giriş yapın.
2. Sol menüden “Variables” (Değişkenler) sekmesine gidin.
3. “New” (Yeni) değişken oluşturun.
4. Değişken türü olarak “Data Layer Variable” seçeneğini seçin ve değişken adını belirtin. Örneğin, “DLV – pageType”
5. “Variable Name” kısmına pageType yazın.

Böylece Data Layer Değişkenini hazır. Bu değişkeni istediğiniz platforma göndermek üzere kullanabilirsiniz.

3.2. Data Layer Trigger Kullanımı:

Data Layer Trigger’lar, Google Tag Manager içinde belirli Data Layer olaylarının gerçekleştiği durumları tetikleyen önemli bir özelliktir. Bu, belirli olayların gerçekleştiğinde etiketlerin veya başka GTM öğelerinin çalışmasını sağlar. Örneğin, yukarıdaki dataLayer.push örneğinde bir sayfanın görüntülenmesini temsil eden pageView olayını kullanmak için:

1. GTM hesabınıza giriş yapın.
2. Sol menüden “Triggers” (Tetikleyiciler) sekmesine gidin.
3. “New” (Yeni) tetikleyici oluşturun.
4. Tetikleyici türü olarak “Custom Event” (Özel Olay) seçin ve tetikleyici adını belirtin. Örneğin, “CE – pageView”.
5. “Event Name” (Olay Adı) kısmına pageView yazın.

Özet

Bu yazıda, Google Tag Manager ve Data Layer kullanarak web analitiği süreçlerini nasıl optimize edebileceğinizi detaylı bir şekilde ele aldık. Google Tag Manager, etkileşimleri izlemek ve analiz etmek için güçlü bir araçtır ve Data Layer, bu süreci daha da geliştirmenize olanak tanır.

Data Layer’ın temel prensiplerini ve JavaScript veri türlerini öğrendik. Olay bazlı çalışma prensibi sayesinde, web sitenizdeki belirli olaylarla ilişkilendirilmiş verileri GTM’e iletebilir ve özel analiz olayları oluşturabilirsiniz.

Data Layer’ı eklemenin iki temel yöntemini, GTM Snippet ve JavaScript kodu aracılığıyla dataLayer.push’u örneklerle gördük. Bu sayede, web sitenize özel bilgileri daha esnek bir şekilde ekleyebilirsiniz.

Son olarak, Data Layer bilgilerini GTM içinde nasıl kullanacağınızı öğrendik. Değişkenler oluşturarak ve Data Layer Trigger’ları kullanarak, web sitenizdeki etkileşimlere özel olarak tasarlanmış izleme ve analiz kodları ekleyebilirsiniz.

Bu bilgilerle, web analitiği süreçlerinizi daha etkili hale getirerek kullanıcı davranışlarını daha iyi anlayabilir ve web sitenizin performansını optimize edebilirsiniz. Google Tag Manager ve Data Layer, bu konuda güçlü araçlar sunarak veri yönetimi ve analiz süreçlerinizi kolaylaştırır.