Tek sayfalık uygulamaları ölçme

Bu belge, tek sayfalık uygulamalarında Google Analytics'i kullanarak sayfa görüntülemelerini ölçmek isteyen geliştiriciler içindir.

Tek sayfalık uygulamalar (SPA), bir HTML belgesini bir kez yükleyen ve ek içerikleri JavaScript API'lerini kullanarak getiren web siteleridir.

Örnek: Bazı potansiyel müşteriler edinmek için bir formunuz olduğunu varsayalım. Form üç ekrandan oluşur:

• Müşteri bilgilerinin alındığı ilk ekran.
• Müşterilerin belirli hizmetlerle ilgilendiğini belirttiği ikinci ekran.
• Müşterinin ilgi alanlarıyla ilgili web seminerlerine kaydolmak için üçüncü ekran sayfası.

Tek sayfa uygulamalarındaki sayfa görüntülemelerini doğru şekilde ölçmenin anahtarı, kullanıcının etkileşimde bulunduğu her ekran için sayfa görüntülemelerini saymak ve kullanıcı yolculuğunu doğru şekilde izleyebilmek için sayfa yönlendireni doğru şekilde almaktır.

Başlamadan önce

Bu sayfada, aşağıdakilere sahip olduğunuz varsayılmaktadır:

• Web siteniz için bir Google Analytics hesabı ve mülkü. Google Analytics'i nasıl ayarlayacağınızı öğrenin.

• Web sitenize uygulanan ve sayfa ilk yüklendiğinde tetiklenen bir Google etiketi. Google etiketini nasıl ayarlayacağınızı öğrenin.

Tek sayfalık uygulama ölçümünü uygulama

Doğru SPA ölçümü uygulamak için yeni bir sanal sayfa görüntüleme tetiklemek üzere aşağıdaki yöntemlerden birini kullanın:

• Tarayıcı geçmişi değişiklikleri (önerilir): SPA'nız ekranları güncellemek için History API'yi (özellikle pushState() ve replaceState() yöntemini) kullanıyorsa bu seçeneği kullanın.

• Özel etkinlikler: Web siteniz farklı ekranları oluşturmak için DocumentFragment nesnesini kullanıyorsa bu seçeneği kullanın.

Tarayıcı geçmişi değişikliği uygulama

Tek sayfa uygulamanızda History API kullanılıyorsa tarayıcı geçmişi etkinliklerine göre sayfa görüntülemelerini otomatik olarak izlemek için Google Analytics'te geliştirilmiş ölçümü etkinleştirebilirsiniz.

GA4'te geliştirilmiş ölçümü etkinleştirme

Tarayıcı geçmişine göre page_views otomatik olarak ölçmek için:

1. Google Analytics'i açın.

2. Yönetici bölümündeki Veri toplama ve değiştirme altında Veri Akışları > Web'i tıklayın.

3. Tüm seçenekleri etkinleştirmek için Geliştirilmiş ölçüm'ün altındaki anahtarı Açık konumuna kaydırın.

4. Seçenekleri ayrı ayrı düzenlemek için tıklayın. Sayfa Görüntülemeleri bölümünde Gelişmiş ayarları göster'i tıklayın. Hem Sayfa yüklemeleri hem de Tarayıcı geçmişi etkinliklerine dayalı sayfa değişiklikleri'ni etkinleştirdiğinizden emin olun.

   

5. Değişiklikleri kaydedin.

Not: Geliştirilmiş ölçüm, "Tarayıcı geçmişi etkinliklerine dayalı sayfa değişiklikleri" için etkinleştirildiğinde Google Analytics, geçmiş etkinliklerini (ör. tek sayfa uygulamalarında kullanılanlar) otomatik olarak dinler ve page_view etkinliklerini gönderir. Sayfa görüntülemelerini GA4'e göndermek için Google Etiket Yöneticisi'nde belirli geçmiş değişkenlerini veya tetikleyicilerini yapılandırmanız gerekmez.

Geçmiş etkinlikleri için Google Etiket Yöneticisi tetikleyicilerini kullanma

Google Etiket Yöneticisi'nde tarayıcı geçmişi değişikliklerine göre başka pazarlama platformlarına veri göndermek gibi farklı etiket türlerini tetiklemeniz gerekiyorsa "Geçmiş Değişikliği" tetikleyici türünü kullanabilirsiniz.

Etiketleri veya değişkenleri Geçmiş Değişikliği tetikleyicisiyle çalışacak şekilde yapılandırırken Google Etiket Yöneticisi tarafından sağlanan doğru Dahili Değişkenleri kullandığınızdan emin olun:

• History New URL Fragment: URL'nin geçmiş etkinliğinden sonraki parçası.
• History Old URL Fragment: Geçmiş etkinliğinden önceki URL parçası.
• History New State: Yeni geçmiş durumu nesnesi.
• History Old State: Eski geçmiş durum nesnesi.
• History Source: Geçmiş etkinliğinin kaynağı (ör. popstate, pushState, replaceState).

Bu yerleşik değişkenlerin önce Google Etiket Yöneticisi'nde Değişkenler > Yapılandır bölümünden etkinleştirilmesi gerekebilir.

Bu tetikleyici hakkında daha fazla bilgi için Geçmiş değişikliği tetikleyicisi başlıklı makaleyi inceleyin.

Ölçüm ayarlarınızı doğrulama

Tek sayfalık uygulamanızın sayfa görüntülemelerini doğru şekilde ölçtüğünü doğrulamak için:

1. SPA ölçüm ayarlarınızdaki her etiket için hata ayıklama modunu etkinleştirin. DebugView'da etkinlikleri izleme hakkında bilgi edinin.

2. Tek sayfalık uygulamanızı tıklayarak inceleyin. Yeni bir sanal ekrana tıkladığınızda DebugView'da yeni bir page_view etkinliği görmeniz gerekir. Sayfa yönlendirenin ve sayfa konumunun doğru şekilde güncellenip güncellenmediğini kontrol etmek için page_view etkinlik parametrelerini önceki page_view etkinliğiyle karşılaştırın.

Tek sayfa uygulamalarıyla ilgili ek önemli noktalar

page_view etkinlikleri göndermenin yanı sıra Google Analytics ile güçlü bir SPA entegrasyonu ve daha iyi bir kullanıcı deneyimi için şu ek hususları da göz önünde bulundurun:

Kaydırma konumunu yönetme

Kullanıcılar bir SPA'da görünümler arasında gezinirken tarayıcı genellikle mevcut kaydırma konumunu korur. Bu durum, kullanıcıların yeni sanal sayfanın üst kısmını görmemesine neden olabilir ve kaydırma derinliği izlemeyi etkileyebilir.

Öneri: Her sanal sayfa geçişinden sonra kaydırma konumunu programatik olarak sayfanın veya ana içerik kapsayıcısının en üstüne sıfırlayın.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Bu değişiklikle birlikte kullanıcılar yeni içeriğin en üstünden başlayacak. Böylece Google Analytics kaydırma izleme özelliği, yeni sanal sayfadaki etkileşimi doğru şekilde ölçebilecek.

Tarayıcı özelliklerinde içerik erişilebilirliğini sağlama

Kullanıcılar, sanal sayfa yüklemesinden sonra sayfa içi arama (Ctrl+F) gibi tarayıcı özelliklerinin çalışmadığıyla ilgili sorunlar bildiriyorsa bu durum, SPA'nızın DOM'u nasıl güncellediğini gösterebilir.

Öneri: SPA çerçevelerinizin ve yönlendirme mantığınızın, DOM'un ilgili bölümlerini yeni sayfanın içeriğiyle tamamen ve eşzamanlı olarak güncellediğinden emin olun. Gecikmeli oluşturma veya ana DOM ağacından gizlenen içerikler, tarayıcının arama işlevi tarafından hemen dizine eklenemeyebilir. İçeriğe erişilebilirliği onaylamak için sanal gezinmelerden sonra sayfa içi aramayı test edin.

Otomatik etkinliklere etkisi

Sanal sayfa görüntüleme ölçümünü SPA'nızda doğru şekilde uygularsanız Google Analytics diğer otomatik etkinlikleri uygun şekilde işler. Ekran değişiklikleri için sanal sayfa görüntülemeleri kaydedilmezse Google Analytics, tek sayfalık uygulamayı tek bir sayfa olarak değerlendirir ve bu da metriklerin çarpık olmasına neden olur.

Örneğin, user_engagement etkinliği, kullanıcının bir sayfada etkin olarak geçirdiği süreyi ölçer. Sanal sayfa görüntülemeleri olmadan tüm etkileşim süresi ilk sayfa yüklemeyle ilişkilendirilir. Bu da tek tek ekranlarda geçirilen sürenin analiz edilmesini imkansız hâle getirir.

Sanal sayfa görüntüleme ölçümü doğru şekilde uygulandığında:

• Kullanıcı bir sanal sayfadan diğerine geçtiğinde user_engagement etkinliği gönderilir.
• Önceki sanal sayfanın etkileşim süresi hesaplanır ve user_engagement etkinliğiyle birlikte gönderilir. Bu işlem genellikle yeni sanal sayfanın page_view etkinliği işlenmeden hemen önce yapılır.
• Tıklamalar veya kaydırmalar gibi diğer etkinlikler, kullanıcının şu anda görüntülediği sanal sayfanın page_location ile ilişkilendirilir.

Bu sayede, tek sayfa uygulamanızdaki ekranlar veya bölümler için kullanıcı etkileşimini ve diğer metrikleri analiz edebilir, kullanıcı yolculuğu hakkında daha doğru bir anlayış elde edebilirsiniz.