React ve Google Analytics: GA4 React'a Nasıl Entegre Edilir?

React ve Google Analytics’in web analist topluluğu arasında en popüler araçlardan ve kütüphanelerden biri olduğu inkâr edilemez bir gerçektir. Google Analytics, kullanıcılarınızı kolayca takip etmenizi ve yeniden hedeflemenizi sağlayan en yaygın kullanılan web analiz aracıdır.

Google Analytics 4 (GA4), web ve mobil uygulamanızı bir araya getirerek kişiselleştirilmiş raporlar ve yapay zekâ destekli analizler gibi daha kapsamlı ölçüm yöntemleri sunar. Dahası, Universal Analytics (UA)’a kıyasla dijital pazarlama stratejileriniz hakkında daha iyi içgörüler sağlar.

Hızlı ve basit olmasıyla bilinen React, web geliştirme alanında en popüler front-end JavaScript kütüphanesidir. React tabanlı web sitenizde Google Analytics kullanmanın size sağlayacağı faydalar şunlardır:

• Kullanıcılarınızın hangi ülkeden trafik getirdiğini ve hangi demografik özelliklere sahip olduğunu öğrenebilirsiniz.


• Kullanıcılarınızın hangi sayfalarda ne kadar zaman geçirdiğini görebilirsiniz.


• Gelişmiş E-ticaret ve özel etkinlikleri ölçebilirsiniz.


• React uygulamanızdaki hataları raporlayabilirsiniz.


• Uygulamanızda A/B testleri için kullanıcı davranışını ölçebilirsiniz.

Google Analytics 4 hesabınız ve React tabanlı bir web siteniz olduğunu varsayarsak, adım adım sağlıklı bir React Google Analytics kurulumu nasıl yapılır görelim.

Öncelikle mevcut Universal Analytics hesabınız içinde bir GA4 mülkü oluşturmanız gerekir. Bunun için GA4 Property Setup Assistant’ı kullanabilirsiniz. Başlat’a tıklayın, önceden herhangi bir yapılandırmaya gerek kalmadan anında kurulacaktır.

Connected Property bölümünden GA4 kurulumunun başarılı olduğunu görebilirsiniz.

Google Analytics 4 Ölçüm Kimliği

İşimizin yarısı bitti. Artık React tabanlı web sitemize GA4 kurulumunu tamamlayabilmemiz için en önemli parça olan, G- ile başlayan GA4 Ölçüm Kimliğini aldık.

React Google Analytics Entegrasyonu

Dijital pazarlama dünyasında React ekosisteminde genellikle sayfa yönetimi, eklenti desteği, CMS, site hızı ve SEO uyumluluğu gibi konular için Gatsby ve NextJS gibi Statik Site Üreticileri (SSG) kullanılır.

Şimdi olası entegrasyon yöntemlerine bakalım.

Gtag Script Ekleme

Öncelikle uygulamanıza react-ga paketini kurmanız gerekir.

yarn add react-ga

Daha sonra react-ga paketini index.js veya app.js dosyanıza eklemeniz gerekir.

import ReactGA from 'react-ga';
const TRACKING_ID = "UA-12341234-1"; // YOUR_OWN_TRACKING_ID
ReactGA.initialize(TRACKING_ID);

React uygulamalarında en sık karşılaşılan sorunlardan biri render yöntemlerinde ortaya çıkar, özellikle CSR (Client Side Rendering) ve SSR (Server Side Rendering). Render yöntemleri hakkında detaylı bilgiye buradan ulaşabilirsiniz.

SPA (Single Page Application) uygulamalarınızda, bu render sorunlarını önlemek için react-router-dom kullanarak history.listen ile etkinliklerinizi göndermeniz gerekir.

import React from 'react'
import { withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
const RouteChangeTracker = ({ history }) => {
   history.listen((location, action) => {
       ReactGA.set({ page: location.pathname });
       ReactGA.pageview(location.pathname);
   });
   return 
;
};


export default withRouter(RouteChangeTracker);

Gatsby GTAG Eklentisi

Eğer web sitenizde Gatsby motorunu kullanıyorsanız, gatsby-plugin-google-gtag eklemeniz tavsiye edilir.

Öncelikle gatsby-plugin-google-gtag eklentisini kurmanız gerekir.

yarn add gatsby-plugin-google-gtag

Daha sonra gatsby-config.js dosyanızı şu şekilde güncellemelisiniz:

Gördüğünüz gibi farklı framework’lere göre farklı Google Analytics 4 entegrasyon yöntemleri bulunmaktadır.

Ancak, hangi React framework’ünü kullanıyor olursanız olun, öncelikle Google Analytics’in herhangi bir web uygulamasından verileri nasıl çektiğini anlamanız gerekir. Bu, web sitenizde olası ölçüm ve entegrasyon hatalarını önleyecektir.

Google Analytics 4’ün Gtag script üzerinden nasıl çalıştığına dair kaynağa buradan ulaşabilirsiniz.