Google Tag Manager ile Ölçümleme Analizi

Google Tag Manager ile Ölçümleme Analizi

GTM (Google Tag Manager) ile takip etmek istediğiniz aksiyon form gönderimleri olduğunda iş birazcık karışıyor. Çoğu zaman form gönderimlerini takip eden bir sayfa tablosu ya da HTML etiketlerinde validasyon özelliğinin kullanılması kolay bir şekilde kurulum yapabilmeniz için yeterli oluyor. Ancak form gönderimleri yeni bir sayfa ile takip edilmiyorsa ya da standart olmayan bir form etiketi kullanılıyorsa iş biraz daha özel çözümlere gitmek gerektirecek.

Yazının devamında yani bundan sonrası, GTM içerisindeki yerel ve dış tetikleyiciler ile takip edilmesi pek de mümkün olmayan form işlemlerinin ölçümlenmesi için çözüm oluşturmak olacaktır.

Başlamadan önce, hatırlatma yapmak istiyorum. Ağ trafiğini dinleyerek gerçekleştirdiğiniz kurulumu aşağıdaki koşullarda kullanmanızı tavsiye ediyoruz:

  • Form gönderiminin akabinde gösterilen bir teşekkür sayfası bulunmuyorsa
  • HTML düzenleyicisindeki form etiketleri, GTM’in yerel Form Gönderme tetikleyicisinin sağlıklı bir şekilde çalışmasına olanak sağlamıyorsa
  • Yukarıdaki herhangi bir seçenek için geliştirme yapılabilecek zaman ve bütçe kaynağı bulunmuyorsa

Bu koşulları barındırıyorsanız, kurulum için gerekli talimatları okuyarak devam edin.

Kurulum basit şekilde olacak: Form gönderimlerini ağ trafiğindeki istekleri izleyerek yakalayıp, her yeni form gönderimini Google Sheets’te oluşturduğumuz tabloya yeni bir kayıt olarak ekleyeceğiz. Ardından Nightmarejs ile testlerimizi başlatacağız.

Nelere İhtiyacımız Olacak?

Tarayıcınızın yapacağı XHR isteklerini izlemenize olanak sağlayan küçük boyutlu bir script oluşturmamız gerekiyor.

Google Sheets dökümanımıza gelen isteklere yanıt vermek ve yeni kayıt oluşturmak için kullanacağımız Apps Script makrosu bize burada büyük bir avantaj sağlayacak.

Düzenli olarak giriş yapılacak forma girilen kullanıcı bilgilerini saklayacak değişkenler ile fonksiyonları eşleştirmemiz gerekiyor.

Basit adımda oluşturacağımız script’i sağlıklı bir şekilde çalıştırabilmek için herhangi bir web sayfasına kendi GTM kapsayıcımızı eklememize olanak sağlayacak bir Nightmarejs ortamı oluşturmamız gerekiyor.

Google Tag Manager ile Ağ Trafiğini İzlemek

XHR -XMLHttpRequest-, varsayılan tarayıcınızda çalışan script’lerin uzak sunucular ile veri alışverişi yapabilmesini sağlayan http arayüzü olanak tanımlanıyor. Çoğu zaman bir form gönderimi ile iletilmek istenen bilgilerin web sitesinin kayıtlarına erişim sağlayabilmesi için XHR kullanımının gerekli olduğunu söyleyebiliriz. Dolayısıyla, ağ trafiğini izlemek için oluşturacağımız yani yazacağımızın script’in XHR tipindeki trafiği izlemesi gerekiyor.

Aşağıdaki görseldeki kodlar sayesinde script tam olarak bunu yapıyor olacak:

Bu script sayesinde tarayıcının varsayılan XHR davranışına ufak bir ekleme yaparak herhangi bir isteğin cevabına erişebilmemize olanak sağlıyor. Bu kod parçası içerisinde kurulum aşamasında bizim için önemli olacak ve mutlaka özelleştirmemiz gereken 2 alan bulunuyor.

İlki, 14-cü satırda bulunan targetURL değişkenidir.

Bu değişkenin değerini, form gönderiminde istek yapılan bağlantı adresi ile yani URL ile değiştirmemiz gerekiyor. İlerleyen kısımlarda hedef URL’mizi nasıl tespit edebileceğinizi öğreneceksiniz.

İkincil düzenlenmesi gereken alan ise, 16-cı ve 24-cü satırlardır.

Bu bölümde, XHR isteği yapılan adresin bizim takip etmek istediğimiz adres ile aynısı yazmamız gerekiyor. Bazen aynı adres olabiliyor. Bu yüzden ilk önce takip etmek istediğiniz adres olup olmadığını kontrol edin. Eğer hedef URL’imize yapılan isteğin cevabını bulduysanız o zaman Google Sheets için oluşturacağımız etiketi çalıştıracak yani tetikleyiciyi bu bölümde oluşturuyoruz.

Yukarıdaki örnekte, dataLayer’a ileteceğimiz bir “custom event” yani “özel etkinlik” ile Google Sheets için kullanacağımız etiketi tetikleyeceğiz. Dilerseniz, Fetch API kullanarak yeni bir tetikleyici veya etiket kullanmadan, doğrudan bu kod bloğu içerisinde Google Sheets dokümanınıza istek gönderebilirsiniz.

Ayrıca dataLayer’a iletilen nesne içerisinde “message” adında değişken de bulunuyor. Bu tamamen tercihe bağlı olarak kullanabileceğiniz bir değişkendir. Başarılı bir form gerçekleştirildiğini kontrol edebilmek için “message” değişkeninin değerini doğru bir şekilde kullanmanız gerekiyor. İhtiyaçlarınız doğrultusunda yakaladığınız yanıtı nasıl kullanacağınıza karar vermeniz gerekiyor.

Artık ikinci adıma geçiş için yeterli bilgiye sahipsiniz.

Google Sheets Hesap Tablosuna Yeni Kayıt Ekleme

Google Sheets, Apps Script altyapısını kullanarak makrolar sayesinde hesap tablosu oluşturmaktan daha fazlasını sunan etkili bir araçtır.

Aşağıdaki script, Google Sheets dökümanımıza özel olarak oluşturacağımız bağlantıya yapılan http isteklerindeki sorgu parametrelerini okuyup, hesap tablomuza yeni satırlar eklememize olanak sağlayacaktır:

Bu kod parçası içerisinde kişiselleştirilmesi gereken bölüm ise _getParams fonksiyonun içeriğidir.

Parametre ismini ve her bir parametre için oluşturacağımız fonksiyonları belirlemeli ve bu bölümü kendi kişiselleştirmiş olduğumuz satırlarla değiştirmeliyiz.

Nightmarejs ile Tarayıcı Otomasyonu

Nightmarejs, büyük ölçekli tarayıcı otomasyonu yapabilmenize olanak sağlayan kaliteli ve kullanışlı bir API hizmeti sunuyor. Kaliteli ve kullanışlı olması sayesinde ölçümleme kurulumlarının test aşamasında da oldukça faydalı bir araç oluyor. Her ne kadar geniş bir kapasiteye sahip olsa da, bizim amacımız burada kısıtlı olacak.

Nightmarejs ile tarayıcı penceresi çalıştıracağız ve GTM kapsayıcımızı örnek kurulum için seçtiğimiz sayfaya hedef göstereceğiz. Demo kurulum için ister iletişim bölümündeki isterse ana sayfadaki bülten olsun seçebilirsiniz. Bu şekilde GTM kapsayıcımızı nasıl enjekte edebileceğimizi öğrenmiş olacağız.

Uyarı: Nightmarejs’i çalıştırabilmek için Nodejs script’ne ihtiyacınız var. Bu aşamalarda zaman kazanmak için TMI yani Tag Manager Injector eklentisini kurup kullanabilirsiniz.

Aşağıdaki script’i dosyaya kayıt edin. Ardından komut satırı yardımıyla Node üzerinden çalıştırın.

16-cı satırdaki parantezler içerisinde formun bulunduğu sayfayı yazarak bu kodu kişiselleştirmeniz gerekiyor. Aynı zamanda aynı dizinde container.js adlı dosya oluşturarak GTM takipçinizi <script> etiketleri olmadan bu dosyaya eklemelisiniz.

Örnek container.js içeriği:

Size özel GTM kapsayıcınızı enjekte edeceğiniz sayfada hali hazırda mevcut bir GTM takipçisinin bulunması bir sorun oluşturmayacaktır. Neredeyse hazırız ve kurulum aşamasına geçiş yapabiliriz.

Değişkenler

GTM üzerinde oluşturacağımız takipçi için bir takım değişkenlere ihtiyacımız var.

İlk olarak, form alanlarını yakalayacak ufak bir JS yani JavaScript fonksiyonu yazacağız.

Aşağıdaki fonksiyon basit ve kullanışlıdır:

Workspace sekmesinden Variables (Değişkenler) > New (Yeni) > Custom JavaScript (Özel JavaScript) adımlarını takip ederek yukaridakı fonksiyonu yeni bir değişken olarak tanımlayıp kayıt edin.

Bu değişkene “Form Bilgileri“ ismini vererek bir sonraki adıma geçiyorum.

Sabit bir “Google Analytics” takipçisinin her tarayıcı için oluşturduğu özgün çerez tanılmayıcısı “clientId” bilgisini de hesap tablosuna enjekte edeğiz.

Bunun için aşağıdaki fonksiyon, sayfada üretilen tüm “clientId”leri enjekte edecektir.

Yukarıdaki değişkenin adımlarını takip ederek “ClientId Değerleri” isimli bir Özel JavaScript değişkeni oluşturup kayıt edin.

Sırada form gönderimi sonrasında ise gelen cevabı saklayacağımız fonksiyon bulunuyor. Bunun için aşağıdaki gibi bir örnek “dataLayer” yani “Veri Katmanı” oluşturabilirsiniz. 

Değişkenlerimiz neredeyse tamamlandı. Son bir değişken daha oluşturmamız gerekiyor. Etiketlere geçmeden önce Google Sheets dokümanımızı ve makromuzu hazırlamamız gerekiyor.

“Microsoft Excel” ile yeni bir hesap tablosu oluşturun. İstediğiniz şekilde başlıkları ekleyin.

Ardından üst menüden Tools (Araçlar) > Script Editor (Komut Dosyası Düzenleyicisi) adımlarıyla makro ekranına geçiş yapın.

Daha önce hazırladığımız script’i yapıştırın. Projeye yeni isim verin ve kayıt edin.

Google Sheets’teki son adımımız, makromuzu bir web uygulaması olarak yayınlamaktır. Bunun için editör ekranında üst menüden Publish (Yayınla) > Deploy as web app (Web uygulaması olarak yayınla) adımlarını takip edin.

Açılan sekmede size özel seçenekleri seçin. Ardından makronuzun bağlantısını girin ve OK butonuna tıklayın.

İşlem tamamdır. Artık istek gönderdikten sonra Excel tablonuza gelen cevapları görüntüleyebilirsiniz.

Sonuç Olarak

Bazen raporlama ve ölçümleme kurulumlarında yeni bir çözüm üretmemiz gerekiyor. Bu yazıda da alternatif bir şekilde daha az eforla ölçümlemelere uygun bir tablo oluşturabileceğinizi açıkladık. Dolayısıyla çok da güvenli bir çözüm değil. Uygulamanız üzerinden yüzlerce istek gönderin ve açık kalmamasına olanak sağlayın. Farklı farklı tarayıcılarda denemenizde fayda var.

Sosyal Medyada Paylaş

Peki Siz Bu Konuda Ne Düşünüyorsunuz?