Blog details

Google Tag Manager’da SPA Takibi Kurulumu: Google Analytics 4 ile Doğru Sayfa Ölçümü

Single Page Application yapısındaki sitelerde URL değişir, ama full-page reloads olmaz. Bu yüzden standart page_view takibi çoğu kez eksik kalır ya da aynı ekranı iki kez sayar.

Eğer React, Vue, Angular veya benzeri bir yapı kullanıyorsanız, GTM SPA takibini klasik çok sayfalı site mantığıyla kuramazsınız. Doğru kurulumla route değişimleri, sanal sayfa görüntülemeleri ve dönüşümler temiz görünür.

Aşağıdaki yapı, 2026’da GA4 odaklı çalışan ekipler için en güvenli ve uygulanabilir yöntemdir.

Key Takeaways

  • Single Page Application (SPA) sitelerde standart page_view takibi yetersiz kalır çünkü full-page reloads olmaz; route değişimlerini dataLayer.push ile virtual_pageview event olarak yakalayın.
  • İlk yüklemeyi GA4 configuration tag ile All Pages tetikleyicisinde yönetin, SPA içi geçişleri ise Custom Event (virtual_pageview) ile ayırın.
  • Data Layer’a page_title, page_location ve page_path parametrelerini route tamamlandıktan sonra push edin; History Change tetikleyicisi yedek olarak kullanılabilir.
  • Çift sayım, eski başlık ve eksik ölçüm hatalarını önlemek için GTM Preview ve GA4 DebugView ile test edin, server-side GTM’i 2026 için değerlendirin.

Single Page Application (SPA) sitelerde standart page_view neden yetmez?

Klasik sitelerde her sayfa geçişinde tarayıcı yeni HTML yükler. Google Tag Manager bunu doğal olarak görür. Single Page Application sitelerde ise JavaScript ile içerik değişir, ama belge aynı kalır; tarayıcı History API aracılığıyla URL changes yönetir ve full-page reloads olmaz. Yani kullanıcı yeni bir ekrana geçmiş olsa da tarayıcı tarafında tam yenileme gerçekleşmez.

Bu fark, Google Analytics 4 tarafında kritik. Çünkü enhanced measurement ilk yüklemeyi yakalasa bile, route değişimlerinde dynamic content için her zaman doğru page_title, page_location ve page_path göndermeyebilir. Bazen de hem otomatik hem manuel takip çalışır ve çift sayım oluşur.

2026 itibarıyla GTM arayüzünde çoğu kurulum Google tag üzerinden yapılıyor. Mantık yine aynı, ilk yüklemeyi ayrı, SPA içi geçişleri ayrı düşünmek gerekiyor. Pratik bir örnek görmek isterseniz, History Change yaklaşımını anlatan bu rehber iyi bir referans sunuyor.

SPA’da doğru ölçümün anahtarı, “URL değişti” bilgisini değil, “route tamamlandı” bilgisini yakalamaktır.

GTM ve GA4 tarafında temel kurulum

İlk adım, ilk sayfa yüklemesi ile sonraki route değişimlerini birbirinden ayırmaktır. Böylece GTM container’ında SPA takibi daha net yönetilir.

GTM arayüzünde SPA tetikleyicisi ayarı çizimi
  1. GTM container’ınızda yeni bir GA4 configuration tag oluşturun. GA4 ölçüm kimliğini (G-XXXXXXX) ekleyin ve All Pages tetikleyicisine bağlayın. Bu etiket ilk yüklemeyi toplasın.
  2. Aynı anda SPA içi geçişler için History Change trigger oluşturun. Dahili değişkenlerden History New URL ve History Old URL alanlarını açın. Bu tetikleyici URL changes’leri yakalamak için iyi bir yedektir.
  3. Data Layer değişkenlerini hazırlayın. En az şu üç alanı tanımlayın: page_title, page_location, Page Path. İsimler ile dataLayer.push içindeki anahtarlar birebir aynı olmalı.
  4. Kurulumu yayına almadan önce Preview Mode‘da test edin. Sonra GA4’in DebugView‘unda event akışını kontrol edin. Çift tetikleme, eksik parametre ve geç kalan başlık sorunlarını görmek için GA4 DebugView hata ayıklama rehberi işinizi hızlandırır.

Buradaki kritik nokta şu: İlk yüklemede otomatik page_view gönderebilirsiniz. Ancak route değişimlerinde aynı işi hem GA4 configuration tag hem ayrı bir GA4 event etiketi yaparsa veri bozulur. Tek bir mantık seçin ve ona sadık kalın.

DataLayer ile route değişimlerini doğru gönderin

En temiz yöntem, frontend JavaScript tarafında route tamamlandığında Data Layer’a dataLayer.push göndermektir. Çünkü bu anda URL, başlık ve ekran durumu genelde hazır olur. JavaScript’in pushState eventi gibi navigasyon değişikliklerini yakaladıktan sonra bu yaklaşım, en güvenilir sonuçları verir.

SPA router'dan GTM ve GA4'e giden dataLayer akışı çizimi

Önerilen dataLayer yapısı

Basit bir sanal sayfa görüntüleme, yani virtualPageview için şu yapı yeterlidir:

window.dataLayer = window.dataLayer || [];

dataLayer.push({ event: 'virtual_pageview', page_title: document.title, page_location: window.location.href, page_path: window.location.pathname + window.location.search });

Router bilgisini doğrudan kullanabiliyorsanız daha da iyi olur:

dataLayer.push({ event: 'virtual_pageview', page_title: route.meta.title || document.title, page_location: window.location.href, page_path: route.fullPath });

Bu yapıda event alanı, GTM’de custom events tetikleyicisini ateşler. Diğer alanlar da GA4’e parametre olarak gider. Doğru yapılandırılmış tracking scripts ile Data Layer bu şekilde site performance’ınızı korurken verileri taşır.

GTM’de etiket ve tetikleyici ayarı

Burada ayrı bir GA4 Event etiketi oluşturun. Event adı page_view olsun. Parametre eşleşmesini şöyle kurun:

  • page_title = {{dlv - page_title}}
  • page_location = {{dlv - page_location}}
  • page_path = {{dlv - page_path}}

Tetikleyici tarafında Custom Event seçin ve event adını virtual_pageview olarak yazın. Custom event trigger, user interactions için standart tetikleyicilerden daha güvenilirdir. Böylece route değiştiğinde, ama sadece siz istediğiniz anda, yeni sanal sayfa görüntüleme gider.

Sadece History Change ile de çalışabilirsiniz. Yine de bu yöntem bazı SPA projelerinde geç kalır ya da erken ateşlenir. Örneğin URL değişir, fakat document.title henüz güncellenmemiş olur. Bu yüzden router sonrası dataLayer.push, ham history tetikleyicisinden daha sağlamdır.

Route dışında modal, çok adımlı form veya sekme geçişi gibi ekran benzeri deneyimleriniz varsa, sanal sayfa entegrasyonu örneği ek senaryolar için faydalı olur.

Kontrol listesi ve sık görülen hatalar

Kurulum bitince şu kısa listeyi tek tek kontrol edin:

  • İlk sayfa yüklemesinde yalnızca bir page_view event gidiyor mu?
  • Route değişiminde page_view event tetikleniyor mu? (virtual_pageview)
  • page_title, yeni ekranın başlığını doğru alıyor mu?
  • page_location, tam URL’yi içeriyor mu?
  • page_path, query string gerekiyorsa onu da taşıyor mu?
  • GTM Preview ile GA4 DebugView aynı akışı gösteriyor mu?

En sık sorunlar genelde birkaç başlıkta toplanır:

SorunMuhtemel nedenÇözüm
page_view iki kez gidiyorOtomatik ve manuel takip birlikte çalışıyorİlk yükleme dışında tek kaynak bırakın; temiz veri ve site performance artışı için server-side GTM’i değerlendirin
page_title eski geliyorHistory Change trigger browser history değişimini çok erken ateşliyorPush işlemini route tamamlandıktan sonra yapın
Bazı ekranlar ölçülmüyordataLayer.push hiç çalışmıyor ya da event adı farklıFrontend event adını ve GTM tetikleyicisini eşleştirin; Single Page Application içindeki non-standard user interactions için custom events tercih edin
Referral artıyorAynı sitede birden fazla tag veya hatalı yönlendirme varÖzellikle checkout akışlarında self-referral sorunu çözümü adımlarını kontrol edin

Kısa bir not da burada önemli: Universal Analytics dönemindeki “sanal sayfa” mantığını birebir taşımayın. GA4, event tabanlı çalışır. Bu yüzden ekran geçişini bir page_view event ve açık parametrelerle göndermek daha doğru olur.

Frequently Asked Questions

SPA sitelerde standart page_view neden çift sayar veya eksik kalır?

Single Page Application’larda URL değişse de tarayıcı full reload yapmaz, bu yüzden enhanced measurement route geçişlerini her zaman doğru yakalayamaz. Otomatik ve manuel takip birlikte çalışırsa çift page_view oluşur. Çözüm, ilk yüklemeyi ayrı tutup SPA geçişlerini dataLayer.push ile manuel göndermektir.

DataLayer.push yapısı nasıl olmalı?

dataLayer.push({ event: 'virtual_pageview', page_title: document.title || route.meta.title, page_location: window.location.href, page_path: window.location.pathname + window.location.search }) şeklinde basit bir yapı yeterlidir. Event adı GTM tetikleyicisiyle eşleşmeli, parametreler GA4’e birebir gitmelidir. Router tamamlandıktan sonra push ederek document.title güncelliğini sağlayın.

History Change trigger mı yoksa Custom Event mi tercih edilmeli?

History Change URL değişimini erken yakalar ama page_title henüz güncellenmemiş olabilir. Custom Event (virtual_pageview) router sonrası push ile daha güvenilirdir ve geç kalmayı önler. İkisini kombine edin, ama öncelik dataLayer.push olsun.

Çift page_view ve self-referral sorunları nasıl çözülür?

İlk yüklemede sadece GA4 configuration tag kullanın, manuel takibi SPA geçişlerine saklayın. GTM Preview ve GA4 DebugView ile event akışını doğrulayın. Checkout gibi akışlarda self-referral için özel çözümleri uygulayın.

Sonuç

Sağlam bir GTM SPA takibi, route değişimini gördüğü anda değil, route gerçekten hazır olduğunda veri göndermelidir. Bu ayrım küçük görünür, ama Google Analytics 4 raporlama kalitesini doğrudan etkiler ve daha güvenilir verilere ulaşmanızı sağlar.

En temiz kurulum, ilk yüklemeyi Google tag ile toplamak ve SPA içi geçişleri dataLayer.push ile ayrı göndermektir. Google Tag Manager, dinamik içerik yönetiminde vazgeçilmezdir; doğru parametreler doğru anda ve tek kez gönderildiğinde, raporlar tam güvenilirlik kazanır. 2026 için server-side GTM önerimizi de göz ardı etmeyin. Bu yaklaşımla Single Page Application sitelerinizde kusursuz ölçüm elde edersiniz.