Google Tag Manager Custom JavaScript

Google Tag Manager Custom JavaScript

Merhaba, bu yazıda google tag manager ın en işlevsel ve işimize yarayan özelliklerinden birisi olan “custom javascript” değişkeninden bahsedeceğim.

Dilerseniz konuya girmeden önce bir internet sitesinin çalışma mantığından bahsedelim, ardından ise konumuza hızlıca giriş yapalım.

Bildiğiniz üzere internet siteleri temelde 2 farklı katmana ayrılır.

Bunlardan ilki back-end ve bir diğeri front-end terimleriyle adlandırılır. 

Back-end internet sitesinin database ile bilgi alışverişini sağlarken, front-end ise kullanıcıların internet sitesine girdiğinde ne göreceği ile ilgilidir. Dönüşüm optimizasyonu anlamında bizim daha çok muhatap olduğumuz taraf ise front-end katmanı olacaktır.

Front-end kamanı en temelde HTML, CSS, JavaScript dilleri kullanılarak oluşturulur.

Html, css internet sitenin iskelet ve makyajıyla ilgilenirken, javascript ise siteye interaktivite katmak noktasında işimize yarar. 

Konumuza yavaştan girmek gerekirse, başlığımızdan da anlayabileceğiniz gibi bu yazıda sadece javascript kısmı ile ilgileneceğiz. Öncelikle javascript dili ile neler yapılabilir konusunu biraz açmak istiyorum.

• Dom manipülasyonu : sitede var olan içeriğin dinamik olarak güncellenmesi şeklinde özetleyebiliriz. Kısaca internet sayfasının sizin belirlediğiniz kurallara bağlı şekilde manipüle edilmesi.
• API İletişimi : biraz önce de bahsettiğim gibi back-end katmanı daha çok veri tabanı ile bilgi alışverişi sağlama noktasında bize yardımcı oluyor. Modern web sitelerinde, uygulamalarında veritabanı ile iletişim API sayesinde gerçekleşir ve gelen bilgileri okumak yada veri tabanına yeni bilgiler göndermek noktasında da JavaScript kullanırız.
• Animasyon : örnek olarak artık herhangi bir internet sitesinde girdiğinizde gördüğünüz “slider” yani kayan resimler javascipt kodları sayesinde oluşturuluyor.
• Ve çok daha fazlası…

Eğer aklınızda  javascript ile alakalı karanlık bir nokta kalmadıysa konuyu google tag manager ile javascript seviyesine taşımak istiyorum.

Google tag manager güçlü bir araç, fakat bu güç javascript ile birleşince yapabileceklerinizin bir sınırı kalmıyor.

Öncelikle custom javascript nedir ve neden kullanılır konusuna değinelim.

“Custom javascript” google tag manager üzerinde bulunan bir değişken türü. Bu değişken sayesinde istediğiniz javascript kod bloğunu internet siteniz üzerine çalıştırmanız mümkün. Mümkün olmasına mümkün tabi ki ama bazı sınırlamalar ve şartlarda konulmuş durumda malesef.  Bir kaç örnek vermek gerekirse ;

• Her custom javascript kodu bir “function” içinde olmalı. 
• Örnek olarak çalıştığımız sayfanın title yani başlığını değiştirmeye ihtiyacımız oldu diyelim. Bunu document.title=’sempeak’   şeklinde kullanamıyoruz. Bir fonksiyon ile sarmallamamız gerekiyor.  

function(){

document.title=’Sempeak’;

}

• Her custom javascript değişkeni bir değer döndürmeli.
• Örnek olarak diyelim ki ürünün fiyatını ve kaç adet alındığı belirten iki adet değişkenimiz var diyelim (bu veriler gelişmiş e-ticaret kurulumu doğru uygulandığı zaman dataLayer objesinin içinde yer almakta) ve biz ürün adedini ürün fiyatı ile çarpıp toplam geliri elde etmek istiyoruz

function(){

var toplamGelir=urunFiyati*urunAdedi;

return toplamGelir;

}

Yukarıdaki örnekteki gibi her bir custom javascript değişkeni mutlaka geriye bir değer “return” etmeli. Aksi takdirde oluştuğunuz değişken yüzünden değişiklikleri submit etmeniz GTM tarafından engellenecektir.

• Maalesef ES6 kullanamıyoruz.
• Beni en çok zorlayan noktalardan birisidir bu. Bilmeyenler için javascript dilinin arkasında herhangi bir geliştirici yok. Dildeki geliştirmeler open source bir proje şeklinde yürütülüyor ve gönüllü topluluk tarafından publish ediliyor. ES yani EcmaScript kavramını  javascript'in versiyonları olarak düşünebilirsiniz. Buradaki sorun şu javascript çekirdeğine herhangi bir güncelleme geldiği zaman tüm tarayıcılar bunu aynı anda kabul etmiyor. Bazısı 3 ay bazısı 3 sene sonra bu geliştirmeleri tarayıcılarında kabul ediyor. Google tag manager, eklediğiniz kodların tüm tarayıcılarda çalıştığından emin olmak için bunun önlemini henüz ES6’ya destek vermeyerek bulmuş. Arrow functions gibi çok büyük kolaylıkları henüz kullanamıyoruz malesef

• Eklediğiniz her custom javascript, her bir gtm eventinde çalışacaktır. 
• Bu nokta önemli. Diyelim ki 2. Örnekteki gibi gelir hesaplaması yapmak istedik bir custom event tanımladık. Bize sadece bir kere “gelir” bilgisi lazım değil mi? Maalesef sitede yaptığınız her harekette o kod bloğu çalışacaktır. Basitçe örneklemek gerekirse, GTM’i kurduğunuz bir sayfa açılışta üç aşamadan geçer. Page View, Dom Ready, Window Load. Oluşturduğunuz her bir custom javascript, yukarıdaki saymış olduğum her aşamada tekrar tekrar çalışacaktır. Bunun üstüne sitedeki her tıklamanız, tanımladığınız her event kısaca internet sitesinde gerçekleştirdiğiniz her etkinlik sonucu oluşturduğunuz custom javascript tekrar tekrar çalışacaktır ! Üstelik sadece custom javascript değişkenleriniz de değil, oluşturduğunuz tüm değişkenler tekrar tekrar çalışacaktır. Bu çalışma prensibinin doğuracağı performans problemlerinden bahsetmeme gerek yok herhalde…

• Sayfada değişiklik yapmak için custom javascript değişkenlerini kullanmayın
• Adı üstünde değişken. Benim 1. Örnekte yaptığım gibi sayfayı direkt custom javascript ile manipüle etmeye çalışmayın. Çünkü bu konuda da sınırlamalar var. Bu bir değişken türü olduğunu için değerler arasında hesaplamalar yapmak ve bulunan değeri geri döndürmek için kullanılması planlanmış. Eğer sayfada illaki bir şeyleri manipüle etmek istiyorsanız “Custom HTML” etiketi ile bunu yapabilirsiniz. Severek kullanıyoruz :)

• Google tag manager, yazdığınız javascript kodlarını işlemek için kendi compiler’ını kullanır.
• Yazdığınız javascript kodları önce GTM’in kendi compiler yani yorumlayıcısından geçer. Bazen kafayı yemeniz olası, Browser ile çalışırken konsol üzerinde test ettiğiniz ve hatasız çalışan bir kod parçacığı GTM üzerinde çalışmayabilir. Üzülmeyin. Biz bu şekilde kabullendik. Birkaç alternatif yol deneyip çözüme ulaşabiliyorsunuz. Ayrıca bu yazdığınız kodların unicode biçimine çevrilip, siteye eklediğimiz gtm.js içinde bir obje içinde tutulduğunu da unutmayın. Zaten javascript sıkıştırmak çok problemli bir işlemken, tag manager bunu kendisi yapınca çalışma noktasında da bazı problemler çıkabiliyor.

Aklıma gelen temel kural ve dikkat edilmesi gereken hususları kabaca belirttim. Bu aşamadan sonra görsel ve örnekler üzerinden ilerlemek istiyorum.

Bir custom javascript değişkeni oluşturmak için ilk adım, sol menüden “variables” yani değişkenler sekmesine girmeniz gerekiyor.

Ardından açılan sayfada User-Defined Variables yani kullanıcı tanımlı değişkenler bölümünde “New” butonuna tıklayın.

Açılan sayfada ki variable configuration kutucuğuna tıklayın.

Custom Javascript seçeneğine tıklayın.

Bu aşamada ise kod bloğumuzu yazıyoruz, değişkenimize bir ad veriyoruz ve kaydediyoruz.

Yukarıda gördüğünüz görselde bir değişken tanımladık, değişken değerini konsola yazdırdık ve bu değişkeni return ettik.  Kaydedip preview mode üzerinden internet sitemize girersek tag manager debugger bizi karşılayacak

Debugger’ın summary kısmında sayfa oluşan eventleri görüyoruz. Sayfa yüklendiği an oluşan event sayısı kadar yazdığımız custom javascript çalışacak. Sitemizin üzerinde tarayıcımızın konsol alanına gidersek bu sahne ile karşılaşacağız.

Zaten bu sonuçtan yazının ortalarından bahsetmiştik.  Bunun nedeni aslında örnek olarak bir tıklama sonucu bir değişkenin değişmesini isteyebiliriz, yani bir event sonucu bir değişkeninin değişmesini isteyebiliriz, Bundan dolayı yapılan her etkinlik sonucu değişkenleri güncelleyecektir.

summary kısmının altında bir etkinliğe tıklayıp, yukarıdan variable sekmesinden değişkenin adım adım nasıl değiştiğini takip edebilirsiniz.

Bu oluşturduğumuz değişkeni artık bir çok yerde kullanabiliriz. 

{{OluşturduğunCustomJavascriptAdı}} şeklinde basit bir kullanım şekli var. Süslü parantezler arasına oluşturduğunuz custom javascript adını yazarsanız kullanabilirsiniz

• Bir Custom HTML etiketi içerisinde custom javascript’in return ettiği değeri kullanabilirsiniz

• Sayfanın ön yüzünden custom javascript ile okuduğunuz bir veriyi dimension yada metric olarak analytics’e gönderebilirsiniz.

• Doğru gelmeyen e-ticaret verilerini javascript ile manipüle edip analytics’e bu şekliyle yollayabilirsiniz

Yapılabilecekler tamamen yaratıcılığınız ile alakalı.  İlerleyen yazılarımda “javascript ile e-ticaret kurulumu nasıl yapılır” konusuna da değineceğim. 

Yakında tekrar görüşmek üzere.