React SPA’lerde Google Analytics 4 ile Sayfa Görüntülemelerini Takip Etme Rehberi

Tek Sayfa Uygulamaları (SPA’ler), modern web geliştirmenin temel taşlarından biridir. Geleneksel çok sayfalı uygulamaların aksine, SPA’ler kullanıcı deneyimini iyileştirmek için sayfa yenilemeleri olmadan içerik dinamik olarak yükler. Ancak bu dinamizm, Google Analytics gibi analiz araçlarıyla sayfa görüntülemelerini doğru bir şekilde takip etme konusunda bazı zorlukları beraberinde getirir. Özellikle Google Analytics 4 (GA4), olay tabanlı veri modellemesiyle bu zorluklara yeni bir yaklaşım sunar. Bu makalede, bir React SPA’de GA4 ile sayfa görüntülemelerini nasıl etkili bir şekilde takip edebileceğinizi adım adım inceleyeceğiz.

Google Analytics 4’ün Temelleri ve SPA Entegrasyonu

React gibi modern framework’lerle geliştirilen Tek Sayfa Uygulamaları (SPA’ler), kullanıcı deneyimini zenginleştirirken, geleneksel analitik araçları için bazı izleme zorlukları yaratır. GA4’ün olay tabanlı mimarisi, bu zorlukların üstesinden gelmek için güçlü bir çözüm sunar.

GA4 Mülkü Oluşturma ve gtag.js Entegrasyonu

GA4 ile izlemeye başlamak için öncelikle bir GA4 mülkü oluşturmanız gerekir. Google Analytics arayüzünde yeni bir mülk oluştururken, “Web” veri akışını seçmeli ve web sitenizin URL’sini girmelisiniz. Bu işlem sonucunda size bir “Ölçüm Kimliği” (Measurement ID) verilecektir (örn: G-XXXXXXXXXX). Bu kimlik, verilerinizi doğru GA4 mülküne göndermek için kritik öneme sahiptir.

Ardından, bu ölçüm kimliğini kullanarak GA4 izleme kodunu React uygulamanızın public/index.html dosyasındaki etiketleri arasına eklemeniz gerekir. Bu kod parçacığı, gtag.js kütüphanesini yükler ve temel yapılandırmayı yapar.

Bu kurulum, uygulamanız yüklendiğinde temel GA4 yapılandırmasını sağlar.

SPA'lerde Sayfa Görüntüleme Farkı

Geleneksel web sitelerinde, bir kullanıcı farklı bir sayfaya gittiğinde tarayıcı tam bir sayfa yenilemesi yapar. Bu yenileme sırasında GA4 kodu yeniden çalışır ve otomatik olarak yeni bir page_view olayı tetikler. Ancak React gibi SPA'lerde durum farklıdır. Kullanıcı farklı bir rotaya geçtiğinde (örn: /anasayfa'dan /hakkimizda'ya), tarayıcı URL'si değişse de sayfa tamamen yeniden yüklenmez. İçerik dinamik olarak DOM üzerinde güncellenir.

GA4, varsayılan olarak URL değişikliklerini izlemek için bir mekanizmaya sahip olsa da, bu mekanizma her zaman SPA'lerin karmaşık rota yapısını doğru bir şekilde algılayamayabilir veya özelleştirilmiş sayfa başlıkları gibi bilgileri otomatik olarak yakalayamayabilir. Bu nedenle, React SPA'lerde doğru ve kapsamlı bir sayfa görüntüleme takibi için manuel bir yaklaşım benimsemek genellikle en iyi yoldur.

React Router ile Sayfa Görüntüleme Takibi Uygulama

React uygulamalarında sayfa görüntülemelerini doğru bir şekilde takip etmek için react-router-dom kütüphanesinin sağladığı yeteneklerden faydalanmamız gerekir. Bu sayede rota değişikliklerini yakalayabilir ve her değişiklikte GA4'e özel bir page_view olayı gönderebiliriz.

react-router-dom ve useLocation Hook'u

React SPA'lerde rota yönetimini genellikle react-router-dom kütüphanesi ile yaparız. Bu kütüphane, URL değişikliklerini yönetmek ve bileşenleri URL'ye göre render etmek için güçlü araçlar sunar. Sayfa görüntüleme takibi için en önemli araçlardan biri useLocation hook'udur. Bu hook, mevcut URL konumunu içeren bir nesne döndürür ve URL her değiştiğinde bileşenin yeniden render edilmesini tetikler.

İzleme mantığını uygulamak için, useLocation hook'unu kullanarak URL değişikliklerini dinleyen ve her değişiklikte GA4'e veri gönderen özel bir React hook'u veya bileşeni oluşturabiliriz.

// src/hooks/useGa4PageView.js
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const useGa4PageView = (measurementId) => {
  const location = useLocation();

  useEffect(() => {
    // gtag fonksiyonunun tanımlı olup olmadığını kontrol et
    if (window.gtag) {
      window.gtag('event', 'page_view', {
        page_path: location.pathname + location.search,
        page_location: window.location.href,
        page_title: document.title,
      });
      console.log('GA4 page_view sent:', location.pathname + location.search);
    } else {
      console.warn('Google Analytics gtag not found. Page view not sent.');
    }
  }, [location, measurementId]); // location her değiştiğinde tetiklenir
};

export default useGa4PageView;

Özel page_view Olayı Gönderme

Yukarıdaki useGa4PageView hook'unu React uygulamanızda kullanmak oldukça basittir. Genellikle uygulamanızın ana bileşeninde (App.js veya Layout.js) çağırırsınız, böylece tüm rota değişikliklerini kapsar.

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import useGa4PageView from './hooks/useGa4PageView'; // Kendi hook'unuzu import edin

// Örnek Sayfalar
const HomePage = () => 
Anasayfa
;
const AboutPage = () => 
Hakkımızda
;
const ContactPage = () => 
İletişim
;
const ProductPage = () => 
Ürün Detayı
;

const GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'; // Kendi Ölçüm Kimliğinizi buraya girin

function App() {
  useGa4PageView(GA_MEASUREMENT_ID); // Hook'u burada çağırıyoruz

  return (
    
      
      
        } />
        } />
        } />
        } />
      
    
  );
}

export default App;

Bu kod parçacığı, uygulamanızdaki her rota değişikliğinde useGa4PageView hook'unun tetiklenmesini ve gtag('event', 'page_view', ...) fonksiyonu aracılığıyla GA4'e bir sayfa görüntüleme olayı göndermesini sağlar. page_path, page_location ve page_title gibi parametreler, GA4 raporlarında daha anlamlı veriler görmenizi sağlar. window.gtag kontrolü, GA4 kodunun henüz yüklenmemiş veya engellenmiş olabileceği durumlar için hata yönetimini sağlar.

Gelişmiş Takip Senaryoları ve Özelleştirmeler

Temel sayfa görüntüleme takibini kurduktan sonra, uygulamanızın özel ihtiyaçlarına göre izleme verilerini daha da zenginleştirebilirsiniz. Dinamik rotalar ve özel parametreler, GA4 raporlarınızın derinliğini artırmanıza olanak tanır.

Dinamik Rotalar ve Başlık Yönetimi

React SPA'lerde sıkça karşılaşılan bir durum, ürün detay sayfaları (/urunler/:id) veya kullanıcı profilleri (/kullanicilar/:username) gibi dinamik rotalardır. Bu rotalarda page_path genellikle aynı kalır (/urunler/:id), ancak gerçek içerik değişir. GA4 raporlarında daha anlamlı veriler görmek için, page_path'i dinamik olarak ayarlamak ve sayfa başlığını ( page_title ) güncel tutmak önemlidir.

react-router-dom'un useParams hook'u ile dinamik rota parametrelerini yakalayabilir ve bunları page_path veya page_title oluşturmak için kullanabilirsiniz. Ayrıca, document.title'ı her sayfa geçişinde güncellemek, kullanıcının tarayıcı sekmesinde doğru başlığı görmesini ve GA4'e doğru başlığın gönderilmesini sağlar.

// src/hooks/useGa4PageView.js (Güncellenmiş versiyon)
import { useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';

const useGa4PageView = (measurementId) => {
  const location = useLocation();
  const params = useParams(); // Dinamik parametreleri yakalamak için

  useEffect(() => {
    const currentPath = location.pathname + location.search;
    let pageTitle = document.title; // Varsayılan olarak mevcut belge başlığı

    // Dinamik rotalar için başlığı özelleştirme örneği
    if (location.pathname.startsWith('/urunler/')) {
      const productId = params.id;
      pageTitle = Ürün Detayı: ${productId};
      document.title = pageTitle; // Tarayıcı başlığını da güncelle
    } else if (location.pathname === '/hakkimizda') {
      pageTitle = 'Hakkımızda Sayfası';
      document.title = pageTitle;
    }
    // Diğer rotalar için benzer koşullar eklenebilir

    if (window.gtag) {
      window.gtag('event', 'page_view', {
        page_path: currentPath,
        page_location: window.location.href,
        page_title: pageTitle,
        // Ek özel parametreler buraya eklenebilir
        // custom_dimension_product_id: params.id,
      });
      console.log('GA4 page_view sent:', currentPath, 'Title:', pageTitle);
    } else {
      console.warn('Google Analytics gtag not found. Page view not sent.');
    }
  }, [location, params, measurementId]); // params da bağımlılık olarak eklenmeli

  // İlk yüklemede de sayfa başlığını ayarlamak için ayrı bir useEffect
  useEffect(() => {
    // Uygulama ilk yüklendiğinde varsayılan başlığı ayarla
    if (location.pathname === '/') {
      document.title = 'Anasayfa';
    }
  }, []); // Sadece bir kere çalışır
};

export default useGa4PageView;

Bu örnek, /urunler/:id rotasına özel bir başlık atayarak GA4 raporlarınızda daha açıklayıcı sayfa adları görmenizi sağlar.

Özel Parametreler ve Veri Katmanı

GA4'ün en güçlü özelliklerinden biri, olaylara özel parametreler ekleyebilme yeteneğidir. Sayfa görüntüleme olaylarınıza, kullanıcı deneyimi veya iş hedeflerinizle ilgili ek bilgiler ekleyebilirsiniz. Örneğin, bir ürün sayfasında, ürün kategorisi, yazar adı veya yayın tarihi gibi bilgileri page_view olayına özel parametreler olarak ekleyebilirsiniz.

Bu özel parametreler, GA4'te özel boyutlar ve metrikler olarak yapılandırılabilir ve daha derinlemesine analizler yapmanızı sağlar.

// gtag('event', 'page_view', {
//   page_path: '/blog/makale-basligi',
//   page_title: 'Makale Başlığı',
//   author: 'Yazar Adı', // Özel parametre
//   category: 'Teknoloji', // Özel parametre
//   published_date: '2023-10-26' // Özel parametre
// });

Bu parametreleri GA4 arayüzünde "Özel Tanımlar" altında yapılandırmanız gerekmektedir. Bu sayede, raporlarınızda bu verilere göre filtreleme ve segmentasyon yapabilirsiniz.

Performans, Güvenilirlik ve Alternatifler

GA4 izleme kodunu React SPA'nize entegre ederken, performans, güvenilirlik ve sürdürülebilirlik gibi faktörleri göz önünde bulundurmak önemlidir. Ayrıca, manuel gtag.js entegrasyonuna alternatif olabilecek başka yöntemler de mevcuttur.

İzleme Kodunu Optimize Etme ve Hata Yönetimi

* Asenkron Yükleme: gtag.js kodunun async niteliği ile yüklenmesi, sayfa render'ını engellemesini önler ve uygulamanın performansını olumsuz etkilemez.
* gtag Kontrolü: window.gtag fonksiyonunun varlığını kontrol etmek, GA4 kodunun yüklenemediği veya bir reklam engelleyici tarafından engellendiği durumlarda uygulamanızın çökmesini önler. Bu, if (window.gtag) kontrolü ile sağlanır.
* Geliştirme Ortamında Devre Dışı Bırakma: Geliştirme veya test ortamlarında GA4 verilerinin kirlenmesini önlemek için izlemeyi devre dışı bırakmak iyi bir uygulamadır. Bunu process.env.NODE_ENV gibi ortam değişkenlerini kullanarak yapabilirsiniz:

// useGa4PageView.js içinde
    if (process.env.NODE_ENV === 'production' && window.gtag) {
      window.gtag('event', 'page_view', { /* ... */ });
    } else {
      console.log('GA4 page_view (dev mode):', location.pathname + location.search);
    }

Bu, geliştirme sırasında konsolda izleme olaylarını görmenizi sağlar, ancak gerçek GA4 mülküne veri göndermez.

Google Tag Manager (GTM) ve react-ga4 Kütüphanesi

Manuel gtag.js entegrasyonu yerine, GA4 izlemesini yönetmek için iki popüler alternatif bulunmaktadır:

* Google Tag Manager (GTM): GTM, web sitenize veya mobil uygulamanıza etiketleri (izleme kodları ve ilgili yapılandırmalar) eklemenize ve yönetmenize olanak tanıyan bir etiket yönetim sistemidir. GTM kullanmanın avantajları şunlardır:
* Kodsuz Yönetim: Geliştirici müdahalesi olmadan etiketleri, tetikleyicileri ve değişkenleri web arayüzünden yönetebilirsiniz.
* Merkezi Kontrol: Tüm izleme etiketlerinizi tek bir yerden yönetebilirsiniz (GA4, Google Ads, Facebook Pixel vb.).
* Esneklik: Özel olaylar ve karmaşık izleme senaryoları için güçlü bir veri katmanı (dataLayer) entegrasyonu sunar.
* Performans: Etiketler asenkron olarak yüklenir.
React SPA'lerde GTM ile sayfa görüntüleme takibi, history.pushState olaylarını dinleyen özel tetikleyiciler veya dataLayer.push ile manuel olay gönderme yoluyla yapılabilir.

* react-ga4 Kütüphanesi: Bu, React uygulamaları için özel olarak tasarlanmış bir GA4 entegrasyon kütüphanesidir. gtag.js API'sini React'e özgü bir şekilde sarmalayarak kullanımı kolaylaştırır.
* Kolay Entegrasyon: React bileşenleri içinde GA4 olaylarını tetiklemek için daha "React-vari" bir API sunar.
* Durum Yönetimi: React'in yaşam döngüsü ve durum yönetimiyle daha iyi entegre olur.
* Örnek Kullanım:

import ReactGA from 'react-ga4';

        ReactGA.initialize('G-XXXXXXXXXX'); // Uygulama başlangıcında bir kez
        // ...
        ReactGA.send({ hitType: 'pageview', page: location.pathname, title: document.title });

react-ga4 gibi kütüphaneler, özellikle küçük ve orta ölçekli projelerde hızlı entegrasyon ve daha temiz kod sağlar. Ancak, çok karmaşık izleme ihtiyaçlarınız varsa veya birden fazla üçüncü taraf etiketi yönetiyorsanız GTM daha uygun bir çözüm olabilir.

Her iki alternatif de manuel gtag.js yaklaşımına göre farklı avantajlar sunar. Projenizin büyüklüğüne, ekibinizin yetkinliklerine ve izleme ihtiyaçlarınızın karmaşıklığına göre en uygun çözümü seçmelisiniz.

Sonuç

React SPA'lerde Google Analytics 4 ile sayfa görüntülemelerini takip etmek, geleneksel web sitelerine göre biraz daha fazla dikkat gerektirse de, react-router-dom ve gtag.js (veya alternatifleri) ile kolayca uygulanabilir. Doğru bir kurulum ve özelleştirilmiş olay gönderimi sayesinde, kullanıcılarınızın uygulamanızla nasıl etkileşim kurduğuna dair değerli içgörüler elde edebilir, kullanıcı deneyimini optimize edebilir ve iş hedeflerinize ulaşmak için bilinçli kararlar alabilirsiniz. Unutmayın, doğru veri, doğru kararların anahtarıdır.

SSS (Sık Sorulan Sorular)

SPA'lerde neden geleneksel GA3 (Universal Analytics) sayfa görüntüleme takibi çalışmaz?

Geleneksel GA3, her sayfa yüklemesinde yeniden çalışan bir izleme koduna dayanır. SPA'lerde sayfa yenilenmesi olmadığı için, URL değişse bile GA3 kodu otomatik olarak yeni bir sayfa görüntüleme olayı tetiklemez. Bu durum, manuel olarak pageview olayı göndermeyi gerektirir.

GA4'te page_view olayı otomatik olarak gönderilir mi?

Evet, GA4 varsayılan olarak "Geliştirilmiş Ölçüm" (Enhanced Measurement) özelliği altında tarayıcı geçmişi değişikliklerini (URL değişimi) algılayarak otomatik page_view olayları göndermeye çalışır. Ancak React SPA'lerin karmaşık rota yapıları ve dinamik başlık güncellemeleri nedeniyle, bu otomatik takip her zaman yeterli veya doğru olmayabilir. Bu yüzden manuel gtag('event', 'page_view', ...) kullanımı genellikle önerilir.

gtag.js yerine react-ga4 kullanmak ne gibi avantajlar sağlar?

react-ga4 gibi kütüphaneler, gtag.js API'sini React'e özgü bir şekilde sarmalayarak daha temiz ve React bileşenleriyle uyumlu bir kullanım sunar. Özellikle küçük ve orta ölçek