Google Analytics’in Eticaret ölçümlemesi genellikle Google Analytics uygulumasının en yoğun geliştirici kısmıdır. Çünkü işlem onayı sayfasında(transaction) ve diğer geliştirilmiş e-ticaret (Enhanced Ecommerce) ölçümleme adımlarında (product impressions, product click, addtocart, checkout steps ve diğerleri…) site geliştiricileri tarafından oluşturulmuş bir veri katmanı(Data Layer) gerektirir. Data Layer, ölçümlenen adıma spesifik bir şekilde bütün ilgili verilerin bulunduğu kısım olup içinde transaction id, ürün id, ürün ismi, ürün fiyatı, ürün sayısı gibi verileri bulundurur. Süreç; bu verilerin Google Tag Manager(GTM) ile okunup Google Analytics sunucularına gönderilip Google Analytics’te barındırılması, analizlendirilmesi ve raporlandırılıması şeklinde devam eder.
Peki ya geliştirici tarafında bu Data Layer’ları Google Analytics uzmanlarının kullanması için oluşturacak biri yoksa veya bu Eticaret ölçümlemesini sadece Google Tag Manager aracılığı ile uygulamak zorundaysanız?
Bu yazıda Eticaret ölçümlemelerinin tamamen GTM üzerinden kendi tarafınızdan nasıl ayarlanacağını anlatacağız. Standart yollarda geliştirici tarafından oluşturulması gereken Data Layer’ı DOM üzerinden kendimiz oluşturup oluşturmuş olduğumuz bu verileri yine GTM ile okuyup Google Analytics’e göndereceğiz. Belirtmemiz gerekir ki; bu tür DOM scraping yapılarak uygulanan işlemlerin uzun vadede güvenilir değildir. Sadece kısa vadeli çözümlerde ve başka seçeneğin kalmadığı durumlarda uygulanması daha doğru olacaktır.
Biz bu yazımızda geliştirilmiş eticaret uygulamasının Product Impressions adımının nasıl uygulanacağını göstereceğiz. Bu yazıyı referans alarak diğer adımlar için de uygulayabilirsiniz. Yalnız şunu belirtmemiz gerekir ki; burada kullandığımız CSS seçiciler siteye özeldir ve temel Javascript kodlarını yazarken bu seçicileri kendi sitenize özel olarak uygulamanız gerekmektedir.
İçerik
Dataları Toplayıp Değişkenlere Atamak
Enhanced Ecommerce dokümantasyonuna göre Product Impression layerımız aşağıdaki gibi olmalıdır.
Bu Data Layer’a göre ürün ismi, ürün id’si, ürün fiyatı, ürünün markası, ürünün kategorisi ve ek olarak variant bilgilerine sayfadan ulaşabiliyor olmamız gerekmektedir.
Sayfadan Verileri Scrape Ederek Javascript Değişkenlerine Atamak
Sayfamızda bulunan ürün bilgilerini Javascript’in document.querySelector metodu ile aşağıdaki gibi çekiyoruz.
GTM’de Custom Javascript ile variable oluşturup Ürün Id’si değişkenini aşağıdaki gibi oluşturuyoruz.
Ben variable oluşturma işlemini sadece Ürün Id’si için gösterdim. Yukarıdaki variable oluşturma işlemini ‘ürün ismi’, ‘ürün fiyatı’, ‘ürün kategorisi’, ‘ürünün markası’ değişkenlerini de yukarıdaki yolu izleyerek tekrarlıyoruz.
Custom HTML ile dataLayer Event’inin Basılması
Değişkenlerimizi oluşturduktan sonra bu değişkenleri kullanarak GTM’de Custom HTML tagı ile dataLayer’ımızı oluşturuyoruz.
Trigger olarak ben sadece ürün detay sayfalarında çalışacak bir pageView triggerı kullandım. Siz de ayırt edici bir ürün sayfası path’i varsa onu kullanabilirsiniz.
Artık bir Enhanced Ecommerce dokümantasyonuna uygun bir Product Detail dataLayer’ımız mevcut.
Google Analytics Product Detail Tagının Oluşturulması
Oluşturduğumuz Data Layer’ı artık Google Analytics’e gönderebiliriz. Bunun için bir Universal Analytics tagı oluşturup Track Type’ı Page View seçiyoruz. “Enable overriding settings in this tag” kutucuğunu aktif hale getiriyoruz.
Ardından More Settings içinden Ecommerce altındaki Enable Enhanced Ecommerce Features bölümünü True yapıp, Use Data Layer kutusunu aktif hale getiriyoruz.
Trigger olarak Custom Event seçip Event Name bölümüne dataLayer olarak pushladığımız event ismini giriyoruz. Ben aynı zamanda garanti olması adına bu triggerın sadece ürün sayfalarında çalışabilir olması için sadece page path’i /p/ olan sayfalarda çalışmasını tercih ettim.
Özet
Yukarıdaki adımlarda, tüm ilgili Ecommerce değerlerini Javascript kodlarını ve CSS seçicilerini kullanarak sayfadan alıyoruz ve bunları GTM değişkenlerinde topluyoruz. Daha sonra bu değişkenleri kullanarak bir Enhanced Ecommerce Data Layer’ı oluşturan özel bir HTML etiketi belirliyoruz. Son olarak, bu Data Layer’ı okuyan ve bilgileri Ecommerce raporlarını doldurmak için Google Analytics’e gönderen bir Universal Analytics tagı oluşturuyoruz.
Tekrar söylemek gerekirse, bu yöntem uzun vadeli bir çözüm olarak önerilmemektedir, çünkü sayfa düzenindeki herhangi bir değişiklik CSS seçicilerini bozabilir ve aksamalara neden olabilir. Ancak GTM’in gücünü göstermesi açısından ve ihtiyaç duyulduğunda uygun bir seçenek olarak her zaman kullanılabilecek olmasından dolayı değerlidir. Bu konuda yapılması en sağlıklı yöntem site geliştiricileri tarafından sağlanacak olan Data Layer’ı okumak ve ölçüm yapımızı bunun üstünden kurmak olacaktır.
