Tek sayfa uygulamalarında GA4 sayfa görüntüleme nasıl izlenir?

Mehmet · Dün 22:23 da

Tek sayfa uygulamalarında GA4 sayfa görüntüleme nasıl izlenir?

Tek sayfa uygulamasında GA4 sayfa görüntüleme takibi için her rota değişiminde bir page_view olayı göndermelisiniz. Uygulamanız URL geçmişini pushState veya replaceState ile değiştiriyorsa önce GA4 web veri akışındaki geliştirilmiş ölçümün sayfa görüntüleme ve tarayıcı geçmişi değişikliklerini izleme seçeneklerini kontrol edin. Bu özellik doğru çalışıyorsa ayrıca elle page_view göndermeyin; aksi durumda aynı sanal sayfa iki kez ölçülebilir.

SPA takibi nasıl çalışır?

Klasik web sitesinde yeni bir HTML sayfası açıldığında Google etiketi yeniden yüklenir ve sayfa görüntüleme gönderilir. Tek sayfa uygulamasında ise uygulama çoğu zaman tarayıcıda yeniden yüklenmeden yalnızca ekranı ve URL'yi değiştirir. Bu nedenle GA4, her rota değişimini kendiliğinden yeni sayfa olarak algılamayabilir.

Gönderilen sanal sayfa görüntülemesinde en az şu bilgiler doğru olmalıdır:

page_location: Kullanıcının gördüğü tam URL.
page_title: O ekrana ait başlık.
page_referrer: Önceki ekran veya sayfa.

Örnek olarak kullanıcı example.com/ adresinden example.com/urun/kalem adresine geçiyorsa uygulama tam yenilenmese bile ikinci adres için yeni bir page_view gönderilmelidir. Böylece raporlarda ekran geçişi, giriş sayfası ve sayfa bazlı etkileşimler daha anlamlı görünür.

Uygulanabilir kurulum

Bu örnek doğrudan gtag.js kurulumu içindir; GTM ile birlikte kopyalamayın. Google etiketi ve gtag işlevi önceden kurulmuş olmalı; aşağıdaki G-XXXXXXXXXX değeri kendi ölçüm kimliğinizle değiştirilmelidir. Manuel yöntemde veri akışındaki otomatik geçmiş değişikliği ölçümünü de kapatın. Aşağıdaki config, mevcut ilk config çağrısının yerine geçer; ikinci bir config eklemeyin. send_page_view:false tek başına geliştirilmiş ölçümün geçmiş dinleyicisini kapatmaz.

Kod:

gtag('config', 'G-XXXXXXXXXX', { send_page_view: false });

let previousPage = document.referrer;
let lastTracked = null;

function trackVirtualPage() {
  const currentPage = window.location.href;
  if (currentPage === lastTracked) return;
  gtag('event', 'page_view', {
    send_to: 'G-XXXXXXXXXX',
    page_title: document.title,
    page_location: currentPage,
    page_referrer: previousPage
  });
  previousPage = currentPage;
  lastTracked = currentPage;
}

// İlk ekran tamamen hazır olduğunda bir kez:
trackVirtualPage();
// Yönlendiricinin başarılı geçiş sonrası kancasında,
// URL ve document.title güncellendikten sonra:
// trackVirtualPage();

Google etiketinin gerçekten yüklendiğinden ve ölçüm kimliğinin doğru olduğundan emin olun. İlk config otomatik olay oluşmadan yapılmalı; izleme işlevi ise ilk ekran hazır olunca çağrılmalıdır.
İleri/geri gezinme dahil başarılı rota değişiminde ekran başlığını güncelleyin ve trackVirtualPage çağrısını bir kez çalıştırın. Aynı navigasyon hem yönlendirici dinleyicisinde hem de menü tıklamasında çağrılmamalıdır.
Otomatik sayfa görüntüleme kullanacaksanız send_page_view: false ayarını kullanmayın; bu durumda yalnızca geçmiş değişikliği ölçümünü etkinleştirip manuel olayı kaldırın.
Test sırasında debug modunu açıp GA4 DebugView ve tarayıcının ağ isteklerini kontrol edin. Rota değişiminden sonra bir page_view görülmesi, page_location değerinin yeni URL olması ve başlığın yeni ekranı göstermesi beklenen sonuçtur.

Testte hiç olay görünmüyorsa önce etiketin yüklenip yüklenmediğini ve ölçüm kimliğini kontrol edin. Olay görünüyor ancak URL eski kalıyorsa rota değişiminden önce veya sonra yanlış URL okunuyor olabilir. Her geçişte iki olay görünüyorsa geliştirilmiş ölçüm ile manuel gönderim birlikte çalışıyor ya da yönlendirici çağrıyı iki kez yapıyordur.

Bu kod navigasyon yapmaz; yönlendirici URL'yi ve ekranı değiştirdikten sonra ölçer. İlk olaydaki referrer dış kaynak, sonraki olaylarda önceki sanal URL olur. Kişisel bilgi veya erişim belirteci içeren adresleri Analytics'e göndermeyin.

Hangi yöntemi seçmelisiniz?

Uygulamanız standart tarayıcı geçmişi değişikliklerini kullanıyor ve ek koşul gerektirmiyorsa otomatik yöntem daha az kod gerektirir. Geçişler özel bir durum yönetimiyle yapılıyor, bazı ekranların ölçülmesi istenmiyor veya başlık ve URL'nin uygulama tarafından belirlenmesi gerekiyorsa manuel yöntem daha kontrollüdür.

Durum	Önerilen yöntem	Dikkat edilecek nokta
Rota değişimi tarayıcı geçmişine düzgün yazılıyor	Geliştirilmiş ölçüm	Ayrıca manuel `page_view` göndermeyin
Özel yönlendirici veya ekran akışı var	Manuel `page_view`	Otomatik ilk görüntülemeyi ve çifte gönderimi yönetin
Aynı URL içinde yalnızca bileşen değişiyor	Genellikle yeni sayfa görüntüleme göndermeyin	Gerekirse ayrı özel olay adı kullanın

Her bileşen değişikliğini sayfa görüntülemesi saymak doğru değildir. Örneğin açılır pencere, filtre veya sekme değişimi yeni bir URL ve anlamlı bir ekran oluşturmuyorsa page_view yerine amaca uygun özel olay göndermek daha temiz rapor üretir. Ayrıca sayfa başlığı, URL veya referrer bilgisini sabit bırakmak; raporlarda tüm ekranların tek sayfa gibi görünmesine neden olur.

Sık sorulan sorular

React, Vue veya Angular kullanmak yöntemi değiştirir mi?

Temel prensip değişmez. Önemli olan kullandığınız framework değil, yönlendiricinin hangi anda yeni ekranı kesinleştirdiğidir. Takibi menü tıklamasına değil, başarılı rota değişikliğine bağlamak daha güvenlidir.

Raporlarda sayfa görüntüleme sayısı neden ziyaretçi sayısından yüksek olabilir?

Aynı kullanıcı oturum içinde birden fazla sanal ekrana geçebilir. Bu normaldir; ancak her rota için birden fazla page_view gönderiliyorsa kurulumda çift ölçüm vardır ve önce bu durum düzeltilmelidir.

Tek sayfa uygulamalarında GA4 sayfa görüntüleme nasıl izlenir?

Mehmet