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

React ve Google Analytics, web analistleri topluluğu arasında en popüler araç ve kütüphanelerden biri olduğu inkar edilemez bir gerçektir. Google Analytics, kullanıcılarınızı kolayca izleyip yeniden hedeflemenize yardımcı olan en yaygın kullanılan web analiz aracıdır.

Google Analytics 4 (GA4), web ve mobil uygulamanızı bir araya getirerek özelleştirilmiş raporlar ve akıllı analizler gibi daha kapsamlı ölçüm yöntemleri sunar. Ayrıca Universal Analytics (UA)'a kıyasla dijital pazarlama stratejilerinize dair daha iyi içgörüler sağlar.

React, hızlı ve basit olmasıyla tanınan, web geliştirme alanındaki en popüler ön yüz JavaScript kütüphanesidir. React tabanlı web sitenizde Google Analytics kullanmak şu faydaları sunar:

• Kullanıcı trafiğinizin hangi ülkeden geldiğini ve demografik bilgilerini öğrenebilirsiniz.
• Kullanıcılarınızın hangi sayfalarda ne kadar süre harcadığını görebilirsiniz.
• Gelişmiş E-Ticaret ve özelleştirilmiş etkinlikleri ölçebilirsiniz.
• React uygulamanızdaki hataları raporlayabilirsiniz.
• Uygulamanızda A/B testleri için kullanıcı davranışlarını ölçebilirsiniz.

Bir Google Analytics 4 hesabınız ve React tabanlı bir siteniz olduğunu varsayarsak, sağlıklı bir React–Google Analytics entegrasyonunu adım adım nasıl kurabileceğinizi görelim.

Öncelikle mevcut Universal Analytics hesabınız içinde bir GA4 mülkü oluşturmanız gerekir. Bunun için GA4 Mülk Kurulum Asistanını kullanabilirsiniz. “Başlat”a tıklayın; herhangi bir ön yapılandırma olmadan anında kurulum gerçekleşir.

Bağlı Mülk bölümünde GA4 kurulumunun başarılı olduğunu görebilirsiniz:

Google Analytics 4 Ölçüm Kimliği (Measurement ID)

İşin yarısı tamamlandı. Artık G- ile başlayan GA4 Ölçüm Kimliğinizi alarak React tabanlı sitenize GA4 entegrasyonunu tamamlayabilirsiniz.

React–Google Analytics Entegrasyonu

React ekosisteminde, sayfa yönetimi, eklenti desteği, CMS, site hızı ve SEO uyumluluğu için genellikle Gatsby ve Next.js gibi Statik Site Oluşturucular (SSG) kullanılır.

Şimdi olası entegrasyon yöntemlerine geçelim.

Gtag betiğini eklemek

Önce uygulamanıza react-ga paketini yükleyin:

yarn add react-ga

Sonra index.js veya app.js içine:

import ReactGA from 'react-ga';
const TRACKING_ID = "G-XXXXXXXXXX"; // Kendi Ölçüm Kimliğiniz
ReactGA.initialize(TRACKING_ID);

SPA’larda CSR ve SSR’den kaynaklanan sayfa görüntüleme sorunlarını önlemek için react-router-dom’daki history.listen ile her rota değişiminde şu kodu çalıştırın:

import React from 'react';
import { withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';

const RouteChangeTracker = ({ history }) => {
  history.listen((location) => {
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname);
  });
  return null;
};

export default withRouter(RouteChangeTracker);

Gatsby için gatsby-plugin-google-gtag

Gatsby kullanıyorsanız gatsby-plugin-google-gtag eklentisini tercih edebilirsiniz:

yarn add gatsby-plugin-google-gtag

Ardından gatsby-config.js’e:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ["G-XXXXXXXXXX"],
        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0,
        },
        pluginConfig: {
          head: false,
          respectDNT: true,
        },
      },
    },
  ],
};

SSR nedeniyle özel etkinlikleri şöyle tetikleyebilirsiniz:

typeof window !== "undefined" && window.gtag("event", "click", { /* ... */ });

Next.js’te GTAG betiği ekleme

.env.local dosyanıza:

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXXXX

Sonra _document.js içinde:

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      
        
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          
          

Özel etkinlikler için bir yardımcı fonksiyon:

export function trackEvent({ action, params }) {
  window.gtag('event', action, params);
}

Doğrulama ve Test

• GA4 DebugView veya Gerçek Zamanlı raporlarında sayfa görüntülemeleriyle etkinliklerin gelmesini kontrol edin.
• Her rota değişiminde, her etkinlik çağrısında verinin GA4’e ulaştığından emin olun.

Tüm React çerçevelerinde temelde aynı gtag.js çalışma mantığı geçerlidir. Kurulumdan önce Google Analytics’in web uygulamanızdan veriyi nasıl çektiğini anlamak; entegrasyon ve ölçüm hatalarını önlemede kilit rol oynar.

GA4’ün gtag.js ile nasıl çalıştığını Google’ın resmi dokümanından inceleyebilirsiniz: Buraya tıklayın.