{"id":30755,"date":"2025-10-01T16:42:04","date_gmt":"2025-10-01T13:42:04","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30755"},"modified":"2025-10-01T16:42:04","modified_gmt":"2025-10-01T13:42:04","slug":"react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/","title":{"rendered":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme"},"content":{"rendered":"

React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme<\/h2>\n

Giri\u015f<\/h3>\n

Modern web uygulamalar\u0131, \u00f6zellikle React ve Redux gibi teknolojilerle geli\u015ftirilen Tek Sayfal\u0131 Uygulamalar (SPA’lar), kullan\u0131c\u0131 deneyimini zenginle\u015ftiren dinamik ve etkile\u015fimli yap\u0131lar sunar. Ancak bu dinamizm, kullan\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 anlamak ve uygulaman\u0131n performans\u0131n\u0131 \u00f6l\u00e7mek i\u00e7in hayati \u00f6nem ta\u015f\u0131yan analitik verilerin toplanmas\u0131n\u0131 geleneksel y\u00f6ntemlere g\u00f6re daha karma\u015f\u0131k hale getirebilir. Google Analytics, web sitelerinin ve uygulamalar\u0131n ziyaret\u00e7i etkile\u015fimlerini, trafik kaynaklar\u0131n\u0131 ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 izlemek i\u00e7in end\u00fcstri standard\u0131 bir ara\u00e7t\u0131r. Bu veriler, \u00fcr\u00fcn geli\u015ftirme, pazarlama stratejileri ve genel i\u015f kararlar\u0131 i\u00e7in paha bi\u00e7ilmez i\u00e7g\u00f6r\u00fcler sa\u011flar.<\/p>\n

React\/Redux uygulamalar\u0131nda Google Analytics entegrasyonu, sayfa yenilemeleri olmadan ger\u00e7ekle\u015fen durum de\u011fi\u015fiklikleri ve kullan\u0131c\u0131 etkile\u015fimleri nedeniyle \u00f6zel bir yakla\u015f\u0131m gerektirir. Her bir Redux eylemi, uygulaman\u0131n durumunda bir de\u011fi\u015fikli\u011fi temsil etti\u011finden, bu eylemleri analitik olaylar\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in merkezi ve tutarl\u0131 bir mekanizmaya ihtiya\u00e7 duyar\u0131z. \u0130\u015fte bu noktada Redux Beacon devreye girer. Redux Beacon, Redux eylemlerini \u00e7e\u015fitli analitik platformlar\u0131na (Google Analytics, Facebook Pixel, Mixpanel vb.) olay olarak g\u00f6ndermeyi kolayla\u015ft\u0131ran bir Redux middleware’idir. Bu makale, Redux Beacon kullanarak React\/Redux uygulaman\u0131za Google Analytics entegrasyonunu nas\u0131l yapaca\u011f\u0131n\u0131z\u0131, temel kurulumdan geli\u015fmi\u015f senaryolara kadar ad\u0131m ad\u0131m detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacakt\u0131r.<\/p>\n

Neden Analitik?<\/h3>\n

Analitik verileri, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. \u0130\u015fte ba\u015fl\u0131ca nedenler:<\/p>\n

* Kullan\u0131c\u0131 Davran\u0131\u015f\u0131n\u0131 Anlama:<\/strong> Kullan\u0131c\u0131lar\u0131n uygulaman\u0131zda nas\u0131l gezindi\u011fini, hangi \u00f6zelliklerin pop\u00fcler oldu\u011funu ve nerede tak\u0131ld\u0131klar\u0131n\u0131 g\u00f6sterir.
\n* Performans \u0130yile\u015ftirme:<\/strong> Yava\u015f y\u00fcklenen sayfalar\u0131 veya kullan\u0131c\u0131lar\u0131n terk etti\u011fi noktalar\u0131 belirleyerek uygulaman\u0131z\u0131n performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini optimize etmenize yard\u0131mc\u0131 olur.
\n* Veriye Dayal\u0131 Kararlar:<\/strong> Geli\u015ftirme yol haritas\u0131, yeni \u00f6zellikler ve pazarlama kampanyalar\u0131 hakk\u0131nda spek\u00fclasyon yerine somut verilere dayanarak kararlar alman\u0131z\u0131 sa\u011flar.
\n* D\u00f6n\u00fc\u015f\u00fcm Optimizasyonu:<\/strong> E-ticaret sitelerinde sat\u0131\u015flar\u0131, abonelik hizmetlerinde kay\u0131tlar\u0131 veya kurumsal sitelerde potansiyel m\u00fc\u015fteri formlar\u0131n\u0131 doldurma oranlar\u0131n\u0131 art\u0131rmak i\u00e7in darbo\u011fazlar\u0131 tespit etmenize olanak tan\u0131r.
\n* ROI \u00d6l\u00e7\u00fcm\u00fc:<\/strong> Pazarlama harcamalar\u0131n\u0131z\u0131n geri d\u00f6n\u00fc\u015f\u00fcn\u00fc \u00f6l\u00e7erek b\u00fct\u00e7enizi daha etkili kullanman\u0131z\u0131 sa\u011flar.<\/p>\n

Bu i\u00e7g\u00f6r\u00fcler olmadan, uygulaman\u0131z\u0131 geli\u015ftirmek veya kullan\u0131c\u0131 taban\u0131n\u0131z\u0131 b\u00fcy\u00fctmek i\u00e7in yap\u0131lan \u00e7abalar genellikle deneme yan\u0131lmaya dayan\u0131r ve optimal sonu\u00e7lar vermeyebilir.<\/p>\n

Google Analytics Temelleri<\/h3>\n

Google Analytics (GA), web sitesi trafi\u011fini izleyen ve raporlayan bir web analizi hizmetidir. Temel olarak, web sitenize ekledi\u011finiz k\u00fc\u00e7\u00fck bir JavaScript kodu par\u00e7as\u0131 (izleme kodu) arac\u0131l\u0131\u011f\u0131yla \u00e7al\u0131\u015f\u0131r. Bu kod, ziyaret\u00e7ilerinizin taray\u0131c\u0131lar\u0131ndan bilgi toplar ve bu bilgileri Google’\u0131n sunucular\u0131na g\u00f6nderir.<\/p>\n

* \u0130zleme Kimli\u011fi (Tracking ID):<\/strong> Her GA m\u00fclk\u00fcne \u00f6zg\u00fc bir kimliktir (Universal Analytics i\u00e7in UA-XXXXX-Y<\/code>, Google Analytics 4 i\u00e7in G-XXXXX<\/code>). Bu kimlik, verilerin do\u011fru GA hesab\u0131na g\u00f6nderilmesini sa\u011flar.
\n* Sayfa G\u00f6r\u00fcnt\u00fclemeleri (Page Views):<\/strong> Bir kullan\u0131c\u0131n\u0131n belirli bir sayfay\u0131 her ziyaret etti\u011finde kaydedilen temel bir etkile\u015fimdir. SPA’larda bu, URL de\u011fi\u015fti\u011finde manuel olarak tetiklenmelidir.
\n* Olaylar (Events):<\/strong> Sayfa g\u00f6r\u00fcnt\u00fclemeleri d\u0131\u015f\u0131nda ger\u00e7ekle\u015fen kullan\u0131c\u0131 etkile\u015fimleridir. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131klama, bir video oynatma, bir form g\u00f6nderme veya bir dosya indirme. Olaylar genellikle bir eventCategory<\/code>, eventAction<\/code> ve eventLabel<\/code> ile tan\u0131mlan\u0131r. Google Analytics 4 (GA4) tamamen olay tabanl\u0131 bir model \u00fczerine kurulmu\u015ftur.
\n* \u00d6zel Boyutlar ve Metrikler (Custom Dimensions & Metrics):<\/strong> Standart GA raporlar\u0131nda bulunmayan, uygulaman\u0131za \u00f6zg\u00fc verileri toplaman\u0131za olanak tan\u0131r (\u00f6rn. kullan\u0131c\u0131 rol\u00fc, \u00fcr\u00fcn ID’si).<\/p>\n

Bu makale, hem Universal Analytics (UA) hem de GA4 ile uyumlu, olay tabanl\u0131 bir yakla\u015f\u0131m\u0131 benimseyecektir. \u00d6zellikle GA4’\u00fcn olay odakl\u0131 yap\u0131s\u0131, Redux Beacon’\u0131n eylem tabanl\u0131 yakla\u015f\u0131m\u0131yla m\u00fckemmel bir uyum i\u00e7indedir.<\/p>\n

React\/Redux Uygulamalar\u0131nda Analitik Zorluklar\u0131<\/h3>\n

Tek Sayfal\u0131 Uygulamalar (SPA’lar) ve Redux gibi durum y\u00f6netim sistemleri, geleneksel web sitelerinden farkl\u0131 analitik zorluklar\u0131 sunar:<\/p>\n

* Sayfa Yenilemesi Yok:<\/strong> Geleneksel web sitelerinde, her sayfa ziyareti tam bir sayfa yenilemesini tetikler ve bu da GA izleme kodunun otomatik olarak bir sayfa g\u00f6r\u00fcnt\u00fclemesi kaydetmesini sa\u011flar. SPA’larda ise sayfa i\u00e7eri\u011fi JavaScript ile dinamik olarak de\u011fi\u015fir ve taray\u0131c\u0131 URL’si g\u00fcncellense bile tam bir sayfa yenilemesi olmaz. Bu, sayfa g\u00f6r\u00fcnt\u00fclemelerinin manuel olarak tetiklenmesi gerekti\u011fi anlam\u0131na gelir.
\n* Karma\u015f\u0131k Kullan\u0131c\u0131 Etkile\u015fimleri:<\/strong> Redux eylemleri arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fen bir\u00e7ok kullan\u0131c\u0131 etkile\u015fimi (\u00f6rn. bir \u00fcr\u00fcn\u00fcn sepete eklenmesi, bir filtrenin uygulanmas\u0131) DOM seviyesinde do\u011frudan izlenemez. Bu etkile\u015fimleri analitik olaylar\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in Redux’\u0131n durum y\u00f6netimi katman\u0131na eri\u015fmek gerekir.
\n* Kod Karma\u015fas\u0131:<\/strong> Analitik kodunu do\u011frudan bile\u015fenlere veya eylem yarat\u0131c\u0131lara yerle\u015ftirmek, kodun da\u011f\u0131n\u0131kl\u0131\u011f\u0131na ve bak\u0131m zorluklar\u0131na yol a\u00e7abilir. Analitik mant\u0131\u011f\u0131n\u0131n uygulaman\u0131n i\u015f mant\u0131\u011f\u0131ndan ayr\u0131lmas\u0131 \u00f6nemlidir.
\n* Tutarl\u0131l\u0131k Eksikli\u011fi:<\/strong> Birden fazla geli\u015ftirici farkl\u0131 analitik olaylar\u0131 farkl\u0131 \u015fekillerde tetikleyebilir, bu da veri tutars\u0131zl\u0131\u011f\u0131na yol a\u00e7abilir. Merkezi bir yakla\u015f\u0131m bu sorunu \u00e7\u00f6zer.
\n* Test Edilebilirlik:<\/strong> Analitik kodunu test etmek, uygulaman\u0131n geri kalan\u0131n\u0131 test etmek kadar \u00f6nemlidir. Da\u011f\u0131n\u0131k analitik kodunun test edilmesi zor olabilir.<\/p>\n

Redux Beacon, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in tasarlanm\u0131\u015f bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n

Redux Beacon Nedir?<\/h3>\n

Redux Beacon, Redux ekosistemi i\u00e7in geli\u015ftirilmi\u015f bir middleware’dir. Temel amac\u0131, belirli Redux eylemlerini dinlemek ve bu eylemler ger\u00e7ekle\u015fti\u011finde \u00f6nceden tan\u0131mlanm\u0131\u015f bir analitik olay\u0131n\u0131 belirli bir analitik platformuna (hedef) g\u00f6ndermektir.<\/p>\n

Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong>
\n1. Middleware Olarak Entegrasyon:<\/strong> Redux Beacon, Redux ma\u011fazas\u0131na bir middleware olarak eklenir. Bu sayede, uygulaman\u0131zda da\u011f\u0131t\u0131lan her eylemi dinleyebilir.
\n2. Olay Haritas\u0131 (Events Map):<\/strong> Geli\u015ftirici, hangi Redux eylemlerinin hangi analitik olaylar\u0131na kar\u015f\u0131l\u0131k geldi\u011fini belirten bir “olay haritas\u0131” tan\u0131mlar. Bu harita, eylem t\u00fcrlerini (action types) analitik olay nesnelerine d\u00f6n\u00fc\u015ft\u00fcren fonksiyonlar\u0131 i\u00e7erir.
\n3. Hedefler (Targets):<\/strong> Redux Beacon, Google Analytics, Facebook Pixel, Mixpanel gibi farkl\u0131 analitik platformlar\u0131 i\u00e7in “hedefler” sa\u011flar. Bir hedef, analitik olay\u0131n\u0131 ilgili platformun API’sine g\u00f6ndermekten sorumlu olan bir fonksiyondur.
\n4. Eylem Dinleme ve D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong> Bir eylem g\u00f6nderildi\u011finde, Redux Beacon middleware’i bu eylemi yakalar. E\u011fer eylem t\u00fcr\u00fc olay haritas\u0131nda tan\u0131mlanm\u0131\u015fsa, ilgili d\u00f6n\u00fc\u015f\u00fcm fonksiyonunu \u00e7a\u011f\u0131r\u0131r.
\n5. Olay\u0131 G\u00f6nderme:<\/strong> D\u00f6n\u00fc\u015f\u00fcm fonksiyonu taraf\u0131ndan olu\u015fturulan analitik olay\u0131, belirlenen hedefe g\u00f6nderilir.<\/p>\n

Redux Beacon’\u0131n Avantajlar\u0131:<\/strong><\/p>\n

* Deklaratif ve Merkezi:<\/strong> Analitik mant\u0131\u011f\u0131n\u0131 tek bir yerde (olay haritas\u0131) tan\u0131mlayarak kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n* Ayr\u0131lm\u0131\u015f Sorumluluklar:<\/strong> Analitik kodunu i\u015f mant\u0131\u011f\u0131ndan ay\u0131r\u0131r, bile\u015fenlerinizin ve eylem yarat\u0131c\u0131lar\u0131n\u0131z\u0131n temiz kalmas\u0131n\u0131 sa\u011flar.
\n* Test Edilebilirlik:<\/strong> Olay haritas\u0131 ve hedefler kolayca mock’lanabilir, bu da analitik entegrasyonunun test edilmesini basitle\u015ftirir.
\n* Esneklik:<\/strong> Herhangi bir Redux eylemini herhangi bir analitik olay\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Eylem y\u00fck\u00fcnden (payload) veri \u00e7ekerek dinamik olaylar olu\u015fturabilirsiniz.
\n* \u00c7oklu Hedef Deste\u011fi:<\/strong> Ayn\u0131 anda birden fazla analitik platformuna veri g\u00f6nderebilirsiniz.<\/p>\n

Redux Beacon Kurulumu ve Temel Kullan\u0131m<\/h3>\n

React\/Redux uygulaman\u0131zda Redux Beacon’\u0131 kullanmaya ba\u015flamak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyelim.<\/p>\n

\u00d6n Ko\u015fullar<\/h4>\n

* Node.js ve npm\/yarn kurulu.
\n* Mevcut bir React\/Redux uygulamas\u0131.<\/p>\n

1. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00fckleme<\/h4>\n

\u00d6ncelikle Redux Beacon’\u0131n ana paketini ve Google Analytics i\u00e7in \u00f6zel hedef paketini y\u00fcklememiz gerekiyor:<\/p>\n

npm install --save redux-beacon @redux-beacon\/google-analytics\n
veya<\/h2>\nyarn add redux-beacon @redux-beacon\/google-analytics<\/code><\/pre>\n
2. Google Analytics \u0130zleme Kodunu Ekleme<\/h4>\n
Uygulaman\u0131z\u0131n public\/index.html<\/code> dosyas\u0131na Google Analytics izleme kodunu eklemeniz gerekir. Bu kod genellikle <\/code> etiketinin kapan\u0131\u015f\u0131ndan hemen \u00f6nce veya <\/code> etiketinin i\u00e7inde yer al\u0131r. GA4 i\u00e7in gtag.js<\/code> kullanman\u0131z\u0131 \u00f6neririm:<\/p>\n
\n\n\n\n    \n    \n    \n    \n    React App<\/title>\n    <!-- Google Analytics 4 (gtag.js) -->\n    <script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-YOUR_MEASUREMENT_ID\"><\/script>\n    <script>\n      window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', 'G-YOUR_MEASUREMENT_ID'); \/\/ GA4 \u00f6l\u00e7\u00fcm kimli\u011finiz\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><\/code><\/pre>\n<p><code>G-YOUR_MEASUREMENT_ID<\/code> yerine kendi GA4 \u00f6l\u00e7\u00fcm kimli\u011finizi veya Universal Analytics kullan\u0131yorsan\u0131z <code>UA-XXXXX-Y<\/code> kimli\u011finizi girin. <code>gtag('config', ...)<\/code> sat\u0131r\u0131, ilk sayfa g\u00f6r\u00fcnt\u00fclemesini otomatik olarak izler. Ancak SPA’larda rota de\u011fi\u015fimlerini manuel olarak izlememiz gerekecek.<\/p>\n<h4>3. Olay Haritas\u0131 Olu\u015fturma<\/h4>\n<p>Olay haritas\u0131, Redux eylem t\u00fcrlerini Google Analytics olaylar\u0131na d\u00f6n\u00fc\u015ft\u00fcren bir JavaScript nesnesidir. Bu haritay\u0131 genellikle <code>src\/analytics\/eventsMap.js<\/code> gibi ayr\u0131 bir dosyada tan\u0131mlar\u0131z.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/analytics\/eventsMap.js\nimport * as ActionTypes from '..\/store\/actionTypes'; \/\/ Redux eylem t\u00fcrlerinizin tan\u0131mland\u0131\u011f\u0131 yer\n\nconst eventsMap = {\n  \/\/ Sayfa G\u00f6r\u00fcnt\u00fclemeleri (\u00f6rne\u011fin, rota de\u011fi\u015fimlerinde)\n  [ActionTypes.ROUTE_CHANGED]: (action) => ({\n    hitType: 'pageview', \/\/ UA i\u00e7in\n    page: action.payload.pathname,\n    title: action.payload.title || 'Sayfa G\u00f6r\u00fcnt\u00fcleme',\n    \/\/ GA4 i\u00e7in:\n    \/\/ event_name: 'page_view',\n    \/\/ page_path: action.payload.pathname,\n    \/\/ page_title: action.payload.title || 'Sayfa G\u00f6r\u00fcnt\u00fcleme',\n  }),\n\n  \/\/ Kullan\u0131c\u0131 Giri\u015fi\n  [ActionTypes.USER_LOGIN_SUCCESS]: (action) => ({\n    hitType: 'event', \/\/ UA i\u00e7in\n    eventCategory: 'Kimlik Do\u011frulama',\n    eventAction: 'Giri\u015f Ba\u015far\u0131l\u0131',\n    eventLabel: action.payload.userId, \/\/ Kullan\u0131c\u0131 ID'sini etiket olarak g\u00f6nder\n    \/\/ GA4 i\u00e7in:\n    \/\/ event_name: 'login',\n    \/\/ method: 'email_password', \/\/ veya 'google', 'facebook' vb.\n    \/\/ user_id: action.payload.userId,\n  }),\n\n  \/\/ Bir d\u00fc\u011fmeye t\u0131klama\n  [ActionTypes.BUTTON_CLICKED]: (action) => ({\n    hitType: 'event', \/\/ UA i\u00e7in\n    eventCategory: action.payload.category,\n    eventAction: action.payload.action,\n    eventLabel: action.payload.label,\n    \/\/ GA4 i\u00e7in:\n    \/\/ event_name: 'button_click',\n    \/\/ button_category: action.payload.category,\n    \/\/ button_action: action.payload.action,\n    \/\/ button_label: action.payload.label,\n  }),\n\n  \/\/ Sepete \u00fcr\u00fcn ekleme\n  [ActionTypes.ADD_TO_CART]: (action) => ({\n    hitType: 'event', \/\/ UA i\u00e7in\n    eventCategory: 'E-ticaret',\n    eventAction: 'Sepete \u00dcr\u00fcn Eklendi',\n    eventLabel: action.payload.productName,\n    value: action.payload.price,\n    \/\/ GA4 i\u00e7in:\n    \/\/ event_name: 'add_to_cart',\n    \/\/ currency: 'TRY',\n    \/\/ value: action.payload.price,\n    \/\/ items: [{\n    \/\/   item_id: action.payload.productId,\n    \/\/   item_name: action.payload.productName,\n    \/\/   price: action.payload.price,\n    \/\/   quantity: action.payload.quantity,\n    \/\/ }]\n  }),\n\n  \/\/ ... di\u011fer eylem t\u00fcrleri ve kar\u015f\u0131l\u0131k gelen analitik olaylar\u0131\n};\n\nexport default eventsMap;<\/code><\/pre>\n<p><strong>\u00d6nemli Not:<\/strong> Yukar\u0131daki \u00f6rnekte hem Universal Analytics (<code>hitType<\/code>) hem de GA4 (<code>event_name<\/code> ve parametreler) i\u00e7in yorum sat\u0131rlar\u0131 ile \u00f6rnekler verilmi\u015ftir. Hangi Google Analytics s\u00fcr\u00fcm\u00fcn\u00fc kulland\u0131\u011f\u0131n\u0131za ba\u011fl\u0131 olarak uygun olan\u0131 se\u00e7melisiniz. GA4 i\u00e7in <code>gtag.js<\/code> kullan\u0131yorsan\u0131z <code>hitType: 'event'<\/code> yerine do\u011frudan <code>event_name<\/code> ve di\u011fer parametreleri kullanman\u0131z daha do\u011fru olacakt\u0131r. <code>@redux-beacon\/google-analytics<\/code> paketi, <code>gtag.js<\/code> veya <code>analytics.js<\/code> ile \u00e7al\u0131\u015fabilir. GA4 i\u00e7in <code>gtag.js<\/code> ile uyumlu bir yap\u0131 kurmak en iyisidir.<\/p>\n<h4>4. Redux Store ile Entegrasyon<\/h4>\n<p>\u015eimdi <code>createMiddleware<\/code> fonksiyonunu kullanarak Redux Beacon’\u0131 Redux store’umuza entegre edelim.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/store\/index.js\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\nimport { createMiddleware } from 'redux-beacon';\nimport { createGoogleAnalyticsTarget } from '@redux-beacon\/google-analytics';\nimport eventsMap from '..\/analytics\/eventsMap';\nimport rootReducer from '.\/reducers'; \/\/ K\u00f6k reducer'\u0131n\u0131z\n\n\/\/ Google Analytics hedefi olu\u015fturma\n\/\/ UA i\u00e7in:\n\/\/ const gaTarget = createGoogleAnalyticsTarget();\n\/\/ GA4 i\u00e7in (gtag.js kullan\u0131yorsan\u0131z):\nconst gaTarget = createGoogleAnalyticsTarget({\n  trackerName: 'gtag', \/\/ gtag.js kullan\u0131yorsan\u0131z bu \u00f6nemli\n  \/\/ E\u011fer Universal Analytics (analytics.js) kullan\u0131yorsan\u0131z bu parametreye gerek yok\n});\n\n\n\/\/ Redux Beacon middleware'ini olu\u015fturma\nconst beaconMiddleware = createMiddleware(eventsMap, {\n  ga: gaTarget, \/\/ 'ga' anahtar\u0131 ile Google Analytics hedefini ba\u011fla\n});\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(beaconMiddleware) \/\/ Beacon middleware'ini Redux'a ekle\n);\n\nexport default store;<\/code><\/pre>\n<p>Art\u0131k Redux Beacon, g\u00f6nderilen her eylemi dinleyecek ve <code>eventsMap<\/code> i\u00e7inde tan\u0131mlanan eylemler i\u00e7in Google Analytics’e ilgili olaylar\u0131 g\u00f6nderecektir.<\/p>\n<h4>5. Rota De\u011fi\u015fimlerini \u0130zleme (SPA’lar \u0130\u00e7in)<\/h4>\n<p>SPA’larda, <code>react-router-dom<\/code> gibi k\u00fct\u00fcphanelerle rota de\u011fi\u015fimleri otomatik olarak bir sayfa g\u00f6r\u00fcnt\u00fclemesi tetiklemez. Bu nedenle, her rota de\u011fi\u015fiminde manuel olarak bir <code>ROUTE_CHANGED<\/code> eylemi g\u00f6ndermemiz gerekir. Bunu yapmak i\u00e7in genellikle <code>history<\/code> nesnesini dinleriz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/App.js (veya ana bile\u015feniniz)\nimport React, { useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { useLocation } from 'react-router-dom'; \/\/ react-router-dom v5+\nimport * as ActionTypes from '.\/store\/actionTypes';\n\nfunction App() {\n  const dispatch = useDispatch();\n  const location = useLocation();\n\n  useEffect(() => {\n    \/\/ Rota de\u011fi\u015fti\u011finde bu effect \u00e7al\u0131\u015f\u0131r\n    dispatch({\n      type: ActionTypes.ROUTE_CHANGED,\n      payload: {\n        pathname: location.pathname,\n        title: document.title, \/\/ Mevcut sayfa ba\u015fl\u0131\u011f\u0131n\u0131 g\u00f6nder\n      },\n    });\n  }, [location, dispatch]); \/\/ location veya dispatch de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\n\n  return (\n    \/\/ ... uygulaman\u0131z\u0131n di\u011fer bile\u015fenleri\n  );\n}\n\nexport default App;<\/code><\/pre>\n<p>Bu kod par\u00e7as\u0131, <code>location<\/code> nesnesi her de\u011fi\u015fti\u011finde (yani rota de\u011fi\u015fti\u011finde) <code>ROUTE_CHANGED<\/code> eylemini g\u00f6nderir. Bu eylem, <code>eventsMap<\/code> i\u00e7inde tan\u0131mland\u0131\u011f\u0131 gibi bir sayfa g\u00f6r\u00fcnt\u00fclemesi olarak Google Analytics’e g\u00f6nderilir.<\/p>\n<h3>Detayl\u0131 Olay \u0130zleme<\/h3>\n<p>Redux Beacon’\u0131n g\u00fcc\u00fc, Redux eylemlerinizin y\u00fck\u00fcndeki (payload) verileri kullanarak zengin ve anlaml\u0131 analitik olaylar\u0131 olu\u015fturabilmesidir.<\/p>\n<h4>\u00d6zel Olaylar ve Eylem Y\u00fck\u00fcnden Veri Kullan\u0131m\u0131<\/h4>\n<p>Bir kullan\u0131c\u0131n\u0131n belirli bir \u00fcr\u00fcn\u00fc sepete ekledi\u011fini d\u00fc\u015f\u00fcnelim. <code>ADD_TO_CART<\/code> eylemi, \u00fcr\u00fcn\u00fcn ID’si, ad\u0131 ve fiyat\u0131 gibi bilgileri i\u00e7erebilir. Bu bilgileri analitik olay\u0131na dahil etmek, daha derinlemesine analizler yapman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/store\/actionTypes.js\nexport const ADD_TO_CART = 'ADD_TO_CART';\nexport const REMOVE_FROM_CART = 'REMOVE_FROM_CART';\nexport const PRODUCT_VIEWED = 'PRODUCT_VIEWED';\nexport const SEARCH_PERFORMED = 'SEARCH_PERFORMED';\n\/\/ ... di\u011fer eylem t\u00fcrleri<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ src\/analytics\/eventsMap.js (devam\u0131)\nimport * as ActionTypes from '..\/store\/actionTypes';\n\nconst eventsMap = {\n  \/\/ ... di\u011fer olaylar\n\n  [ActionTypes.PRODUCT_VIEWED]: (action) => ({\n    event_name: 'view_item', \/\/ GA4 i\u00e7in\n    currency: 'TRY',\n    value: action.payload.price,\n    items: [{\n      item_id: action.payload.productId,\n      item_name: action.payload.productName,\n      item_category: action.payload.category,\n      price: action.payload.price,\n    }],\n    \/\/ UA i\u00e7in:\n    \/\/ hitType: 'event',\n    \/\/ eventCategory: 'E-ticaret',\n    \/\/ eventAction: '\u00dcr\u00fcn G\u00f6r\u00fcnt\u00fclendi',\n    \/\/ eventLabel: action.payload.productName,\n    \/\/ value: action.payload.price,\n  }),\n\n  [ActionTypes.ADD_TO_CART]: (action) => ({\n    event_name: 'add_to_cart', \/\/ GA4 i\u00e7in\n    currency: 'TRY',\n    value: action.payload.price * action.payload.quantity,\n    items: [{\n      item_id: action.payload.productId,\n      item_name: action.payload.productName,\n      price: action.payload.price,\n      quantity: action.payload.quantity,\n    }],\n    \/\/ UA i\u00e7in:\n    \/\/ hitType: 'event',\n    \/\/ eventCategory: 'E-ticaret',\n    \/\/ eventAction: 'Sepete \u00dcr\u00fcn Eklendi',\n    \/\/ eventLabel: action.payload.productName,\n    \/\/ value: action.payload.price * action.payload.quantity,\n  }),\n\n  [ActionTypes.REMOVE_FROM_CART]: (action) => ({\n    event_name: 'remove_from_cart', \/\/ GA4 i\u00e7in\n    currency: 'TRY',\n    value: action.payload.price * action.payload.quantity,\n    items: [{\n      item_id: action.payload.productId,\n      item_name: action.payload.productName,\n      price: action.payload.price,\n      quantity: action.payload.quantity,\n    }],\n    \/\/ UA i\u00e7in:\n    \/\/ hitType: 'event',\n    \/\/ eventCategory: 'E-ticaret',\n    \/\/ eventAction: 'Sepetten \u00dcr\u00fcn \u00c7\u0131kar\u0131ld\u0131',\n    \/\/ eventLabel: action.payload.productName,\n    \/\/ value: action.payload.price * action.payload.quantity,\n  }),\n\n  [ActionTypes.SEARCH_PERFORMED]: (action) => ({\n    event_name: 'search', \/\/ GA4 i\u00e7in\n    search_term: action.payload.query,\n    \/\/ UA i\u00e7in:\n    \/\/ hitType: 'event',\n    \/\/ eventCategory: 'Arama',\n    \/\/ eventAction: 'Arama Yap\u0131ld\u0131',\n    \/\/ eventLabel: action.payload.query,\n  }),\n};\n\nexport default eventsMap;<\/code><\/pre>\n<p>Bu \u00f6rnekler, Redux eylemlerinizin <code>payload<\/code>‘undan al\u0131nan verileri do\u011frudan analitik olaylar\u0131na nas\u0131l entegre edebilece\u011finizi g\u00f6stermektedir. Bu sayede, “hangi \u00fcr\u00fcnlerin sepete en \u00e7ok eklendi\u011fi” veya “hangi arama terimlerinin kullan\u0131ld\u0131\u011f\u0131” gibi spesifik sorulara yan\u0131t bulabilirsiniz.<\/p>\n<h3>Geli\u015fmi\u015f Konular ve En \u0130yi Uygulamalar<\/h3>\n<h4>Birden Fazla Analitik Hedefi<\/h4>\n<p>Redux Beacon, ayn\u0131 anda birden fazla analitik platformuna veri g\u00f6ndermenize olanak tan\u0131r. \u00d6rne\u011fin, hem Google Analytics hem de Facebook Pixel kullan\u0131yorsan\u0131z:<\/p>\n<pre><code class=\"language-bash\">npm install --save @redux-beacon\/facebook-pixel\n<h2>veya<\/h2>\nyarn add @redux-beacon\/facebook-pixel<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ src\/store\/index.js (g\u00fcncellenmi\u015f)\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\nimport { createMiddleware } from 'redux-beacon';\nimport { createGoogleAnalyticsTarget } from '@redux-beacon\/google-analytics';\nimport { createFacebookPixelTarget } from '@redux-beacon\/facebook-pixel'; \/\/ Yeni hedef\nimport eventsMap from '..\/analytics\/eventsMap';\nimport rootReducer from '.\/reducers';\n\nconst gaTarget = createGoogleAnalyticsTarget({ trackerName: 'gtag' });\nconst fbTarget = createFacebookPixelTarget(); \/\/ Facebook Pixel hedefi\n\nconst beaconMiddleware = createMiddleware(eventsMap, {\n  ga: gaTarget,\n  fb: fbTarget, \/\/ Facebook Pixel hedefini ekle\n});\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(beaconMiddleware)\n);\n\nexport default store;<\/code><\/pre>\n<p><code>eventsMap<\/code> i\u00e7inde, her eylem i\u00e7in hangi hedeflere g\u00f6nderilece\u011fini belirtebilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/analytics\/eventsMap.js (g\u00fcncellenmi\u015f)\nconst eventsMap = {\n  [ActionTypes.ADD_TO_CART]: (action) => ([ \/\/ Bir dizi d\u00f6nd\u00fcrerek birden fazla hedefi belirt\n    {\n      target: 'ga', \/\/ Google Analytics'e g\u00f6nder\n      event_name: 'add_to_cart',\n      currency: 'TRY',\n      value: action.payload.price * action.payload.quantity,\n      items: [{\n        item_id: action.payload.productId,\n        item_name: action.payload.productName,\n        price: action.payload.price,\n        quantity: action.payload.quantity,\n      }],\n    },\n    {\n      target: 'fb', \/\/ Facebook Pixel'e g\u00f6nder\n      eventName: 'AddToCart',\n      properties: {\n        content_ids: [action.payload.productId],\n        content_name: action.payload.productName,\n        currency: 'TRY',\n        value: action.payload.price * action.payload.quantity,\n      },\n    },\n  ]),\n  \/\/ ... di\u011fer olaylar\n};<\/code><\/pre>\n<p>Bu sayede, ayn\u0131 Redux eyleminden farkl\u0131 analitik platformlar\u0131na uygun formatlarda veri g\u00f6nderebilirsiniz.<\/p>\n<h4>Ko\u015fullu Olaylar<\/h4>\n<p>Bazen bir analitik olay\u0131n\u0131 yaln\u0131zca belirli ko\u015fullar alt\u0131nda g\u00f6ndermek isteyebilirsiniz (\u00f6rn. kullan\u0131c\u0131 giri\u015f yapm\u0131\u015fsa). Bunu, callback fonksiyonu i\u00e7inde basit bir <code>if<\/code> kontrol\u00fc ile yapabilirsiniz. E\u011fer bir olay g\u00f6nderilmesini istemiyorsan\u0131z, callback’ten <code>null<\/code> veya <code>undefined<\/code> d\u00f6nd\u00fcrmeniz yeterlidir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/analytics\/eventsMap.js\nconst eventsMap = {\n  [ActionTypes.USER_PROFILE_UPDATED]: (action, prevState, nextState) => {\n    \/\/ Sadece kullan\u0131c\u0131 giri\u015f yapm\u0131\u015fsa olay\u0131 g\u00f6nder\n    if (nextState.auth.isLoggedIn) {\n      return {\n        event_name: 'user_profile_updated',\n        user_id: nextState.auth.userId,\n        \/\/ ... di\u011fer parametreler\n      };\n    }\n    return null; \/\/ Olay\u0131 g\u00f6nderme\n  },\n  \/\/ ...\n};<\/code><\/pre>\n<p><code>eventsMap<\/code> callback fonksiyonlar\u0131, <code>action<\/code>, <code>prevState<\/code> ve <code>nextState<\/code> parametrelerini alabilir. Bu, durumdaki de\u011fi\u015fikliklere g\u00f6re ko\u015fullu olaylar olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<h4>Hata Yakalama<\/h4>\n<p>Analitik \u00e7a\u011fr\u0131lar\u0131 s\u0131ras\u0131nda olu\u015fabilecek hatalar\u0131 y\u00f6netmek \u00f6nemlidir. Redux Beacon, <code>onError<\/code> se\u00e7ene\u011fi sunar:<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/store\/index.js\nconst beaconMiddleware = createMiddleware(eventsMap, {\n  ga: gaTarget,\n  onError: (error) => {\n    console.error('Redux Beacon hatas\u0131:', error);\n    \/\/ Hatalar\u0131 bir hata izleme servisine (Sentry, Bugsnag) g\u00f6nderebilirsiniz\n  },\n});<\/code><\/pre>\n<h4>Geli\u015ftirme Ortam\u0131nda \u0130zlemeyi Devre D\u0131\u015f\u0131 B\u0131rakma<\/h4>\n<p>Geli\u015ftirme ortam\u0131nda analitik verileri kirletmek istemezsiniz. Bunu \u00f6nlemek i\u00e7in ortam de\u011fi\u015fkenlerini kullanabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/store\/index.js\nconst gaTarget = createGoogleAnalyticsTarget({ trackerName: 'gtag' });\n\n\/\/ Sadece \u00fcretim ortam\u0131nda analitik olaylar\u0131n\u0131 g\u00f6nder\nconst beaconMiddleware = createMiddleware(eventsMap, {\n  ga: gaTarget,\n  \/\/ Ortam de\u011fi\u015fkenini kontrol et\n  \/\/ process.env.NODE_ENV === 'production'\n  \/\/ veya \u00f6zel bir de\u011fi\u015fken: process.env.REACT_APP_ENABLE_ANALYTICS\n  disabled: process.env.NODE_ENV !== 'production',\n});<\/code><\/pre>\n<h4>Test Edilebilirlik<\/h4>\n<p>Redux Beacon, analitik kodunuzu daha test edilebilir hale getirir. <code>eventsMap<\/code>‘iniz saf fonksiyonlardan olu\u015ftu\u011fu i\u00e7in kolayca test edilebilir. Hedefleri (\u00f6rne\u011fin <code>gaTarget<\/code>) mock’layarak, eylemlerin do\u011fru analitik olaylar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcp d\u00f6n\u00fc\u015ft\u00fcr\u00fclmedi\u011fini ve do\u011fru hedeflere g\u00f6nderilip g\u00f6nderilmedi\u011fini kontrol edebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek bir test senaryosu (Jest ile)\nimport { createMiddleware } from 'redux-beacon';\nimport eventsMap from '..\/analytics\/eventsMap';\nimport * as ActionTypes from '..\/..\/store\/actionTypes';\n\ndescribe('Redux Beacon Analytics Middleware', () => {\n  let mockGaTarget;\n  let store;\n  let next;\n  let invoke;\n\n  beforeEach(() => {\n    mockGaTarget = jest.fn(); \/\/ Mock Google Analytics hedefi\n    const beaconMiddleware = createMiddleware(eventsMap, { ga: mockGaTarget });\n\n    \/\/ Middleware'i bir Redux store ba\u011flam\u0131nda taklit et\n    store = {\n      getState: () => ({ auth: { isLoggedIn: true } }), \/\/ \u00d6rnek durum\n    };\n    next = jest.fn();\n    invoke = (action) => beaconMiddleware(store)(next)(action);\n  });\n\n  it('should dispatch ROUTE_CHANGED event to GA', () => {\n    const action = { type: ActionTypes.ROUTE_CHANGED, payload: { pathname: '\/test', title: 'Test Sayfas\u0131' } };\n    invoke(action);\n\n    expect(next).toHaveBeenCalledWith(action); \/\/ Eylemin bir sonraki middleware'e iletildi\u011finden emin ol\n    expect(mockGaTarget).toHaveBeenCalledTimes(1);\n    expect(mockGaTarget).toHaveBeenCalledWith({\n      event_name: 'page_view',\n      page_path: '\/test',\n      page_title: 'Test Sayfas\u0131',\n    });\n  });\n\n  it('should not dispatch event if action type is not in map', () => {\n    const action = { type: 'UNKNOWN_ACTION' };\n    invoke(action);\n\n    expect(next).toHaveBeenCalledWith(action);\n    expect(mockGaTarget).not.toHaveBeenCalled();\n  });\n});<\/code><\/pre>\n<h4>Performans \u0130pu\u00e7lar\u0131<\/h4>\n<p>Analitik \u00e7a\u011fr\u0131lar\u0131 genellikle a\u011f istekleri i\u00e7erir ve uygulaman\u0131z\u0131n performans\u0131n\u0131 etkilememelidir. Redux Beacon bu konuda zaten asenkron bir yap\u0131ya sahiptir. Ancak, <code>eventsMap<\/code> i\u00e7indeki callback fonksiyonlar\u0131n\u0131z\u0131n karma\u015f\u0131k hesaplamalar yapmad\u0131\u011f\u0131ndan emin olun. H\u0131zl\u0131 ve verimli olmal\u0131d\u0131rlar.<\/p>\n<h4>Veri Gizlili\u011fi ve GDPR\/KVKK<\/h4>\n<p>Kullan\u0131c\u0131 verilerini toplarken veri gizlili\u011fi d\u00fczenlemelerine (GDPR, KVKK vb.) uymak zorunludur.<\/p>\n<p>*   <strong>Kullan\u0131c\u0131 Onay\u0131:<\/strong> \u00c7o\u011fu durumda, kullan\u0131c\u0131lar\u0131n \u00e7erezler ve izleme i\u00e7in a\u00e7\u0131k\u00e7a onay vermesi gerekir. Uygulaman\u0131zda bir \u00e7erez izin banner’\u0131 veya mekanizmas\u0131 bulundurun.<br \/>\n*   <strong>Anonimle\u015ftirme:<\/strong> IP adreslerini anonimle\u015ftirin. Google Analytics bunu otomatik olarak yapabilir veya <code>gtag('config', 'G-XXXXX', { 'anonymize_ip': true });<\/code> gibi ayarlarla manuel olarak etkinle\u015ftirebilirsiniz.<br \/>\n*   <strong>Hassas Veri Yok:<\/strong> Asla ki\u015fisel olarak tan\u0131mlay\u0131c\u0131 bilgileri (PII) Google Analytics’e g\u00f6ndermeyin (\u00f6rn. ad, e-posta, TC kimlik numaras\u0131).<\/p>\n<h3>Universal Analytics (UA) ve Google Analytics 4 (GA4) Kar\u015f\u0131la\u015ft\u0131rmas\u0131 ve Redux Beacon ile Uyumu<\/h3>\n<p>Google Analytics’in en son s\u00fcr\u00fcm\u00fc olan GA4, veri toplama ve raporlama yakla\u015f\u0131m\u0131nda \u00f6nemli de\u011fi\u015fiklikler getirmi\u015ftir.<\/p>\n<p>*   <strong>Universal Analytics (UA):<\/strong> Oturum tabanl\u0131 bir model kullan\u0131r. Sayfa g\u00f6r\u00fcnt\u00fclemeleri ve \u00f6zel olaylar gibi farkl\u0131 “isabet t\u00fcrleri” (hit types) vard\u0131r.<br \/>\n*   <strong>Google Analytics 4 (GA4):<\/strong> Tamamen olay tabanl\u0131 bir model kullan\u0131r. Her \u015fey bir olayd\u0131r; sayfa g\u00f6r\u00fcnt\u00fclemeleri bile <code>page_view<\/code> olay\u0131 olarak kaydedilir. Bu, farkl\u0131 platformlardan (web, mobil uygulama) gelen verileri birle\u015ftirmeyi ve kullan\u0131c\u0131 yolculu\u011funu daha iyi anlamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<p>Redux Beacon’\u0131n olay odakl\u0131 yap\u0131s\u0131, GA4’\u00fcn felsefesiyle m\u00fckemmel bir uyum i\u00e7indedir. Redux eylemleri, uygulaman\u0131zda ger\u00e7ekle\u015fen olaylar\u0131 do\u011fal olarak temsil eder. Bu nedenle, Redux Beacon ile GA4 entegrasyonu olduk\u00e7a sezgiseldir.<\/p>\n<p><code>@redux-beacon\/google-analytics<\/code> paketi, <code>gtag.js<\/code> veya <code>analytics.js<\/code> k\u00fct\u00fcphaneleri arac\u0131l\u0131\u011f\u0131yla Google Analytics API’siyle etkile\u015fime girer. GA4 kullan\u0131yorsan\u0131z, <code>gtag.js<\/code> kullanmak ve olaylar\u0131 GA4’\u00fcn bekledi\u011fi formatta (event_name ve parametreler) g\u00f6ndermek en iyi yakla\u015f\u0131md\u0131r. Redux Beacon’daki callback fonksiyonlar\u0131n\u0131zda bu format\u0131 olu\u015fturarak hem UA hem de GA4 ile \u00e7al\u0131\u015fabilirsiniz.<\/p>\n<p><strong>GA4 Odakl\u0131 Olay Haritas\u0131 \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/analytics\/eventsMap.js (GA4 odakl\u0131)\nimport * as ActionTypes from '..\/store\/actionTypes';\n\nconst eventsMap = {\n  [ActionTypes.ROUTE_CHANGED]: (action) => ({\n    event_name: 'page_view',\n    page_path: action.payload.pathname,\n    page_title: action.payload.title || 'Sayfa G\u00f6r\u00fcnt\u00fcleme',\n    \/\/ Di\u011fer GA4 parametreleri eklenebilir\n  }),\n\n  [ActionTypes.USER_LOGIN_SUCCESS]: (action) => ({\n    event_name: 'login',\n    method: 'email_password', \/\/ veya 'google', 'facebook'\n    user_id: action.payload.userId,\n  }),\n\n  [ActionTypes.ADD_TO_CART]: (action) => ({\n    event_name: 'add_to_cart',\n    currency: 'TRY',\n    value: action.payload.price * action.payload.quantity,\n    items: [{\n      item_id: action.payload.productId,\n      item_name: action.payload.productName,\n      price: action.payload.price,\n      quantity: action.payload.quantity,\n    }],\n  }),\n  \/\/ ...\n};\n\nexport default eventsMap;<\/code><\/pre>\n<p>GA4 ile entegrasyon yaparken, <code>createGoogleAnalyticsTarget<\/code> fonksiyonuna <code>trackerName: 'gtag'<\/code> se\u00e7ene\u011fini ge\u00e7irmek, Redux Beacon’\u0131n <code>gtag.js<\/code> komutlar\u0131n\u0131 do\u011fru \u015fekilde kullanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>\u00d6rnek Senaryo: E-ticaret Uygulamas\u0131<\/h3>\n<p>Bir e-ticaret uygulamas\u0131nda Redux Beacon’\u0131n nas\u0131l kullan\u0131labilece\u011fine dair kapsaml\u0131 bir senaryo olu\u015ftural\u0131m:<\/p>\n<p><strong>Redux Action Types:<\/strong><\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/store\/actionTypes.js\nexport const FETCH_PRODUCTS_SUCCESS = 'FETCH_PRODUCTS_SUCCESS';\nexport const VIEW_PRODUCT_DETAIL = 'VIEW_PRODUCT_DETAIL';\nexport const ADD_TO_CART = 'ADD_TO_CART';\nexport const REMOVE_FROM_CART = 'REMOVE_FROM_CART';\nexport const START_CHECKOUT = 'START_CHECKOUT';\nexport const COMPLETE_PURCHASE = 'COMPLETE_PURCHASE';\nexport const APPLY_FILTER = 'APPLY_FILTER';\nexport const SEARCH_PRODUCTS = 'SEARCH_PRODUCTS';\nexport const ROUTE_CHANGED = 'ROUTE_CHANGED';<\/code><\/pre>\n<p><strong>Events Map (GA4 Odakl\u0131):<\/strong><\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/analytics\/eventsMap.js\nimport * as ActionTypes from '..\/store\/actionTypes';\n\nconst eventsMap = {\n  [ActionTypes.ROUTE_CHANGED]: (action) => ({\n    event_name: 'page_view',\n    page_path: action.payload.pathname,\n    page_title: action.payload.title || 'Sayfa G\u00f6r\u00fcnt\u00fcleme',\n  }),\n\n  [ActionTypes.FETCH_PRODUCTS_SUCCESS]: (action) => ({\n    event_name: 'view_item_list',\n    item_list_name: action.payload.category || 'T\u00fcm \u00dcr\u00fcnler',\n    items: action.payload.products.map(p => ({\n      item_id: p.id,\n      item_name: p.name,\n      item_category: p.category,\n      price: p.price,\n    })),\n  }),\n\n  [ActionTypes.VIEW_PRODUCT_DETAIL]: (action) => ({\n    event_name: 'view_item',\n    currency: 'TRY',\n    value: action.payload.product.price,\n    items: [{\n      item_id: action.payload.product.id,\n      item_name: action.payload.product.name,\n      item_category: action.payload.product.category,\n      price: action.payload.product.price,\n    }],\n  }),\n\n  [ActionTypes.ADD_TO_CART]: (action) => ({\n    event_name: 'add_to_cart',\n    currency: 'TRY',\n    value: action.payload.product.price * action.payload.quantity,\n    items: [{\n      item_id: action.payload.product.id,\n      item_name: action.payload.product.name,\n      price: action.payload.product.price,\n      quantity: action.payload.quantity,\n    }],\n  }),\n\n  [ActionTypes.REMOVE_FROM_CART]: (action) => ({\n    event_name: 'remove_from_cart',\n    currency: 'TRY',\n    value: action.payload.product.price * action.payload.quantity,\n    items: [{\n      item_id: action.payload.product.id,\n      item_name: action.payload.product.name,\n      price: action.payload.product.price,\n      quantity: action.payload.quantity,\n    }],\n  }),\n\n  [ActionTypes.START_CHECKOUT]: (action) => ({\n    event_name: 'begin_checkout',\n    currency: 'TRY',\n    value: action.payload.totalPrice,\n    items: action.payload.cartItems.map(item => ({\n      item_id: item.product.id,\n      item_name: item.product.name,\n      price: item.product.price,\n      quantity: item.quantity,\n    })),\n  }),\n\n  [ActionTypes.COMPLETE_PURCHASE]: (action) => ({\n    event_name: 'purchase',\n    transaction_id: action.payload.orderId,\n    affiliation: 'Online Store',\n    currency: 'TRY',\n    value: action.payload.totalPrice,\n    tax: action.payload.taxAmount,\n    shipping: action.payload.shippingCost,\n    items: action.payload.purchasedItems.map(item => ({\n      item_id: item.product.id,\n      item_name: item.product.name,\n      price: item.product.price,\n      quantity: item.quantity,\n    })),\n  }),\n\n  [ActionTypes.APPLY_FILTER]: (action) => ({\n    event_name: 'filter_applied',\n    filter_category: action.payload.filterCategory,\n    filter_value: action.payload.filterValue,\n  }),\n\n  [ActionTypes.SEARCH_PRODUCTS]: (action) => ({\n    event_name: 'search',\n    search_term: action.payload.query,\n  }),\n};\n\nexport default eventsMap;<\/code><\/pre>\n<p>Bu \u00f6rnek senaryo, bir kullan\u0131c\u0131n\u0131n \u00fcr\u00fcn listeleme, \u00fcr\u00fcn detay g\u00f6r\u00fcnt\u00fcleme, sepete ekleme\/\u00e7\u0131karma, \u00f6deme s\u00fcrecini ba\u015flatma ve sat\u0131n alma i\u015flemlerini Redux eylemleri arac\u0131l\u0131\u011f\u0131yla nas\u0131l izleyebilece\u011finizi g\u00f6stermektedir. Her bir eylem, GA4’\u00fcn bekledi\u011fi zenginle\u015ftirilmi\u015f veri yap\u0131s\u0131na uygun bir olay olarak d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. Bu sayede, e-ticaret d\u00f6n\u00fc\u015f\u00fcm huninizin her ad\u0131m\u0131n\u0131 detayl\u0131 bir \u015fekilde analiz edebilirsiniz.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React\/Redux uygulamalar\u0131nda Google Analytics entegrasyonu, uygulaman\u0131z\u0131n dinamik do\u011fas\u0131 nedeniyle belirli zorluklar i\u00e7erir. Ancak Redux Beacon, bu zorluklar\u0131 a\u015fmak i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve temiz bir \u00e7\u00f6z\u00fcm sunar. Redux Beacon’\u0131 kullanarak, analitik mant\u0131\u011f\u0131n\u0131z\u0131 uygulaman\u0131z\u0131n i\u015f mant\u0131\u011f\u0131ndan ay\u0131rabilir, merkezi bir olay haritas\u0131 olu\u015fturabilir ve Redux eylemlerinizi anlaml\u0131 analitik olaylar\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\n<p>Bu makalede ele ald\u0131\u011f\u0131m\u0131z ad\u0131mlar\u0131 izleyerek, uygulaman\u0131zda g\u00fcvenilir ve kapsaml\u0131 bir analitik altyap\u0131s\u0131 kurabilirsiniz. Temel kurulumdan geli\u015fmi\u015f olay izlemeye, birden fazla analitik hedefi kullanmaya ve veri gizlili\u011fi hususlar\u0131na kadar Redux Beacon, veri odakl\u0131 kararlar alman\u0131za yard\u0131mc\u0131 olacak de\u011ferli i\u00e7g\u00f6r\u00fcler toplaman\u0131z\u0131 sa\u011flayacakt\u0131r. Unutmay\u0131n, iyi bir analitik entegrasyonu, sadece verileri toplamakla kalmaz, ayn\u0131 zamanda bu verileri yorumlayarak uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in stratejik ad\u0131mlar atman\u0131z\u0131 sa\u011flar.<\/p>\n","protected":false},"excerpt":{"rendered":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme\nGiri\u015f\nModern web uygulamalar\u0131, \u00f6zellikle React ve Redux","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-30755","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\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme - 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-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme\" \/>\n<meta property=\"og:description\" content=\"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme Giri\u015f Modern web uygulamalar\u0131, \u00f6zellikle React ve Redux\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-01T13:42:04+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=\"22 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme\",\"datePublished\":\"2025-10-01T13:42:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\"},\"wordCount\":2646,\"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-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\",\"name\":\"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-01T13:42:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme\"}]},{\"@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\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme - 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-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/","og_locale":"tr_TR","og_type":"article","og_title":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme","og_description":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme Giri\u015f Modern web uygulamalar\u0131, \u00f6zellikle React ve Redux","og_url":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-01T13:42:04+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"22 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme","datePublished":"2025-10-01T13:42:04+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/"},"wordCount":2646,"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-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/","url":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/","name":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-01T13:42:04+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-redux-uygulamalarinda-google-analytics-entegrasyonu-redux-beacon-ile-kolay-izleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React\/Redux Uygulamalar\u0131nda Google Analytics Entegrasyonu: Redux Beacon ile Kolay \u0130zleme"}]},{"@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\/30755","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=30755"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30755\/revisions"}],"predecessor-version":[{"id":30756,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30755\/revisions\/30756"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}