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