GTM Element Visibility ile Sanal Sayfa Entegrasyonu Nasıl Yapılır

Product Analytics - 05 Eylül 2022

Product Analytics

Ürün Analitiği & Veri

Bu blog içeriğimizde yukarıdaki sorunun cevabını bulacak;  Sanal Sayfa nedir, Sanal Sayfanın avantajları ve dezavantajları nelerdir, GTM Element Visibility ile Sanal Sayfa Entegrasyonu yaparak yazılımcı desteği olmadan bu süreç nasıl yönetilebilir konularında detaylı bir öğrenim sağlayacaksınız.

Sitenizde sayfa url’i değişmeden içeriğin değiştiği durumlarda zaman zaman ek sayfa ölçümlemelerine ve daha detaylı analizlere ihtiyaç duyabilirsiniz. Bu gibi durumlarda detaylı funnel analizi yapabilmeniz içinde yukarıdaki sözünü ettiğim tanımların ne anlama geldiğini ve Element Visibility ile herhangi bir yazılımcı desteği olmadan GTM üzerinden nasıl kurulum yapabileceğinize bakalım.

Sanal Sayfa (Single Page Application) Nedir?

Sitenizin daha hızlı bir performans göstermesi konusunda avantaj sağlayan Sanal Sayfa kısaca SPA (Single Page Application), sunucudan yeni sayfaların tamamını yüklemek yerine geçerli olan sayfanın dinamik bir şekilde yeniden yazılması ile kullanıcıyla etkileşime giren web uygulamalardır.

SPA (Single Page Application) olan bir sitede, siteniz açıldığında bütün kaynak kodları aynı anda bir kere yüklenir ve bu tek bir kere yüklenen kaynak kodları kullanıcılara yeni sayfalar gösterilirken ön yüzdeki kodlar çalıştırılarak gösterilir. Buradaki avantaj ise kullanıcının farklı bir sayfaya geçiş yaptığında bu kodların tekrar yüklenmesini beklememesidir. Özetle,  Sanal sayfa site hızının artmasını sağladığı için kullanıcı deneyimi açısından oldukça önemlidir.

Örneğin, bir e-ticaret web sitesinde gezindiğinizi ve gezindiğiniz sayfalar içerisinde bulunan ürünlerin her birini açıp incelediğinizi düşünelim. Burada her defasında farklı bir sayfa açarak sunucuya yeni bir istek gönderiyorsunuz ve sunucu size yanıt olarak görüntülemek istediğiniz tüm sayfaları yeniden size gönderiyor. Bu senaryo da her ne kadar her şey olması gerektiği gibi gözükse de, site trafiğinizin yoğun olduğu bir dönemde site hızınız açısından ciddi sorunlar yaratabilir. 

Bu örneği SPA açısından düşünecek olursak, tüm kaynak kodları en başından yükleneceği için sizin site içerisinde gezinirken alacağınız aksiyonlar gelen isteğe göre şekilleceğinden dolayı site hızınızı olumsuz etkilemez. Bir sayfaya tıkladığınız zaman sayfa değişir ancak yeniden yüklenmez.

Ancak elbetteki artan site hızının yanında sanal sayfaların siteniz üzerinde olumsuz bir etkisi de vardır. SPA sitelerinde kaynak takibinin bozulması söz konusu olabilir ve bu duruma rogue referrer ismi verilmektedir. Referrer kaydı, web sitenizde gelen kullanıcıların hangi kaynaktan geldiklerini, ne kadar kaldıklarını saptayabilmek ve analiz edebilmek için oldukça önemlidir.

Buna ek olarak SPA uygulamaları, SEO açısından da bir dezavantaja dönüşebilmektedir. Şöyle ki SPA uygulamaları tek bir sayfa gibi gözüktüğünden sitenizin gerektiği şekilde indekslenmesini engelleyerek sayfa sıralamanızın düşmesine sebebiyet verebilmektedir.

Yukarıda sözünü etmiş olduğumuz avantaj ve dezavantajları özetlemek gerekirse;

SPA (Single Page Application) ‘nın Avantajları:

• Hız / Performans: Daha önce de belirtmiş olduğum gibi SPA kullanımınında kullanıcı ile etkileşime giren web uygulaması tüm sayfayı her seferinde yeniden yüklemek yerine dinamik bir şekilde sayfayı yüklemeden içeriği güncellediği için kullanıcının site içerisinde hızlı bir şekilde aksiyon almasını sağlar.
• UX (Kullanıcı Deneyimi): SPA uygulamaları, sayfalar arasında kullanıcı deneyiminin kesintiye uğramasını engelleyerek mobil uygulamalara yakın bir deneyim sağlar. Bu sayede kullanıcıya etkili ve pratik bir süreç sunar.
• Caching (Önbellek): SPA’lar geliştiricilerin cache dediğimiz önbelleğin çok daha hızlı bir şekilde oluşturulmasına izin verir. Böylelikle lokal veriler ve bağlantı akışı SPA uygulamalarında etkili bir şekilde kullanılabilmekte, herhangi bir internet kopması ya da yavaşlaması durumunda dahi kullanıcının siteyi kullanabilmesini sağlamaktadır. 

SPA (Single Page Application) ‘nın Dezavantajları:

• Rogue Referrer: SPA uygulamalarında, kaynak takibinin bozulması sebebiyle referrer olarak gelen kullanıcıların saptanması zorlanabilir. Bu durum detaylı funnel analizini engelleyebilir.
• SEO açısından: SPA uygulamaları, SEO açısından değerlendirilecek olunursa sitenizdeki sayfanın tek bir sayfa olarak gözükmesi sebebiyle indekslenmesini engelleyebilmektedir.

GTM üzerinden kurgulanan All Pages triggerı her sayfa yüklenmesi durumunda tetiklendiği için için Sanal Sayfa Entegrasyonu olan web sitelerinde Analytics tarafından ölçümlenemez. Bu durum ise detaylı funnel analizi yapmak istediğimizde karşımıza bir engel olarak çıkar. 

Bu durumun önüne geçebilmek için önce, Sanal Sayfaların sitemizde kullanıldığı alanlara ve ardından Sanal Sayfa Entegrasyonu Nasıl Yapılır, GTM Element Visibility ile Sanal Sayfa Entegrasyonu konularına bakalım.

Sanal Sayfaların Kullanıldığı Alanlar

• Sanal Sepet Sayfaları: Sanal sepet sayfaları sepet adımına gitmeden önce sağ veya sol tarafta yandan açılan Sepet & Sipariş Özeti sayfalarıdır.

• Lead Generation Sayfaları: Sitenizde yer alan SMS ve onay pop-uplarında genellikle sanal sayfalar kullanılmaktadır.

Sanal Sayfanın Kullanıldığı Bazı Önemli Örnekler:

• Gmail
• Facebook
• Twitter
• Google Drive
• Google Maps
• Netflix

Sanal Sayfa Entegrasyonu Nasıl Yapılır?

Sanal Sayfa Entegrasyonu yapmanın birkaç yolu vardır. Bu yollardan ilk akla geleni yazılımcı desteği ile native veya GTM üzerinden event pushlanmasıdır. Her ne kadar bu seçenek daha kolay ve pratik gibi gelse de sizi yazılımcıya bağlı kılacağı için işlerin yavaşlamasına ya da herhangi bir problem durumunda ilgili evente doğrudan müdahale edemeyeceğiniz için hızlı aksiyon alamamanıza sebebiyet verebilir.

Bir diğer yöntem ise birazdan detaylıca anlatacağım GTM Element Visibility ile Sanal Sayfa Entegrasyonudur. GTM üzerinden kurulacak element visibility triggerı ile yazılımcı desteğini senaryodan çıkararak daha hızlı sonuçlar alabilir ve detaylı funnel analizleri yapabilirsiniz. 

GTM Element Visibility ile Sanal Sayfa Entegrasyonu

Yukarıda sözü geçen Sanal Sepet Sayfası ve Lead Generation için bu yazımızda Sanal Sayfa entegrasyonu için GTM seçeneğini kullanacağız. GTM Element Visibility ile Sanal Sayfa Entegrasyonu yapabilmeniz için öncelikle web sitenizde GTM kodunun ekli olması gerekmektedir. Ardından GTM’in bize sunmuş olduğu Element Visibility triggerı ile gerekli kurulumlara başlayabiliriz. Ancak öncesinde gelin Element Visibility triggerını daha iyi anlayalım ve bu triggerın hangi durumlarda ve ne şekilde tetiklendiğini görelim. 

GTM üzerinde Trigger > New Trigger dediğimizde öncelikli olarak karşımıza aşağıdaki ekran çıkmaktadır.

Trigger Configuration alanına tıkladığımızda ise GTM bizden trigger type seçmemizi ister.

Trigger type olarak Element Visibility seçeneğini seçtiğimizde ise bizi aşağıdaki ekran karşılamaktadır.

Burada sayfadaki sıralamaya göre gidilecek olunursa ilk önce Selector Method alanından kullanacağımız selector methodunu seçmemiz gerekiyor. Eğer ID kullanacaksak ilgili sayfada bulunan elementin ID’sini buraya yazmak yeterli olacaktır. Ancak ID dışında CSS seçeceksek element selector bilgisini yazmamız gerekiyor. (Bu arada ID seçtiğimizde de yine CSS seçip bu inputa #id şeklinde yazabilmekteyiz.)

Element Visibility triggerı 3 şekilde tetiklenmektedir:

• Once per page ile Element Visibility triggerımız sayfada sadece bir kere tetiklenecektir. Bu sayede kullanıcının bir pop-up gördüğünde Analytics’e her seferinde hit göndermesi yerine sadece bir kere gönderilmesi sağlanmaktadır.
• Once per element seçtiğimizde ise element başına trigerrımızın tetiklenmesini sağlarız. Eğer kullanıcının bir SMS onay pop-up’ında bilgilerini yanlış girip tekrar pop-up’un açılmasını sebebiyet verdiği bir durumda yeniden sayfa sayımı yapmak istiyorsak bu seçeneği seçmek akıllıca olacaktır.
• Every time an element appears on screen seçeneğinde ise kullanıcının her seferinde en az % minimum percent visible alanına girdiğimiz değer kadarını gördüğümüzde tetiklensin demekteyiz. 

Percent visible, triggerımız etkinleştiğinde seçili öğenin ne kadarının görünür olduğunu belirten sayısal bir değerken; minimum percent visible ise, seçilen öğenin yüzdelik olarak en az ne kadarının görüntülendiğinde tetiklenmesini istediğimiz alandır. Burada farklı bir yüzdelendirme yapılabileceği gibi varsayılan olarak, tetikleyicinin etkinleşmesi için öğelerin en az %50’si ekranda olmak zorundadır. 

Bu noktada Advanced ayarlar içerisinde minimum on screen duration alanını seçerek de kullanıcıların ilgili öğeyi (selektörü) seçtiğimiz alanın sayfada en az 1 saniye gördükten sonra tetiklenmesini de seçebiliriz. 1 saniye değer cinsini ise 1000 ms değerinden yazmak gerektiğini de belirtelim.

Son olarak eğer seçtiğimiz selektör sayfada sonradan ortaya çıkıyorsa observe DOM changes özelliğini seçmeliyiz ki, sayfa yüklendikten sonra istediğimiz alan tetiklensin. Eğer görüntülenmesini istediğimiz öğe sayfanın başından beri sayfada bulunuyorsa bu seçeneği seçmemize gerek olmamaktadır. 

Element Visibility’nin genel olarak nasıl çalıştığını öğrendikten sonra gelin sanal sayfaların kullanıldığı alanlardan olan sanal sepet sayfaları ve lead generation sayfalarında GTM Element Visibility ile entegrasyonu nasıl yapacağımıza bakalım.

Sanal Sepet Sayfaları için GTM Element Visibility Entegrasyonu

Yukarıda anlatılanlardan yola çıkarak öncelikle bir selector seçmemiz gerekmektedir. Bunun için görüntülenen alanın üzerine tıklayarak Inspect> Elements alanına tıklamalıyız. 

Yukarıdaki örnekte belirli bir ID bilgisi ver almadığı için class üzerinden giderek, sitedeki olası bir değişikliği de göz önüne alarak en sade olan selectorü seçmeliyiz. 

Burada kullanacağımız selector aşağıda box-flex classı altındaki cart-summary olacak.

document.querySelector("box-flex. cart-summary")
. . . 

Seçtiğimiz selectorün doğruluğundan, sayfada tek olduğunu ve sanal sepet sayfasında görüntülendiğinden emin olabilmek aşağıdaki şekilde concole üzerinden bir arama gerçekleştirip Lenght değerinin 1 olduğundan emin olduktan sonra GTM üzerinden kuruluma devam edebiliriz. 

`document.querrySelector(“box-flex. cart-summary”)`
`NodeList [div.cart-summary.cart-summary-container.cart-summary-sticky]`
`> 0: div.cart-summary.cart-summary-container.cart-summary-sticky`
`Length: 1`
`__proto__: NodeList`

Trigger’ın kurulumunu tamamladıktan sonra Tag kurulumuna geçebilir ve kuracağımız tagı sayfa sayımı olarak PageView hitinde seçerek Analytics’e verilerimizi pushlayabiliriz. Ancak Analytics’te page değerlerimizin sayfa URL’inden gitmemesi için More Settings > Field to Set override etmeyi unutmamalıyız. Burada kendi istediğimiz isimlendirme ile sayfanın isim ve başlığı page ve title olarak gönderebiliriz.

Lead Generation Sayfaları için GTM Element Visibility Entegrasyonu

Lead Generation sayfalarında bazen SMS onayı farklı bir sayfada değil pop-up olarak kullanıcıya gösterilebiliyor. Bu gibi durumlarda sayfa sayımı yapılmadığı ve pop-up takip edilmediği için kullanıcıların SMS funnelını ne zaman terk ediyor ya da terk ediyor mu, bu adımda ne kadar aksiyon alan kullanıcılar ve bunları kaçırabiliyoruz. 

Burada da GTM Element Visibility ile SMS modelini kullanıcı görüntülediği zaman page view olarak Analytics’e pushalayabiliyor ve bu sayede detaylı funnel analizi yapabiliyoruz. 

Böylece yukarıdaki örneklerden yola çıkarak Sanal Sepet sayfası olan ya da pop-up şeklinde lead generation sayfasına sahip markalarınızda yazılımcı desteği olmadan GTM Element Visibility ile Sanal Sayfa Entegrasyonu yaparak bu sayfaların performanslarını daha iyi ölçümleyip analiz yapabileceksiniz.

Bir sonraki yazımızda görüşmek dileğiyle…