Tek sayfalık uygulamaları ölçme

Bu doküman, Google Analytics'i kullanarak tek sayfalık uygulamalarındaki 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 JavaScript API'lerini kullanarak ek içerikleri getiren web siteleridir.

Örnek: Potansiyel müşteri kazanmak için bir formunuz olduğunu varsayalım. Formda üç ekran vardır: > * Müşteri bilgilerini yakalamak için ilk ekran. * Müşterilerin belirli hizmetlere ilgi gösterdiği ikinci ekran. * Üçüncü ekran sayfası, müşterinin ilgi alanlarıyla ilgili web seminerlerine kaydolmak için kullanılır.

SPA'lardan gelen 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 sayfa yönlendirenini doğru şekilde almaktır. Böylece kullanıcı yolculuğunu doğru şekilde izleyebilirsiniz.

Başlamadan önce

Bu sayfada, aşağıdakileri zaten yaptığınız 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 etkinleşen 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 aşağıdaki yöntemlerden birini kullanarak yeni bir sanal sayfa görüntüleme tetikleyin:

• Tarayıcı geçmişi değişiklikleri (önerilir): SPA'nız ekranları güncellemek için History API'yi, özellikle de 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 uygulaması

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

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

page_views tarayıcı geçmişine göre 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üleme Sayısı 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.

Ö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ıklayın. Yeni bir sanal ekrana tıkladığınızda DebugView'da yeni bir page_view etkinliği görürsünüz. Yönlendiren sayfa 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 sayfalık uygulamalarla ilgili diğer ö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ı göz önünde bulundurun:

Kaydırma konumunu yönetme

Kullanıcılar bir SPA'daki görünümler arasında gezindiğinde 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 en üstüne veya ana içerik kapsayıcısına 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şiklik sayesinde kullanıcılar yeni içeriğin en üstünden başlar. Bu sayede Google Analytics kaydırma izleme, yeni sanal sayfadaki etkileşimi doğru şekilde ölçebilir.

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

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

Öneri: SPA çerçevenizin 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çerik, tarayıcının arama işlevi tarafından hemen dizine eklenemeyebilir. Sanal gezinmelerden sonra sayfa içi aramayı test ederek içeriğin erişilebilirliğini doğrulayın.

Otomatik etkinlikler üzerindeki etkisi

SPA'nızda sanal sayfa görüntüleme ölçümünü 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, SPA'yı tek bir sayfa olarak değerlendirir ve bu da metriklerin çarpıtılmasına neden olur.

Örneğin, user_engagement etkinliği, bir kullanıcının bir sayfada aktif olarak geçirdiği süreyi ölçer. Sanal sayfa görüntülemeleri olmadan tüm etkileşim süresi ilk sayfa yüklemesine atfedilir. Bu durumda, her bir ekranda harcanan süreyi analiz etmek imkansız hale gelir.

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

• user_engagement etkinliği, kullanıcı bir sanal sayfadan diğerine gittiğinde 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 gerçekleşir.
• Tıklama veya kaydırma gibi diğer etkinlikler, kullanıcının o anda görüntülediği sanal sayfanın page_location ile ilişkilendirilir.

Bu sayede, SPA'nızdaki her bir ekran veya bölüm için kullanıcı etkileşimini ve diğer metrikleri analiz ederek kullanıcı yolculuğunu daha doğru bir şekilde anlayabilirsiniz.