React App<\/title>\n\n \n <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-XXXXXXXXXX\"><\/script>\n <script>\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'G-XXXXXXXXXX'); \/\/ Kendi \u00d6l\u00e7\u00fcm Kimli\u011finizi buraya girin\n <\/script>\n<\/head>\n<body>\n <noscript>You need to enable JavaScript to run this app.<\/noscript>\n <div id=\"root\"><\/div>\n<\/body>\n<\/html><\/pre>\n<p><\/code><br \/>\nBu kurulum, uygulaman\u0131z y\u00fcklendi\u011finde temel GA4 yap\u0131land\u0131rmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>SPA'lerde Sayfa G\u00f6r\u00fcnt\u00fcleme Fark\u0131<\/h4>\n<p>Geleneksel web sitelerinde, bir kullan\u0131c\u0131 farkl\u0131 bir sayfaya gitti\u011finde taray\u0131c\u0131 tam bir sayfa yenilemesi yapar. Bu yenileme s\u0131ras\u0131nda GA4 kodu yeniden \u00e7al\u0131\u015f\u0131r ve otomatik olarak yeni bir <code>page_view<\/code> olay\u0131 tetikler. Ancak React gibi SPA'lerde durum farkl\u0131d\u0131r. Kullan\u0131c\u0131 farkl\u0131 bir rotaya ge\u00e7ti\u011finde (\u00f6rn: <code>\/anasayfa<\/code>'dan <code>\/hakkimizda<\/code>'ya), taray\u0131c\u0131 URL'si de\u011fi\u015fse de sayfa tamamen yeniden y\u00fcklenmez. \u0130\u00e7erik dinamik olarak DOM \u00fczerinde g\u00fcncellenir.<\/p>\n<p>GA4, varsay\u0131lan olarak URL de\u011fi\u015fikliklerini izlemek i\u00e7in bir mekanizmaya sahip olsa da, bu mekanizma her zaman SPA'lerin karma\u015f\u0131k rota yap\u0131s\u0131n\u0131 do\u011fru bir \u015fekilde alg\u0131layamayabilir veya \u00f6zelle\u015ftirilmi\u015f sayfa ba\u015fl\u0131klar\u0131 gibi bilgileri otomatik olarak yakalayamayabilir. Bu nedenle, React SPA'lerde do\u011fru ve kapsaml\u0131 bir sayfa g\u00f6r\u00fcnt\u00fcleme takibi i\u00e7in manuel bir yakla\u015f\u0131m benimsemek genellikle en iyi yoldur.<\/p>\n<h3>React Router ile Sayfa G\u00f6r\u00fcnt\u00fcleme Takibi Uygulama<\/h3>\n<p>React uygulamalar\u0131nda sayfa g\u00f6r\u00fcnt\u00fclemelerini do\u011fru bir \u015fekilde takip etmek i\u00e7in <code>react-router-dom<\/code> k\u00fct\u00fcphanesinin sa\u011flad\u0131\u011f\u0131 yeteneklerden faydalanmam\u0131z gerekir. Bu sayede rota de\u011fi\u015fikliklerini yakalayabilir ve her de\u011fi\u015fiklikte GA4'e \u00f6zel bir <code>page_view<\/code> olay\u0131 g\u00f6nderebiliriz.<\/p>\n<h4><code>react-router-dom<\/code> ve <code>useLocation<\/code> Hook'u<\/h4>\n<p>React SPA'lerde rota y\u00f6netimini genellikle <code>react-router-dom<\/code> k\u00fct\u00fcphanesi ile yapar\u0131z. Bu k\u00fct\u00fcphane, URL de\u011fi\u015fikliklerini y\u00f6netmek ve bile\u015fenleri URL'ye g\u00f6re render etmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Sayfa g\u00f6r\u00fcnt\u00fcleme takibi i\u00e7in en \u00f6nemli ara\u00e7lardan biri <code>useLocation<\/code> hook'udur. Bu hook, mevcut URL konumunu i\u00e7eren bir nesne d\u00f6nd\u00fcr\u00fcr ve URL her de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini tetikler.<\/p>\n<p>\u0130zleme mant\u0131\u011f\u0131n\u0131 uygulamak i\u00e7in, <code>useLocation<\/code> hook'unu kullanarak URL de\u011fi\u015fikliklerini dinleyen ve her de\u011fi\u015fiklikte GA4'e veri g\u00f6nderen \u00f6zel bir React hook'u veya bile\u015feni olu\u015fturabiliriz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/hooks\/useGa4PageView.js\nimport { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nconst useGa4PageView = (measurementId) => {\n const location = useLocation();\n\n useEffect(() => {\n \/\/ gtag fonksiyonunun tan\u0131ml\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n if (window.gtag) {\n window.gtag('event', 'page_view', {\n page_path: location.pathname + location.search,\n page_location: window.location.href,\n page_title: document.title,\n });\n console.log('GA4 page_view sent:', location.pathname + location.search);\n } else {\n console.warn('Google Analytics gtag not found. Page view not sent.');\n }\n }, [location, measurementId]); \/\/ location her de\u011fi\u015fti\u011finde tetiklenir\n};\n\nexport default useGa4PageView;<\/pre>\n<p><\/code><\/p>\n<h4>\u00d6zel <code>page_view<\/code> Olay\u0131 G\u00f6nderme<\/h4>\n<p>Yukar\u0131daki <code>useGa4PageView<\/code> hook'unu React uygulaman\u0131zda kullanmak olduk\u00e7a basittir. Genellikle uygulaman\u0131z\u0131n ana bile\u015feninde (<code>App.js<\/code> veya <code>Layout.js<\/code>) \u00e7a\u011f\u0131r\u0131rs\u0131n\u0131z, b\u00f6ylece t\u00fcm rota de\u011fi\u015fikliklerini kapsar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/App.js\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport useGa4PageView from '.\/hooks\/useGa4PageView'; \/\/ Kendi hook'unuzu import edin\n\n\/\/ \u00d6rnek Sayfalar\nconst HomePage = () => <h1>Anasayfa<\/h1>;\nconst AboutPage = () => <h1>Hakk\u0131m\u0131zda<\/h1>;\nconst ContactPage = () => <h1>\u0130leti\u015fim<\/h1>;\nconst ProductPage = () => <h1>\u00dcr\u00fcn Detay\u0131<\/h1>;\n\nconst GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'; \/\/ Kendi \u00d6l\u00e7\u00fcm Kimli\u011finizi buraya girin\n\nfunction App() {\n useGa4PageView(GA_MEASUREMENT_ID); \/\/ Hook'u burada \u00e7a\u011f\u0131r\u0131yoruz\n\n return (\n <Router>\n <nav>\n <ul>\n <li><a href=\"\/\">Anasayfa<\/a><\/li>\n <li><a href=\"\/hakkimizda\">Hakk\u0131m\u0131zda<\/a><\/li>\n <li><a href=\"\/iletisim\">\u0130leti\u015fim<\/a><\/li>\n <li><a href=\"\/urunler\/123\">\u00dcr\u00fcn 123<\/a><\/li>\n <\/ul>\n <\/nav>\n <Routes>\n <Route path=\"\/\" element={<HomePage \/>} \/>\n <Route path=\"\/hakkimizda\" element={<AboutPage \/>} \/>\n <Route path=\"\/iletisim\" element={<ContactPage \/>} \/>\n <Route path=\"\/urunler\/:id\" element={<ProductPage \/>} \/>\n <\/Routes>\n <\/Router>\n );\n}\n\nexport default App;<\/pre>\n<p><\/code><\/p>\n<p>Bu kod par\u00e7ac\u0131\u011f\u0131, uygulaman\u0131zdaki her rota de\u011fi\u015fikli\u011finde <code>useGa4PageView<\/code> hook'unun tetiklenmesini ve <code>gtag('event', 'page_view', ...)<\/code> fonksiyonu arac\u0131l\u0131\u011f\u0131yla GA4'e bir sayfa g\u00f6r\u00fcnt\u00fcleme olay\u0131 g\u00f6ndermesini sa\u011flar. <code>page_path<\/code>, <code>page_location<\/code> ve <code>page_title<\/code> gibi parametreler, GA4 raporlar\u0131nda daha anlaml\u0131 veriler g\u00f6rmenizi sa\u011flar. <code>window.gtag<\/code> kontrol\u00fc, GA4 kodunun hen\u00fcz y\u00fcklenmemi\u015f veya engellenmi\u015f olabilece\u011fi durumlar i\u00e7in hata y\u00f6netimini sa\u011flar.<\/p>\n<h3>Geli\u015fmi\u015f Takip Senaryolar\u0131 ve \u00d6zelle\u015ftirmeler<\/h3>\n<p>Temel sayfa g\u00f6r\u00fcnt\u00fcleme takibini kurduktan sonra, uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re izleme verilerini daha da zenginle\u015ftirebilirsiniz. Dinamik rotalar ve \u00f6zel parametreler, GA4 raporlar\u0131n\u0131z\u0131n derinli\u011fini art\u0131rman\u0131za olanak tan\u0131r.<\/p>\n<h4>Dinamik Rotalar ve Ba\u015fl\u0131k Y\u00f6netimi<\/h4>\n<p>React SPA'lerde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir durum, \u00fcr\u00fcn detay sayfalar\u0131 (<code>\/urunler\/:id<\/code>) veya kullan\u0131c\u0131 profilleri (<code>\/kullanicilar\/:username<\/code>) gibi dinamik rotalard\u0131r. Bu rotalarda <code>page_path<\/code> genellikle ayn\u0131 kal\u0131r (<code>\/urunler\/:id<\/code>), ancak ger\u00e7ek i\u00e7erik de\u011fi\u015fir. GA4 raporlar\u0131nda daha anlaml\u0131 veriler g\u00f6rmek i\u00e7in, <code>page_path<\/code>'i dinamik olarak ayarlamak ve sayfa ba\u015fl\u0131\u011f\u0131n\u0131 ( <code>page_title<\/code> ) g\u00fcncel tutmak \u00f6nemlidir.<\/p>\n<p><code>react-router-dom<\/code>'un <code>useParams<\/code> hook'u ile dinamik rota parametrelerini yakalayabilir ve bunlar\u0131 <code>page_path<\/code> veya <code>page_title<\/code> olu\u015fturmak i\u00e7in kullanabilirsiniz. Ayr\u0131ca, <code>document.title<\/code>'\u0131 her sayfa ge\u00e7i\u015finde g\u00fcncellemek, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131 sekmesinde do\u011fru ba\u015fl\u0131\u011f\u0131 g\u00f6rmesini ve GA4'e do\u011fru ba\u015fl\u0131\u011f\u0131n g\u00f6nderilmesini sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/hooks\/useGa4PageView.js (G\u00fcncellenmi\u015f versiyon)\nimport { useEffect } from 'react';\nimport { useLocation, useParams } from 'react-router-dom';\n\nconst useGa4PageView = (measurementId) => {\n const location = useLocation();\n const params = useParams(); \/\/ Dinamik parametreleri yakalamak i\u00e7in\n\n useEffect(() => {\n const currentPath = location.pathname + location.search;\n let pageTitle = document.title; \/\/ Varsay\u0131lan olarak mevcut belge ba\u015fl\u0131\u011f\u0131\n\n \/\/ Dinamik rotalar i\u00e7in ba\u015fl\u0131\u011f\u0131 \u00f6zelle\u015ftirme \u00f6rne\u011fi\n if (location.pathname.startsWith('\/urunler\/')) {\n const productId = params.id;\n pageTitle = <code>\u00dcr\u00fcn Detay\u0131: ${productId}<\/code>;\n document.title = pageTitle; \/\/ Taray\u0131c\u0131 ba\u015fl\u0131\u011f\u0131n\u0131 da g\u00fcncelle\n } else if (location.pathname === '\/hakkimizda') {\n pageTitle = 'Hakk\u0131m\u0131zda Sayfas\u0131';\n document.title = pageTitle;\n }\n \/\/ Di\u011fer rotalar i\u00e7in benzer ko\u015fullar eklenebilir\n\n if (window.gtag) {\n window.gtag('event', 'page_view', {\n page_path: currentPath,\n page_location: window.location.href,\n page_title: pageTitle,\n \/\/ Ek \u00f6zel parametreler buraya eklenebilir\n \/\/ custom_dimension_product_id: params.id,\n });\n console.log('GA4 page_view sent:', currentPath, 'Title:', pageTitle);\n } else {\n console.warn('Google Analytics gtag not found. Page view not sent.');\n }\n }, [location, params, measurementId]); \/\/ params da ba\u011f\u0131ml\u0131l\u0131k olarak eklenmeli\n\n \/\/ \u0130lk y\u00fcklemede de sayfa ba\u015fl\u0131\u011f\u0131n\u0131 ayarlamak i\u00e7in ayr\u0131 bir useEffect\n useEffect(() => {\n \/\/ Uygulama ilk y\u00fcklendi\u011finde varsay\u0131lan ba\u015fl\u0131\u011f\u0131 ayarla\n if (location.pathname === '\/') {\n document.title = 'Anasayfa';\n }\n }, []); \/\/ Sadece bir kere \u00e7al\u0131\u015f\u0131r\n};\n\nexport default useGa4PageView;<\/pre>\n<p><\/code><br \/>\nBu \u00f6rnek, <code>\/urunler\/:id<\/code> rotas\u0131na \u00f6zel bir ba\u015fl\u0131k atayarak GA4 raporlar\u0131n\u0131zda daha a\u00e7\u0131klay\u0131c\u0131 sayfa adlar\u0131 g\u00f6rmenizi sa\u011flar.<\/p>\n<h4>\u00d6zel Parametreler ve Veri Katman\u0131<\/h4>\n<p>GA4'\u00fcn en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, olaylara \u00f6zel parametreler ekleyebilme yetene\u011fidir. Sayfa g\u00f6r\u00fcnt\u00fcleme olaylar\u0131n\u0131za, kullan\u0131c\u0131 deneyimi veya i\u015f hedeflerinizle ilgili ek bilgiler ekleyebilirsiniz. \u00d6rne\u011fin, bir \u00fcr\u00fcn sayfas\u0131nda, \u00fcr\u00fcn kategorisi, yazar ad\u0131 veya yay\u0131n tarihi gibi bilgileri <code>page_view<\/code> olay\u0131na \u00f6zel parametreler olarak ekleyebilirsiniz.<\/p>\n<p>Bu \u00f6zel parametreler, GA4'te \u00f6zel boyutlar ve metrikler olarak yap\u0131land\u0131r\u0131labilir ve daha derinlemesine analizler yapman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ gtag('event', 'page_view', {\n\/\/ page_path: '\/blog\/makale-basligi',\n\/\/ page_title: 'Makale Ba\u015fl\u0131\u011f\u0131',\n\/\/ author: 'Yazar Ad\u0131', \/\/ \u00d6zel parametre\n\/\/ category: 'Teknoloji', \/\/ \u00d6zel parametre\n\/\/ published_date: '2023-10-26' \/\/ \u00d6zel parametre\n\/\/ });<\/pre>\n<p><\/code><br \/>\nBu parametreleri GA4 aray\u00fcz\u00fcnde \"\u00d6zel Tan\u0131mlar\" alt\u0131nda yap\u0131land\u0131rman\u0131z gerekmektedir. Bu sayede, raporlar\u0131n\u0131zda bu verilere g\u00f6re filtreleme ve segmentasyon yapabilirsiniz.<\/p>\n<h3>Performans, G\u00fcvenilirlik ve Alternatifler<\/h3>\n<p>GA4 izleme kodunu React SPA'nize entegre ederken, performans, g\u00fcvenilirlik ve s\u00fcrd\u00fcr\u00fclebilirlik gibi fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir. Ayr\u0131ca, manuel <code>gtag.js<\/code> entegrasyonuna alternatif olabilecek ba\u015fka y\u00f6ntemler de mevcuttur.<\/p>\n<h4>\u0130zleme Kodunu Optimize Etme ve Hata Y\u00f6netimi<\/h4>\n<p>* <strong>Asenkron Y\u00fckleme:<\/strong> <code>gtag.js<\/code> kodunun <code>async<\/code> niteli\u011fi ile y\u00fcklenmesi, sayfa render'\u0131n\u0131 engellemesini \u00f6nler ve uygulaman\u0131n performans\u0131n\u0131 olumsuz etkilemez.<br \/>\n* <strong><code>gtag<\/code> Kontrol\u00fc:<\/strong> <code>window.gtag<\/code> fonksiyonunun varl\u0131\u011f\u0131n\u0131 kontrol etmek, GA4 kodunun y\u00fcklenemedi\u011fi veya bir reklam engelleyici taraf\u0131ndan engellendi\u011fi durumlarda uygulaman\u0131z\u0131n \u00e7\u00f6kmesini \u00f6nler. Bu, <code>if (window.gtag)<\/code> kontrol\u00fc ile sa\u011flan\u0131r.<br \/>\n* <strong>Geli\u015ftirme Ortam\u0131nda Devre D\u0131\u015f\u0131 B\u0131rakma:<\/strong> Geli\u015ftirme veya test ortamlar\u0131nda GA4 verilerinin kirlenmesini \u00f6nlemek i\u00e7in izlemeyi devre d\u0131\u015f\u0131 b\u0131rakmak iyi bir uygulamad\u0131r. Bunu <code>process.env.NODE_ENV<\/code> gibi ortam de\u011fi\u015fkenlerini kullanarak yapabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ useGa4PageView.js i\u00e7inde\n if (process.env.NODE_ENV === 'production' && window.gtag) {\n window.gtag('event', 'page_view', { \/* ... *\/ });\n } else {\n console.log('GA4 page_view (dev mode):', location.pathname + location.search);\n }<\/pre>\n<p><\/code><br \/>\n Bu, geli\u015ftirme s\u0131ras\u0131nda konsolda izleme olaylar\u0131n\u0131 g\u00f6rmenizi sa\u011flar, ancak ger\u00e7ek GA4 m\u00fclk\u00fcne veri g\u00f6ndermez.<\/p>\n<h4>Google Tag Manager (GTM) ve <code>react-ga4<\/code> K\u00fct\u00fcphanesi<\/h4>\n<p>Manuel <code>gtag.js<\/code> entegrasyonu yerine, GA4 izlemesini y\u00f6netmek i\u00e7in iki pop\u00fcler alternatif bulunmaktad\u0131r:<\/p>\n<p>* <strong>Google Tag Manager (GTM):<\/strong> GTM, web sitenize veya mobil uygulaman\u0131za etiketleri (izleme kodlar\u0131 ve ilgili yap\u0131land\u0131rmalar) eklemenize ve y\u00f6netmenize olanak tan\u0131yan bir etiket y\u00f6netim sistemidir. GTM kullanman\u0131n avantajlar\u0131 \u015funlard\u0131r:<br \/>\n * <strong>Kodsuz Y\u00f6netim:<\/strong> Geli\u015ftirici m\u00fcdahalesi olmadan etiketleri, tetikleyicileri ve de\u011fi\u015fkenleri web aray\u00fcz\u00fcnden y\u00f6netebilirsiniz.<br \/>\n * <strong>Merkezi Kontrol:<\/strong> T\u00fcm izleme etiketlerinizi tek bir yerden y\u00f6netebilirsiniz (GA4, Google Ads, Facebook Pixel vb.).<br \/>\n * <strong>Esneklik:<\/strong> \u00d6zel olaylar ve karma\u015f\u0131k izleme senaryolar\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir veri katman\u0131 (dataLayer) entegrasyonu sunar.<br \/>\n * <strong>Performans:<\/strong> Etiketler asenkron olarak y\u00fcklenir.<br \/>\n React SPA'lerde GTM ile sayfa g\u00f6r\u00fcnt\u00fcleme takibi, <code>history.pushState<\/code> olaylar\u0131n\u0131 dinleyen \u00f6zel tetikleyiciler veya <code>dataLayer.push<\/code> ile manuel olay g\u00f6nderme yoluyla yap\u0131labilir.<\/p>\n<p>* <strong><code>react-ga4<\/code> K\u00fct\u00fcphanesi:<\/strong> Bu, React uygulamalar\u0131 i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f bir GA4 entegrasyon k\u00fct\u00fcphanesidir. <code>gtag.js<\/code> API'sini React'e \u00f6zg\u00fc bir \u015fekilde sarmalayarak kullan\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n * <strong>Kolay Entegrasyon:<\/strong> React bile\u015fenleri i\u00e7inde GA4 olaylar\u0131n\u0131 tetiklemek i\u00e7in daha \"React-vari\" bir API sunar.<br \/>\n * <strong>Durum Y\u00f6netimi:<\/strong> React'in ya\u015fam d\u00f6ng\u00fcs\u00fc ve durum y\u00f6netimiyle daha iyi entegre olur.<br \/>\n * <strong>\u00d6rnek Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import ReactGA from 'react-ga4';\n\n ReactGA.initialize('G-XXXXXXXXXX'); \/\/ Uygulama ba\u015flang\u0131c\u0131nda bir kez\n \/\/ ...\n ReactGA.send({ hitType: 'pageview', page: location.pathname, title: document.title });<\/pre>\n<p><\/code><br \/>\n <code>react-ga4<\/code> gibi k\u00fct\u00fcphaneler, \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerde h\u0131zl\u0131 entegrasyon ve daha temiz kod sa\u011flar. Ancak, \u00e7ok karma\u015f\u0131k izleme ihtiya\u00e7lar\u0131n\u0131z varsa veya birden fazla \u00fc\u00e7\u00fcnc\u00fc taraf etiketi y\u00f6netiyorsan\u0131z GTM daha uygun bir \u00e7\u00f6z\u00fcm olabilir.<\/p>\n<p>Her iki alternatif de manuel <code>gtag.js<\/code> yakla\u015f\u0131m\u0131na g\u00f6re farkl\u0131 avantajlar sunar. Projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne, ekibinizin yetkinliklerine ve izleme ihtiya\u00e7lar\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na g\u00f6re en uygun \u00e7\u00f6z\u00fcm\u00fc se\u00e7melisiniz.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React SPA'lerde Google Analytics 4 ile sayfa g\u00f6r\u00fcnt\u00fclemelerini takip etmek, geleneksel web sitelerine g\u00f6re biraz daha fazla dikkat gerektirse de, <code>react-router-dom<\/code> ve <code>gtag.js<\/code> (veya alternatifleri) ile kolayca uygulanabilir. Do\u011fru bir kurulum ve \u00f6zelle\u015ftirilmi\u015f olay g\u00f6nderimi sayesinde, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n uygulaman\u0131zla nas\u0131l etkile\u015fim kurdu\u011funa dair de\u011ferli i\u00e7g\u00f6r\u00fcler elde edebilir, kullan\u0131c\u0131 deneyimini optimize edebilir ve i\u015f hedeflerinize ula\u015fmak i\u00e7in bilin\u00e7li kararlar alabilirsiniz. Unutmay\u0131n, do\u011fru veri, do\u011fru kararlar\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<dl>\n<dt>SPA'lerde neden geleneksel GA3 (Universal Analytics) sayfa g\u00f6r\u00fcnt\u00fcleme takibi \u00e7al\u0131\u015fmaz?<\/dt>\n<dd>Geleneksel GA3, her sayfa y\u00fcklemesinde yeniden \u00e7al\u0131\u015fan bir izleme koduna dayan\u0131r. SPA'lerde sayfa yenilenmesi olmad\u0131\u011f\u0131 i\u00e7in, URL de\u011fi\u015fse bile GA3 kodu otomatik olarak yeni bir sayfa g\u00f6r\u00fcnt\u00fcleme olay\u0131 tetiklemez. Bu durum, manuel olarak <code>pageview<\/code> olay\u0131 g\u00f6ndermeyi gerektirir.<\/dd>\n<dt>GA4'te <code>page_view<\/code> olay\u0131 otomatik olarak g\u00f6nderilir mi?<\/dt>\n<dd>Evet, GA4 varsay\u0131lan olarak \"Geli\u015ftirilmi\u015f \u00d6l\u00e7\u00fcm\" (Enhanced Measurement) \u00f6zelli\u011fi alt\u0131nda taray\u0131c\u0131 ge\u00e7mi\u015fi de\u011fi\u015fikliklerini (URL de\u011fi\u015fimi) alg\u0131layarak otomatik <code>page_view<\/code> olaylar\u0131 g\u00f6ndermeye \u00e7al\u0131\u015f\u0131r. Ancak React SPA'lerin karma\u015f\u0131k rota yap\u0131lar\u0131 ve dinamik ba\u015fl\u0131k g\u00fcncellemeleri nedeniyle, bu otomatik takip her zaman yeterli veya do\u011fru olmayabilir. Bu y\u00fczden manuel <code>gtag('event', 'page_view', ...)<\/code> kullan\u0131m\u0131 genellikle \u00f6nerilir.<\/dd>\n<dt><code>gtag.js<\/code> yerine <code>react-ga4<\/code> kullanmak ne gibi avantajlar sa\u011flar?<\/dt>\n<dd><code>react-ga4<\/code> gibi k\u00fct\u00fcphaneler, <code>gtag.js<\/code> API'sini React'e \u00f6zg\u00fc bir \u015fekilde sarmalayarak daha temiz ve React bile\u015fenleriyle uyumlu bir kullan\u0131m sunar. \u00d6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ek<\/p>\n","protected":false},"excerpt":{"rendered":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\nTek Sayfa Uygulamalar\u0131 (SPA’ler), modern web geli\u015ftirmenin temel ta\u015f…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-39513","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\" \/>\n<meta property=\"og:description\" content=\"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi Tek Sayfa Uygulamalar\u0131 (SPA'ler), modern web geli\u015ftirmenin temel ta\u015f...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-23T02:30:42+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\",\"datePublished\":\"2026-02-23T02:30:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\"},\"wordCount\":1755,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\",\"name\":\"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-23T02:30:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi","og_description":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi Tek Sayfa Uygulamalar\u0131 (SPA'ler), modern web geli\u015ftirmenin temel ta\u015f...","og_url":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-23T02:30:42+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi","datePublished":"2026-02-23T02:30:42+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"},"wordCount":1755,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","name":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-23T02:30:42+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=39513"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39513\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":39513,"date":"2026-02-23T05:30:42","date_gmt":"2026-02-23T02:30:42","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"},"modified":"2026-02-23T05:30:42","modified_gmt":"2026-02-23T02:30:42","slug":"react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","title":{"rendered":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi"},"content":{"rendered":"

React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi<\/h2>\n
Tek Sayfa Uygulamalar\u0131 (SPA’ler), modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Geleneksel \u00e7ok sayfal\u0131 uygulamalar\u0131n aksine, SPA’ler kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in sayfa yenilemeleri olmadan i\u00e7erik dinamik olarak y\u00fckler. Ancak bu dinamizm, Google Analytics gibi analiz ara\u00e7lar\u0131yla sayfa g\u00f6r\u00fcnt\u00fclemelerini do\u011fru bir \u015fekilde takip etme konusunda baz\u0131 zorluklar\u0131 beraberinde getirir. \u00d6zellikle Google Analytics 4 (GA4), olay tabanl\u0131 veri modellemesiyle bu zorluklara yeni bir yakla\u015f\u0131m sunar. Bu makalede, bir React SPA’de GA4 ile sayfa g\u00f6r\u00fcnt\u00fclemelerini nas\u0131l etkili bir \u015fekilde takip edebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Google Analytics 4’\u00fcn Temelleri ve SPA Entegrasyonu<\/h3>\n
React gibi modern framework’lerle geli\u015ftirilen Tek Sayfa Uygulamalar\u0131 (SPA’ler), kullan\u0131c\u0131 deneyimini zenginle\u015ftirirken, geleneksel analitik ara\u00e7lar\u0131 i\u00e7in baz\u0131 izleme zorluklar\u0131 yarat\u0131r. GA4’\u00fcn olay tabanl\u0131 mimarisi, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n

GA4 M\u00fclk\u00fc Olu\u015fturma ve

gtag.js<\/code> Entegrasyonu<\/h4>\nGA4 ile izlemeye ba\u015flamak i\u00e7in \u00f6ncelikle bir GA4 m\u00fclk\u00fc olu\u015fturman\u0131z gerekir. Google Analytics aray\u00fcz\u00fcnde yeni bir m\u00fclk olu\u015ftururken, “Web” veri ak\u0131\u015f\u0131n\u0131 se\u00e7meli ve web sitenizin URL’sini girmelisiniz. Bu i\u015flem sonucunda size bir “\u00d6l\u00e7\u00fcm Kimli\u011fi” (Measurement ID) verilecektir (\u00f6rn: G-XXXXXXXXXX<\/code>). Bu kimlik, verilerinizi do\u011fru GA4 m\u00fclk\u00fcne g\u00f6ndermek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Ard\u0131ndan, bu \u00f6l\u00e7\u00fcm kimli\u011fini kullanarak GA4 izleme kodunu React uygulaman\u0131z\u0131n public\/index.html<\/code> dosyas\u0131ndaki <\/code> etiketleri aras\u0131na eklemeniz gerekir. Bu kod par\u00e7ac\u0131\u011f\u0131, gtag.js<\/code> k\u00fct\u00fcphanesini y\u00fckler ve temel yap\u0131land\u0131rmay\u0131 yapar.<\/p>\n
\n\n\n\n    \n    \n    \n    \n    \n    \n    \n    React App<\/title>\n\n    <!-- Google Analytics 4 gtag.js kodu -->\n    <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-XXXXXXXXXX\"><\/script>\n    <script>\n      window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', 'G-XXXXXXXXXX'); \/\/ Kendi \u00d6l\u00e7\u00fcm Kimli\u011finizi buraya girin\n    <\/script>\n<\/head>\n<body>\n    <noscript>You need to enable JavaScript to run this app.<\/noscript>\n    <div id=\"root\"><\/div>\n<\/body>\n<\/html><\/pre>\n<p><\/code><br \/>\nBu kurulum, uygulaman\u0131z y\u00fcklendi\u011finde temel GA4 yap\u0131land\u0131rmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>SPA'lerde Sayfa G\u00f6r\u00fcnt\u00fcleme Fark\u0131<\/h4>\n<p>Geleneksel web sitelerinde, bir kullan\u0131c\u0131 farkl\u0131 bir sayfaya gitti\u011finde taray\u0131c\u0131 tam bir sayfa yenilemesi yapar. Bu yenileme s\u0131ras\u0131nda GA4 kodu yeniden \u00e7al\u0131\u015f\u0131r ve otomatik olarak yeni bir <code>page_view<\/code> olay\u0131 tetikler. Ancak React gibi SPA'lerde durum farkl\u0131d\u0131r. Kullan\u0131c\u0131 farkl\u0131 bir rotaya ge\u00e7ti\u011finde (\u00f6rn: <code>\/anasayfa<\/code>'dan <code>\/hakkimizda<\/code>'ya), taray\u0131c\u0131 URL'si de\u011fi\u015fse de sayfa tamamen yeniden y\u00fcklenmez. \u0130\u00e7erik dinamik olarak DOM \u00fczerinde g\u00fcncellenir.<\/p>\n<p>GA4, varsay\u0131lan olarak URL de\u011fi\u015fikliklerini izlemek i\u00e7in bir mekanizmaya sahip olsa da, bu mekanizma her zaman SPA'lerin karma\u015f\u0131k rota yap\u0131s\u0131n\u0131 do\u011fru bir \u015fekilde alg\u0131layamayabilir veya \u00f6zelle\u015ftirilmi\u015f sayfa ba\u015fl\u0131klar\u0131 gibi bilgileri otomatik olarak yakalayamayabilir. Bu nedenle, React SPA'lerde do\u011fru ve kapsaml\u0131 bir sayfa g\u00f6r\u00fcnt\u00fcleme takibi i\u00e7in manuel bir yakla\u015f\u0131m benimsemek genellikle en iyi yoldur.<\/p>\n<h3>React Router ile Sayfa G\u00f6r\u00fcnt\u00fcleme Takibi Uygulama<\/h3>\n<p>React uygulamalar\u0131nda sayfa g\u00f6r\u00fcnt\u00fclemelerini do\u011fru bir \u015fekilde takip etmek i\u00e7in <code>react-router-dom<\/code> k\u00fct\u00fcphanesinin sa\u011flad\u0131\u011f\u0131 yeteneklerden faydalanmam\u0131z gerekir. Bu sayede rota de\u011fi\u015fikliklerini yakalayabilir ve her de\u011fi\u015fiklikte GA4'e \u00f6zel bir <code>page_view<\/code> olay\u0131 g\u00f6nderebiliriz.<\/p>\n<h4><code>react-router-dom<\/code> ve <code>useLocation<\/code> Hook'u<\/h4>\n<p>React SPA'lerde rota y\u00f6netimini genellikle <code>react-router-dom<\/code> k\u00fct\u00fcphanesi ile yapar\u0131z. Bu k\u00fct\u00fcphane, URL de\u011fi\u015fikliklerini y\u00f6netmek ve bile\u015fenleri URL'ye g\u00f6re render etmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Sayfa g\u00f6r\u00fcnt\u00fcleme takibi i\u00e7in en \u00f6nemli ara\u00e7lardan biri <code>useLocation<\/code> hook'udur. Bu hook, mevcut URL konumunu i\u00e7eren bir nesne d\u00f6nd\u00fcr\u00fcr ve URL her de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini tetikler.<\/p>\n<p>\u0130zleme mant\u0131\u011f\u0131n\u0131 uygulamak i\u00e7in, <code>useLocation<\/code> hook'unu kullanarak URL de\u011fi\u015fikliklerini dinleyen ve her de\u011fi\u015fiklikte GA4'e veri g\u00f6nderen \u00f6zel bir React hook'u veya bile\u015feni olu\u015fturabiliriz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/hooks\/useGa4PageView.js\nimport { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nconst useGa4PageView = (measurementId) => {\n  const location = useLocation();\n\n  useEffect(() => {\n    \/\/ gtag fonksiyonunun tan\u0131ml\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n    if (window.gtag) {\n      window.gtag('event', 'page_view', {\n        page_path: location.pathname + location.search,\n        page_location: window.location.href,\n        page_title: document.title,\n      });\n      console.log('GA4 page_view sent:', location.pathname + location.search);\n    } else {\n      console.warn('Google Analytics gtag not found. Page view not sent.');\n    }\n  }, [location, measurementId]); \/\/ location her de\u011fi\u015fti\u011finde tetiklenir\n};\n\nexport default useGa4PageView;<\/pre>\n<p><\/code><\/p>\n<h4>\u00d6zel <code>page_view<\/code> Olay\u0131 G\u00f6nderme<\/h4>\n<p>Yukar\u0131daki <code>useGa4PageView<\/code> hook'unu React uygulaman\u0131zda kullanmak olduk\u00e7a basittir. Genellikle uygulaman\u0131z\u0131n ana bile\u015feninde (<code>App.js<\/code> veya <code>Layout.js<\/code>) \u00e7a\u011f\u0131r\u0131rs\u0131n\u0131z, b\u00f6ylece t\u00fcm rota de\u011fi\u015fikliklerini kapsar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/App.js\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport useGa4PageView from '.\/hooks\/useGa4PageView'; \/\/ Kendi hook'unuzu import edin\n\n\/\/ \u00d6rnek Sayfalar\nconst HomePage = () => <h1>Anasayfa<\/h1>;\nconst AboutPage = () => <h1>Hakk\u0131m\u0131zda<\/h1>;\nconst ContactPage = () => <h1>\u0130leti\u015fim<\/h1>;\nconst ProductPage = () => <h1>\u00dcr\u00fcn Detay\u0131<\/h1>;\n\nconst GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'; \/\/ Kendi \u00d6l\u00e7\u00fcm Kimli\u011finizi buraya girin\n\nfunction App() {\n  useGa4PageView(GA_MEASUREMENT_ID); \/\/ Hook'u burada \u00e7a\u011f\u0131r\u0131yoruz\n\n  return (\n    <Router>\n      <nav>\n        <ul>\n          <li><a href=\"\/\">Anasayfa<\/a><\/li>\n          <li><a href=\"\/hakkimizda\">Hakk\u0131m\u0131zda<\/a><\/li>\n          <li><a href=\"\/iletisim\">\u0130leti\u015fim<\/a><\/li>\n          <li><a href=\"\/urunler\/123\">\u00dcr\u00fcn 123<\/a><\/li>\n        <\/ul>\n      <\/nav>\n      <Routes>\n        <Route path=\"\/\" element={<HomePage \/>} \/>\n        <Route path=\"\/hakkimizda\" element={<AboutPage \/>} \/>\n        <Route path=\"\/iletisim\" element={<ContactPage \/>} \/>\n        <Route path=\"\/urunler\/:id\" element={<ProductPage \/>} \/>\n      <\/Routes>\n    <\/Router>\n  );\n}\n\nexport default App;<\/pre>\n<p><\/code><\/p>\n<p>Bu kod par\u00e7ac\u0131\u011f\u0131, uygulaman\u0131zdaki her rota de\u011fi\u015fikli\u011finde <code>useGa4PageView<\/code> hook'unun tetiklenmesini ve <code>gtag('event', 'page_view', ...)<\/code> fonksiyonu arac\u0131l\u0131\u011f\u0131yla GA4'e bir sayfa g\u00f6r\u00fcnt\u00fcleme olay\u0131 g\u00f6ndermesini sa\u011flar. <code>page_path<\/code>, <code>page_location<\/code> ve <code>page_title<\/code> gibi parametreler, GA4 raporlar\u0131nda daha anlaml\u0131 veriler g\u00f6rmenizi sa\u011flar. <code>window.gtag<\/code> kontrol\u00fc, GA4 kodunun hen\u00fcz y\u00fcklenmemi\u015f veya engellenmi\u015f olabilece\u011fi durumlar i\u00e7in hata y\u00f6netimini sa\u011flar.<\/p>\n<h3>Geli\u015fmi\u015f Takip Senaryolar\u0131 ve \u00d6zelle\u015ftirmeler<\/h3>\n<p>Temel sayfa g\u00f6r\u00fcnt\u00fcleme takibini kurduktan sonra, uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re izleme verilerini daha da zenginle\u015ftirebilirsiniz. Dinamik rotalar ve \u00f6zel parametreler, GA4 raporlar\u0131n\u0131z\u0131n derinli\u011fini art\u0131rman\u0131za olanak tan\u0131r.<\/p>\n<h4>Dinamik Rotalar ve Ba\u015fl\u0131k Y\u00f6netimi<\/h4>\n<p>React SPA'lerde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir durum, \u00fcr\u00fcn detay sayfalar\u0131 (<code>\/urunler\/:id<\/code>) veya kullan\u0131c\u0131 profilleri (<code>\/kullanicilar\/:username<\/code>) gibi dinamik rotalard\u0131r. Bu rotalarda <code>page_path<\/code> genellikle ayn\u0131 kal\u0131r (<code>\/urunler\/:id<\/code>), ancak ger\u00e7ek i\u00e7erik de\u011fi\u015fir. GA4 raporlar\u0131nda daha anlaml\u0131 veriler g\u00f6rmek i\u00e7in, <code>page_path<\/code>'i dinamik olarak ayarlamak ve sayfa ba\u015fl\u0131\u011f\u0131n\u0131 ( <code>page_title<\/code> ) g\u00fcncel tutmak \u00f6nemlidir.<\/p>\n<p><code>react-router-dom<\/code>'un <code>useParams<\/code> hook'u ile dinamik rota parametrelerini yakalayabilir ve bunlar\u0131 <code>page_path<\/code> veya <code>page_title<\/code> olu\u015fturmak i\u00e7in kullanabilirsiniz. Ayr\u0131ca, <code>document.title<\/code>'\u0131 her sayfa ge\u00e7i\u015finde g\u00fcncellemek, kullan\u0131c\u0131n\u0131n taray\u0131c\u0131 sekmesinde do\u011fru ba\u015fl\u0131\u011f\u0131 g\u00f6rmesini ve GA4'e do\u011fru ba\u015fl\u0131\u011f\u0131n g\u00f6nderilmesini sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/hooks\/useGa4PageView.js (G\u00fcncellenmi\u015f versiyon)\nimport { useEffect } from 'react';\nimport { useLocation, useParams } from 'react-router-dom';\n\nconst useGa4PageView = (measurementId) => {\n  const location = useLocation();\n  const params = useParams(); \/\/ Dinamik parametreleri yakalamak i\u00e7in\n\n  useEffect(() => {\n    const currentPath = location.pathname + location.search;\n    let pageTitle = document.title; \/\/ Varsay\u0131lan olarak mevcut belge ba\u015fl\u0131\u011f\u0131\n\n    \/\/ Dinamik rotalar i\u00e7in ba\u015fl\u0131\u011f\u0131 \u00f6zelle\u015ftirme \u00f6rne\u011fi\n    if (location.pathname.startsWith('\/urunler\/')) {\n      const productId = params.id;\n      pageTitle = <code>\u00dcr\u00fcn Detay\u0131: ${productId}<\/code>;\n      document.title = pageTitle; \/\/ Taray\u0131c\u0131 ba\u015fl\u0131\u011f\u0131n\u0131 da g\u00fcncelle\n    } else if (location.pathname === '\/hakkimizda') {\n      pageTitle = 'Hakk\u0131m\u0131zda Sayfas\u0131';\n      document.title = pageTitle;\n    }\n    \/\/ Di\u011fer rotalar i\u00e7in benzer ko\u015fullar eklenebilir\n\n    if (window.gtag) {\n      window.gtag('event', 'page_view', {\n        page_path: currentPath,\n        page_location: window.location.href,\n        page_title: pageTitle,\n        \/\/ Ek \u00f6zel parametreler buraya eklenebilir\n        \/\/ custom_dimension_product_id: params.id,\n      });\n      console.log('GA4 page_view sent:', currentPath, 'Title:', pageTitle);\n    } else {\n      console.warn('Google Analytics gtag not found. Page view not sent.');\n    }\n  }, [location, params, measurementId]); \/\/ params da ba\u011f\u0131ml\u0131l\u0131k olarak eklenmeli\n\n  \/\/ \u0130lk y\u00fcklemede de sayfa ba\u015fl\u0131\u011f\u0131n\u0131 ayarlamak i\u00e7in ayr\u0131 bir useEffect\n  useEffect(() => {\n    \/\/ Uygulama ilk y\u00fcklendi\u011finde varsay\u0131lan ba\u015fl\u0131\u011f\u0131 ayarla\n    if (location.pathname === '\/') {\n      document.title = 'Anasayfa';\n    }\n  }, []); \/\/ Sadece bir kere \u00e7al\u0131\u015f\u0131r\n};\n\nexport default useGa4PageView;<\/pre>\n<p><\/code><br \/>\nBu \u00f6rnek, <code>\/urunler\/:id<\/code> rotas\u0131na \u00f6zel bir ba\u015fl\u0131k atayarak GA4 raporlar\u0131n\u0131zda daha a\u00e7\u0131klay\u0131c\u0131 sayfa adlar\u0131 g\u00f6rmenizi sa\u011flar.<\/p>\n<h4>\u00d6zel Parametreler ve Veri Katman\u0131<\/h4>\n<p>GA4'\u00fcn en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, olaylara \u00f6zel parametreler ekleyebilme yetene\u011fidir. Sayfa g\u00f6r\u00fcnt\u00fcleme olaylar\u0131n\u0131za, kullan\u0131c\u0131 deneyimi veya i\u015f hedeflerinizle ilgili ek bilgiler ekleyebilirsiniz. \u00d6rne\u011fin, bir \u00fcr\u00fcn sayfas\u0131nda, \u00fcr\u00fcn kategorisi, yazar ad\u0131 veya yay\u0131n tarihi gibi bilgileri <code>page_view<\/code> olay\u0131na \u00f6zel parametreler olarak ekleyebilirsiniz.<\/p>\n<p>Bu \u00f6zel parametreler, GA4'te \u00f6zel boyutlar ve metrikler olarak yap\u0131land\u0131r\u0131labilir ve daha derinlemesine analizler yapman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ gtag('event', 'page_view', {\n\/\/   page_path: '\/blog\/makale-basligi',\n\/\/   page_title: 'Makale Ba\u015fl\u0131\u011f\u0131',\n\/\/   author: 'Yazar Ad\u0131', \/\/ \u00d6zel parametre\n\/\/   category: 'Teknoloji', \/\/ \u00d6zel parametre\n\/\/   published_date: '2023-10-26' \/\/ \u00d6zel parametre\n\/\/ });<\/pre>\n<p><\/code><br \/>\nBu parametreleri GA4 aray\u00fcz\u00fcnde \"\u00d6zel Tan\u0131mlar\" alt\u0131nda yap\u0131land\u0131rman\u0131z gerekmektedir. Bu sayede, raporlar\u0131n\u0131zda bu verilere g\u00f6re filtreleme ve segmentasyon yapabilirsiniz.<\/p>\n<h3>Performans, G\u00fcvenilirlik ve Alternatifler<\/h3>\n<p>GA4 izleme kodunu React SPA'nize entegre ederken, performans, g\u00fcvenilirlik ve s\u00fcrd\u00fcr\u00fclebilirlik gibi fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir. Ayr\u0131ca, manuel <code>gtag.js<\/code> entegrasyonuna alternatif olabilecek ba\u015fka y\u00f6ntemler de mevcuttur.<\/p>\n<h4>\u0130zleme Kodunu Optimize Etme ve Hata Y\u00f6netimi<\/h4>\n<p>*   <strong>Asenkron Y\u00fckleme:<\/strong> <code>gtag.js<\/code> kodunun <code>async<\/code> niteli\u011fi ile y\u00fcklenmesi, sayfa render'\u0131n\u0131 engellemesini \u00f6nler ve uygulaman\u0131n performans\u0131n\u0131 olumsuz etkilemez.<br \/>\n*   <strong><code>gtag<\/code> Kontrol\u00fc:<\/strong> <code>window.gtag<\/code> fonksiyonunun varl\u0131\u011f\u0131n\u0131 kontrol etmek, GA4 kodunun y\u00fcklenemedi\u011fi veya bir reklam engelleyici taraf\u0131ndan engellendi\u011fi durumlarda uygulaman\u0131z\u0131n \u00e7\u00f6kmesini \u00f6nler. Bu, <code>if (window.gtag)<\/code> kontrol\u00fc ile sa\u011flan\u0131r.<br \/>\n*   <strong>Geli\u015ftirme Ortam\u0131nda Devre D\u0131\u015f\u0131 B\u0131rakma:<\/strong> Geli\u015ftirme veya test ortamlar\u0131nda GA4 verilerinin kirlenmesini \u00f6nlemek i\u00e7in izlemeyi devre d\u0131\u015f\u0131 b\u0131rakmak iyi bir uygulamad\u0131r. Bunu <code>process.env.NODE_ENV<\/code> gibi ortam de\u011fi\u015fkenlerini kullanarak yapabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ useGa4PageView.js i\u00e7inde\n    if (process.env.NODE_ENV === 'production' && window.gtag) {\n      window.gtag('event', 'page_view', { \/* ... *\/ });\n    } else {\n      console.log('GA4 page_view (dev mode):', location.pathname + location.search);\n    }<\/pre>\n<p><\/code><br \/>\n    Bu, geli\u015ftirme s\u0131ras\u0131nda konsolda izleme olaylar\u0131n\u0131 g\u00f6rmenizi sa\u011flar, ancak ger\u00e7ek GA4 m\u00fclk\u00fcne veri g\u00f6ndermez.<\/p>\n<h4>Google Tag Manager (GTM) ve <code>react-ga4<\/code> K\u00fct\u00fcphanesi<\/h4>\n<p>Manuel <code>gtag.js<\/code> entegrasyonu yerine, GA4 izlemesini y\u00f6netmek i\u00e7in iki pop\u00fcler alternatif bulunmaktad\u0131r:<\/p>\n<p>*   <strong>Google Tag Manager (GTM):<\/strong> GTM, web sitenize veya mobil uygulaman\u0131za etiketleri (izleme kodlar\u0131 ve ilgili yap\u0131land\u0131rmalar) eklemenize ve y\u00f6netmenize olanak tan\u0131yan bir etiket y\u00f6netim sistemidir. GTM kullanman\u0131n avantajlar\u0131 \u015funlard\u0131r:<br \/>\n    *   <strong>Kodsuz Y\u00f6netim:<\/strong> Geli\u015ftirici m\u00fcdahalesi olmadan etiketleri, tetikleyicileri ve de\u011fi\u015fkenleri web aray\u00fcz\u00fcnden y\u00f6netebilirsiniz.<br \/>\n    *   <strong>Merkezi Kontrol:<\/strong> T\u00fcm izleme etiketlerinizi tek bir yerden y\u00f6netebilirsiniz (GA4, Google Ads, Facebook Pixel vb.).<br \/>\n    *   <strong>Esneklik:<\/strong> \u00d6zel olaylar ve karma\u015f\u0131k izleme senaryolar\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir veri katman\u0131 (dataLayer) entegrasyonu sunar.<br \/>\n    *   <strong>Performans:<\/strong> Etiketler asenkron olarak y\u00fcklenir.<br \/>\n    React SPA'lerde GTM ile sayfa g\u00f6r\u00fcnt\u00fcleme takibi, <code>history.pushState<\/code> olaylar\u0131n\u0131 dinleyen \u00f6zel tetikleyiciler veya <code>dataLayer.push<\/code> ile manuel olay g\u00f6nderme yoluyla yap\u0131labilir.<\/p>\n<p>*   <strong><code>react-ga4<\/code> K\u00fct\u00fcphanesi:<\/strong> Bu, React uygulamalar\u0131 i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f bir GA4 entegrasyon k\u00fct\u00fcphanesidir. <code>gtag.js<\/code> API'sini React'e \u00f6zg\u00fc bir \u015fekilde sarmalayarak kullan\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n    *   <strong>Kolay Entegrasyon:<\/strong> React bile\u015fenleri i\u00e7inde GA4 olaylar\u0131n\u0131 tetiklemek i\u00e7in daha \"React-vari\" bir API sunar.<br \/>\n    *   <strong>Durum Y\u00f6netimi:<\/strong> React'in ya\u015fam d\u00f6ng\u00fcs\u00fc ve durum y\u00f6netimiyle daha iyi entegre olur.<br \/>\n    *   <strong>\u00d6rnek Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import ReactGA from 'react-ga4';\n\n        ReactGA.initialize('G-XXXXXXXXXX'); \/\/ Uygulama ba\u015flang\u0131c\u0131nda bir kez\n        \/\/ ...\n        ReactGA.send({ hitType: 'pageview', page: location.pathname, title: document.title });<\/pre>\n<p><\/code><br \/>\n    <code>react-ga4<\/code> gibi k\u00fct\u00fcphaneler, \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerde h\u0131zl\u0131 entegrasyon ve daha temiz kod sa\u011flar. Ancak, \u00e7ok karma\u015f\u0131k izleme ihtiya\u00e7lar\u0131n\u0131z varsa veya birden fazla \u00fc\u00e7\u00fcnc\u00fc taraf etiketi y\u00f6netiyorsan\u0131z GTM daha uygun bir \u00e7\u00f6z\u00fcm olabilir.<\/p>\n<p>Her iki alternatif de manuel <code>gtag.js<\/code> yakla\u015f\u0131m\u0131na g\u00f6re farkl\u0131 avantajlar sunar. Projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne, ekibinizin yetkinliklerine ve izleme ihtiya\u00e7lar\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na g\u00f6re en uygun \u00e7\u00f6z\u00fcm\u00fc se\u00e7melisiniz.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React SPA'lerde Google Analytics 4 ile sayfa g\u00f6r\u00fcnt\u00fclemelerini takip etmek, geleneksel web sitelerine g\u00f6re biraz daha fazla dikkat gerektirse de, <code>react-router-dom<\/code> ve <code>gtag.js<\/code> (veya alternatifleri) ile kolayca uygulanabilir. Do\u011fru bir kurulum ve \u00f6zelle\u015ftirilmi\u015f olay g\u00f6nderimi sayesinde, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n uygulaman\u0131zla nas\u0131l etkile\u015fim kurdu\u011funa dair de\u011ferli i\u00e7g\u00f6r\u00fcler elde edebilir, kullan\u0131c\u0131 deneyimini optimize edebilir ve i\u015f hedeflerinize ula\u015fmak i\u00e7in bilin\u00e7li kararlar alabilirsiniz. Unutmay\u0131n, do\u011fru veri, do\u011fru kararlar\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<dl>\n<dt>SPA'lerde neden geleneksel GA3 (Universal Analytics) sayfa g\u00f6r\u00fcnt\u00fcleme takibi \u00e7al\u0131\u015fmaz?<\/dt>\n<dd>Geleneksel GA3, her sayfa y\u00fcklemesinde yeniden \u00e7al\u0131\u015fan bir izleme koduna dayan\u0131r. SPA'lerde sayfa yenilenmesi olmad\u0131\u011f\u0131 i\u00e7in, URL de\u011fi\u015fse bile GA3 kodu otomatik olarak yeni bir sayfa g\u00f6r\u00fcnt\u00fcleme olay\u0131 tetiklemez. Bu durum, manuel olarak <code>pageview<\/code> olay\u0131 g\u00f6ndermeyi gerektirir.<\/dd>\n<dt>GA4'te <code>page_view<\/code> olay\u0131 otomatik olarak g\u00f6nderilir mi?<\/dt>\n<dd>Evet, GA4 varsay\u0131lan olarak \"Geli\u015ftirilmi\u015f \u00d6l\u00e7\u00fcm\" (Enhanced Measurement) \u00f6zelli\u011fi alt\u0131nda taray\u0131c\u0131 ge\u00e7mi\u015fi de\u011fi\u015fikliklerini (URL de\u011fi\u015fimi) alg\u0131layarak otomatik <code>page_view<\/code> olaylar\u0131 g\u00f6ndermeye \u00e7al\u0131\u015f\u0131r. Ancak React SPA'lerin karma\u015f\u0131k rota yap\u0131lar\u0131 ve dinamik ba\u015fl\u0131k g\u00fcncellemeleri nedeniyle, bu otomatik takip her zaman yeterli veya do\u011fru olmayabilir. Bu y\u00fczden manuel <code>gtag('event', 'page_view', ...)<\/code> kullan\u0131m\u0131 genellikle \u00f6nerilir.<\/dd>\n<dt><code>gtag.js<\/code> yerine <code>react-ga4<\/code> kullanmak ne gibi avantajlar sa\u011flar?<\/dt>\n<dd><code>react-ga4<\/code> gibi k\u00fct\u00fcphaneler, <code>gtag.js<\/code> API'sini React'e \u00f6zg\u00fc bir \u015fekilde sarmalayarak daha temiz ve React bile\u015fenleriyle uyumlu bir kullan\u0131m sunar. \u00d6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ek<\/p>\n","protected":false},"excerpt":{"rendered":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\nTek Sayfa Uygulamalar\u0131 (SPA’ler), modern web geli\u015ftirmenin temel ta\u015f…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-39513","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\" \/>\n<meta property=\"og:description\" content=\"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi Tek Sayfa Uygulamalar\u0131 (SPA'ler), modern web geli\u015ftirmenin temel ta\u015f...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-23T02:30:42+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\",\"datePublished\":\"2026-02-23T02:30:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\"},\"wordCount\":1755,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\",\"name\":\"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-23T02:30:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi","og_description":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi Tek Sayfa Uygulamalar\u0131 (SPA'ler), modern web geli\u015ftirmenin temel ta\u015f...","og_url":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-23T02:30:42+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi","datePublished":"2026-02-23T02:30:42+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"},"wordCount":1755,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/","name":"React SPA'lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-23T02:30:42+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-spalerde-google-analytics-4-ile-sayfa-goruntulemelerini-takip-etme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React SPA’lerde Google Analytics 4 ile Sayfa G\u00f6r\u00fcnt\u00fclemelerini Takip Etme Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=39513"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39513\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}