React/Redux Uygulamalarında Google Analytics Entegrasyonu: Redux Beacon ile Kolay İzleme

React/Redux Uygulamalarında Google Analytics Entegrasyonu: Redux Beacon ile Kolay İzleme

Giriş

Modern web uygulamaları, özellikle React ve Redux gibi teknolojilerle geliştirilen Tek Sayfalı Uygulamalar (SPA’lar), kullanıcı deneyimini zenginleştiren dinamik ve etkileşimli yapılar sunar. Ancak bu dinamizm, kullanıcı davranışlarını anlamak ve uygulamanın performansını ölçmek için hayati önem taşıyan analitik verilerin toplanmasını geleneksel yöntemlere göre daha karmaşık hale getirebilir. Google Analytics, web sitelerinin ve uygulamaların ziyaretçi etkileşimlerini, trafik kaynaklarını ve dönüşüm oranlarını izlemek için endüstri standardı bir araçtır. Bu veriler, ürün geliştirme, pazarlama stratejileri ve genel iş kararları için paha biçilmez içgörüler sağlar.

React/Redux uygulamalarında Google Analytics entegrasyonu, sayfa yenilemeleri olmadan gerçekleşen durum değişiklikleri ve kullanıcı etkileşimleri nedeniyle özel bir yaklaşım gerektirir. Her bir Redux eylemi, uygulamanın durumunda bir değişikliği temsil ettiğinden, bu eylemleri analitik olaylarına dönüştürmek için merkezi ve tutarlı bir mekanizmaya ihtiyaç duyarız. İşte bu noktada Redux Beacon devreye girer. Redux Beacon, Redux eylemlerini çeşitli analitik platformlarına (Google Analytics, Facebook Pixel, Mixpanel vb.) olay olarak göndermeyi kolaylaştıran bir Redux middleware’idir. Bu makale, Redux Beacon kullanarak React/Redux uygulamanıza Google Analytics entegrasyonunu nasıl yapacağınızı, temel kurulumdan gelişmiş senaryolara kadar adım adım detaylı bir şekilde açıklayacaktır.

Neden Analitik?

Analitik verileri, uygulamanızın başarısı için kritik öneme sahiptir. İşte başlıca nedenler:

* Kullanıcı Davranışını Anlama: Kullanıcıların uygulamanızda nasıl gezindiğini, hangi özelliklerin popüler olduğunu ve nerede takıldıklarını gösterir.
* Performans İyileştirme: Yavaş yüklenen sayfaları veya kullanıcıların terk ettiği noktaları belirleyerek uygulamanızın performansını ve kullanıcı deneyimini optimize etmenize yardımcı olur.
* Veriye Dayalı Kararlar: Geliştirme yol haritası, yeni özellikler ve pazarlama kampanyaları hakkında spekülasyon yerine somut verilere dayanarak kararlar almanızı sağlar.
* Dönüşüm Optimizasyonu: E-ticaret sitelerinde satışları, abonelik hizmetlerinde kayıtları veya kurumsal sitelerde potansiyel müşteri formlarını doldurma oranlarını artırmak için darboğazları tespit etmenize olanak tanır.
* ROI Ölçümü: Pazarlama harcamalarınızın geri dönüşünü ölçerek bütçenizi daha etkili kullanmanızı sağlar.

Bu içgörüler olmadan, uygulamanızı geliştirmek veya kullanıcı tabanınızı büyütmek için yapılan çabalar genellikle deneme yanılmaya dayanır ve optimal sonuçlar vermeyebilir.

Google Analytics Temelleri

Google Analytics (GA), web sitesi trafiğini izleyen ve raporlayan bir web analizi hizmetidir. Temel olarak, web sitenize eklediğiniz küçük bir JavaScript kodu parçası (izleme kodu) aracılığıyla çalışır. Bu kod, ziyaretçilerinizin tarayıcılarından bilgi toplar ve bu bilgileri Google’ın sunucularına gönderir.

* İzleme Kimliği (Tracking ID): Her GA mülküne özgü bir kimliktir (Universal Analytics için UA-XXXXX-Y, Google Analytics 4 için G-XXXXX). Bu kimlik, verilerin doğru GA hesabına gönderilmesini sağlar.
* Sayfa Görüntülemeleri (Page Views): Bir kullanıcının belirli bir sayfayı her ziyaret ettiğinde kaydedilen temel bir etkileşimdir. SPA’larda bu, URL değiştiğinde manuel olarak tetiklenmelidir.
* Olaylar (Events): Sayfa görüntülemeleri dışında gerçekleşen kullanıcı etkileşimleridir. Örneğin, bir düğmeye tıklama, bir video oynatma, bir form gönderme veya bir dosya indirme. Olaylar genellikle bir eventCategory, eventAction ve eventLabel ile tanımlanır. Google Analytics 4 (GA4) tamamen olay tabanlı bir model üzerine kurulmuştur.
* Özel Boyutlar ve Metrikler (Custom Dimensions & Metrics): Standart GA raporlarında bulunmayan, uygulamanıza özgü verileri toplamanıza olanak tanır (örn. kullanıcı rolü, ürün ID’si).

Bu makale, hem Universal Analytics (UA) hem de GA4 ile uyumlu, olay tabanlı bir yaklaşımı benimseyecektir. Özellikle GA4’ün olay odaklı yapısı, Redux Beacon’ın eylem tabanlı yaklaşımıyla mükemmel bir uyum içindedir.

React/Redux Uygulamalarında Analitik Zorlukları

Tek Sayfalı Uygulamalar (SPA’lar) ve Redux gibi durum yönetim sistemleri, geleneksel web sitelerinden farklı analitik zorlukları sunar:

* Sayfa Yenilemesi Yok: Geleneksel web sitelerinde, her sayfa ziyareti tam bir sayfa yenilemesini tetikler ve bu da GA izleme kodunun otomatik olarak bir sayfa görüntülemesi kaydetmesini sağlar. SPA’larda ise sayfa içeriği JavaScript ile dinamik olarak değişir ve tarayıcı URL’si güncellense bile tam bir sayfa yenilemesi olmaz. Bu, sayfa görüntülemelerinin manuel olarak tetiklenmesi gerektiği anlamına gelir.
* Karmaşık Kullanıcı Etkileşimleri: Redux eylemleri aracılığıyla gerçekleşen birçok kullanıcı etkileşimi (örn. bir ürünün sepete eklenmesi, bir filtrenin uygulanması) DOM seviyesinde doğrudan izlenemez. Bu etkileşimleri analitik olaylarına dönüştürmek için Redux’ın durum yönetimi katmanına erişmek gerekir.
* Kod Karmaşası: Analitik kodunu doğrudan bileşenlere veya eylem yaratıcılara yerleştirmek, kodun dağınıklığına ve bakım zorluklarına yol açabilir. Analitik mantığının uygulamanın iş mantığından ayrılması önemlidir.
* Tutarlılık Eksikliği: Birden fazla geliştirici farklı analitik olayları farklı şekillerde tetikleyebilir, bu da veri tutarsızlığına yol açabilir. Merkezi bir yaklaşım bu sorunu çözer.
* Test Edilebilirlik: Analitik kodunu test etmek, uygulamanın geri kalanını test etmek kadar önemlidir. Dağınık analitik kodunun test edilmesi zor olabilir.

Redux Beacon, bu zorlukların üstesinden gelmek için tasarlanmış bir çözümdür.

Redux Beacon Nedir?

Redux Beacon, Redux ekosistemi için geliştirilmiş bir middleware’dir. Temel amacı, belirli Redux eylemlerini dinlemek ve bu eylemler gerçekleştiğinde önceden tanımlanmış bir analitik olayını belirli bir analitik platformuna (hedef) göndermektir.

Nasıl Çalışır?
1. Middleware Olarak Entegrasyon: Redux Beacon, Redux mağazasına bir middleware olarak eklenir. Bu sayede, uygulamanızda dağıtılan her eylemi dinleyebilir.
2. Olay Haritası (Events Map): Geliştirici, hangi Redux eylemlerinin hangi analitik olaylarına karşılık geldiğini belirten bir “olay haritası” tanımlar. Bu harita, eylem türlerini (action types) analitik olay nesnelerine dönüştüren fonksiyonları içerir.
3. Hedefler (Targets): Redux Beacon, Google Analytics, Facebook Pixel, Mixpanel gibi farklı analitik platformları için “hedefler” sağlar. Bir hedef, analitik olayını ilgili platformun API’sine göndermekten sorumlu olan bir fonksiyondur.
4. Eylem Dinleme ve Dönüştürme: Bir eylem gönderildiğinde, Redux Beacon middleware’i bu eylemi yakalar. Eğer eylem türü olay haritasında tanımlanmışsa, ilgili dönüşüm fonksiyonunu çağırır.
5. Olayı Gönderme: Dönüşüm fonksiyonu tarafından oluşturulan analitik olayı, belirlenen hedefe gönderilir.

Redux Beacon’ın Avantajları:

* Deklaratif ve Merkezi: Analitik mantığını tek bir yerde (olay haritası) tanımlayarak kodun okunabilirliğini ve bakımını kolaylaştırır.
* Ayrılmış Sorumluluklar: Analitik kodunu iş mantığından ayırır, bileşenlerinizin ve eylem yaratıcılarınızın temiz kalmasını sağlar.
* Test Edilebilirlik: Olay haritası ve hedefler kolayca mock’lanabilir, bu da analitik entegrasyonunun test edilmesini basitleştirir.
* Esneklik: Herhangi bir Redux eylemini herhangi bir analitik olayına dönüştürebilirsiniz. Eylem yükünden (payload) veri çekerek dinamik olaylar oluşturabilirsiniz.
* Çoklu Hedef Desteği: Aynı anda birden fazla analitik platformuna veri gönderebilirsiniz.

Redux Beacon Kurulumu ve Temel Kullanım

React/Redux uygulamanızda Redux Beacon’ı kullanmaya başlamak için aşağıdaki adımları izleyelim.

Ön Koşullar

* Node.js ve npm/yarn kurulu.
* Mevcut bir React/Redux uygulaması.

1. Bağımlılıkları Yükleme

Öncelikle Redux Beacon’ın ana paketini ve Google Analytics için özel hedef paketini yüklememiz gerekiyor:

npm install --save redux-beacon @redux-beacon/google-analytics
veya
yarn add redux-beacon @redux-beacon/google-analytics

2. Google Analytics İzleme Kodunu Ekleme

Uygulamanızın public/index.html dosyasına Google Analytics izleme kodunu eklemeniz gerekir. Bu kod genellikle etiketinin kapanışından hemen önce veya etiketinin içinde yer alır. GA4 için gtag.js kullanmanızı öneririm:

G-YOUR_MEASUREMENT_ID yerine kendi GA4 ölçüm kimliğinizi veya Universal Analytics kullanıyorsanız UA-XXXXX-Y kimliğinizi girin. gtag('config', ...) satırı, ilk sayfa görüntülemesini otomatik olarak izler. Ancak SPA’larda rota değişimlerini manuel olarak izlememiz gerekecek.

3. Olay Haritası Oluşturma

Olay haritası, Redux eylem türlerini Google Analytics olaylarına dönüştüren bir JavaScript nesnesidir. Bu haritayı genellikle src/analytics/eventsMap.js gibi ayrı bir dosyada tanımlarız.

// src/analytics/eventsMap.js
import * as ActionTypes from '../store/actionTypes'; // Redux eylem türlerinizin tanımlandığı yer

const eventsMap = {
  // Sayfa Görüntülemeleri (örneğin, rota değişimlerinde)
  [ActionTypes.ROUTE_CHANGED]: (action) => ({
    hitType: 'pageview', // UA için
    page: action.payload.pathname,
    title: action.payload.title || 'Sayfa Görüntüleme',
    // GA4 için:
    // event_name: 'page_view',
    // page_path: action.payload.pathname,
    // page_title: action.payload.title || 'Sayfa Görüntüleme',
  }),

  // Kullanıcı Girişi
  [ActionTypes.USER_LOGIN_SUCCESS]: (action) => ({
    hitType: 'event', // UA için
    eventCategory: 'Kimlik Doğrulama',
    eventAction: 'Giriş Başarılı',
    eventLabel: action.payload.userId, // Kullanıcı ID'sini etiket olarak gönder
    // GA4 için:
    // event_name: 'login',
    // method: 'email_password', // veya 'google', 'facebook' vb.
    // user_id: action.payload.userId,
  }),

  // Bir düğmeye tıklama
  [ActionTypes.BUTTON_CLICKED]: (action) => ({
    hitType: 'event', // UA için
    eventCategory: action.payload.category,
    eventAction: action.payload.action,
    eventLabel: action.payload.label,
    // GA4 için:
    // event_name: 'button_click',
    // button_category: action.payload.category,
    // button_action: action.payload.action,
    // button_label: action.payload.label,
  }),

  // Sepete ürün ekleme
  [ActionTypes.ADD_TO_CART]: (action) => ({
    hitType: 'event', // UA için
    eventCategory: 'E-ticaret',
    eventAction: 'Sepete Ürün Eklendi',
    eventLabel: action.payload.productName,
    value: action.payload.price,
    // GA4 için:
    // event_name: 'add_to_cart',
    // currency: 'TRY',
    // value: action.payload.price,
    // items: [{
    //   item_id: action.payload.productId,
    //   item_name: action.payload.productName,
    //   price: action.payload.price,
    //   quantity: action.payload.quantity,
    // }]
  }),

  // ... diğer eylem türleri ve karşılık gelen analitik olayları
};

export default eventsMap;

Önemli Not: Yukarıdaki örnekte hem Universal Analytics (hitType) hem de GA4 (event_name ve parametreler) için yorum satırları ile örnekler verilmiştir. Hangi Google Analytics sürümünü kullandığınıza bağlı olarak uygun olanı seçmelisiniz. GA4 için gtag.js kullanıyorsanız hitType: 'event' yerine doğrudan event_name ve diğer parametreleri kullanmanız daha doğru olacaktır. @redux-beacon/google-analytics paketi, gtag.js veya analytics.js ile çalışabilir. GA4 için gtag.js ile uyumlu bir yapı kurmak en iyisidir.

4. Redux Store ile Entegrasyon

Şimdi createMiddleware fonksiyonunu kullanarak Redux Beacon’ı Redux store’umuza entegre edelim.

// src/store/index.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createMiddleware } from 'redux-beacon';
import { createGoogleAnalyticsTarget } from '@redux-beacon/google-analytics';
import eventsMap from '../analytics/eventsMap';
import rootReducer from './reducers'; // Kök reducer'ınız

// Google Analytics hedefi oluşturma
// UA için:
// const gaTarget = createGoogleAnalyticsTarget();
// GA4 için (gtag.js kullanıyorsanız):
const gaTarget = createGoogleAnalyticsTarget({
  trackerName: 'gtag', // gtag.js kullanıyorsanız bu önemli
  // Eğer Universal Analytics (analytics.js) kullanıyorsanız bu parametreye gerek yok
});


// Redux Beacon middleware'ini oluşturma
const beaconMiddleware = createMiddleware(eventsMap, {
  ga: gaTarget, // 'ga' anahtarı ile Google Analytics hedefini bağla
});

const store = createStore(
  rootReducer,
  applyMiddleware(beaconMiddleware) // Beacon middleware'ini Redux'a ekle
);

export default store;

Artık Redux Beacon, gönderilen her eylemi dinleyecek ve eventsMap içinde tanımlanan eylemler için Google Analytics’e ilgili olayları gönderecektir.

5. Rota Değişimlerini İzleme (SPA’lar İçin)

SPA’larda, react-router-dom gibi kütüphanelerle rota değişimleri otomatik olarak bir sayfa görüntülemesi tetiklemez. Bu nedenle, her rota değişiminde manuel olarak bir ROUTE_CHANGED eylemi göndermemiz gerekir. Bunu yapmak için genellikle history nesnesini dinleriz.

// src/App.js (veya ana bileşeniniz)
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom'; // react-router-dom v5+
import * as ActionTypes from './store/actionTypes';

function App() {
  const dispatch = useDispatch();
  const location = useLocation();

  useEffect(() => {
    // Rota değiştiğinde bu effect çalışır
    dispatch({
      type: ActionTypes.ROUTE_CHANGED,
      payload: {
        pathname: location.pathname,
        title: document.title, // Mevcut sayfa başlığını gönder
      },
    });
  }, [location, dispatch]); // location veya dispatch değiştiğinde yeniden çalış

  return (
    // ... uygulamanızın diğer bileşenleri
  );
}

export default App;

Bu kod parçası, location nesnesi her değiştiğinde (yani rota değiştiğinde) ROUTE_CHANGED eylemini gönderir. Bu eylem, eventsMap içinde tanımlandığı gibi bir sayfa görüntülemesi olarak Google Analytics’e gönderilir.

Detaylı Olay İzleme

Redux Beacon’ın gücü, Redux eylemlerinizin yükündeki (payload) verileri kullanarak zengin ve anlamlı analitik olayları oluşturabilmesidir.

Özel Olaylar ve Eylem Yükünden Veri Kullanımı

Bir kullanıcının belirli bir ürünü sepete eklediğini düşünelim. ADD_TO_CART eylemi, ürünün ID’si, adı ve fiyatı gibi bilgileri içerebilir. Bu bilgileri analitik olayına dahil etmek, daha derinlemesine analizler yapmanızı sağlar.

// src/store/actionTypes.js
export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const PRODUCT_VIEWED = 'PRODUCT_VIEWED';
export const SEARCH_PERFORMED = 'SEARCH_PERFORMED';
// ... diğer eylem türleri

// src/analytics/eventsMap.js (devamı)
import * as ActionTypes from '../store/actionTypes';

const eventsMap = {
  // ... diğer olaylar

  [ActionTypes.PRODUCT_VIEWED]: (action) => ({
    event_name: 'view_item', // GA4 için
    currency: 'TRY',
    value: action.payload.price,
    items: [{
      item_id: action.payload.productId,
      item_name: action.payload.productName,
      item_category: action.payload.category,
      price: action.payload.price,
    }],
    // UA için:
    // hitType: 'event',
    // eventCategory: 'E-ticaret',
    // eventAction: 'Ürün Görüntülendi',
    // eventLabel: action.payload.productName,
    // value: action.payload.price,
  }),

  [ActionTypes.ADD_TO_CART]: (action) => ({
    event_name: 'add_to_cart', // GA4 için
    currency: 'TRY',
    value: action.payload.price * action.payload.quantity,
    items: [{
      item_id: action.payload.productId,
      item_name: action.payload.productName,
      price: action.payload.price,
      quantity: action.payload.quantity,
    }],
    // UA için:
    // hitType: 'event',
    // eventCategory: 'E-ticaret',
    // eventAction: 'Sepete Ürün Eklendi',
    // eventLabel: action.payload.productName,
    // value: action.payload.price * action.payload.quantity,
  }),

  [ActionTypes.REMOVE_FROM_CART]: (action) => ({
    event_name: 'remove_from_cart', // GA4 için
    currency: 'TRY',
    value: action.payload.price * action.payload.quantity,
    items: [{
      item_id: action.payload.productId,
      item_name: action.payload.productName,
      price: action.payload.price,
      quantity: action.payload.quantity,
    }],
    // UA için:
    // hitType: 'event',
    // eventCategory: 'E-ticaret',
    // eventAction: 'Sepetten Ürün Çıkarıldı',
    // eventLabel: action.payload.productName,
    // value: action.payload.price * action.payload.quantity,
  }),

  [ActionTypes.SEARCH_PERFORMED]: (action) => ({
    event_name: 'search', // GA4 için
    search_term: action.payload.query,
    // UA için:
    // hitType: 'event',
    // eventCategory: 'Arama',
    // eventAction: 'Arama Yapıldı',
    // eventLabel: action.payload.query,
  }),
};

export default eventsMap;

Bu örnekler, Redux eylemlerinizin payload‘undan alınan verileri doğrudan analitik olaylarına nasıl entegre edebileceğinizi göstermektedir. Bu sayede, “hangi ürünlerin sepete en çok eklendiği” veya “hangi arama terimlerinin kullanıldığı” gibi spesifik sorulara yanıt bulabilirsiniz.

Gelişmiş Konular ve En İyi Uygulamalar

Birden Fazla Analitik Hedefi

Redux Beacon, aynı anda birden fazla analitik platformuna veri göndermenize olanak tanır. Örneğin, hem Google Analytics hem de Facebook Pixel kullanıyorsanız:

npm install --save @redux-beacon/facebook-pixel
veya
yarn add @redux-beacon/facebook-pixel

// src/store/index.js (güncellenmiş)
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createMiddleware } from 'redux-beacon';
import { createGoogleAnalyticsTarget } from '@redux-beacon/google-analytics';
import { createFacebookPixelTarget } from '@redux-beacon/facebook-pixel'; // Yeni hedef
import eventsMap from '../analytics/eventsMap';
import rootReducer from './reducers';

const gaTarget = createGoogleAnalyticsTarget({ trackerName: 'gtag' });
const fbTarget = createFacebookPixelTarget(); // Facebook Pixel hedefi

const beaconMiddleware = createMiddleware(eventsMap, {
  ga: gaTarget,
  fb: fbTarget, // Facebook Pixel hedefini ekle
});

const store = createStore(
  rootReducer,
  applyMiddleware(beaconMiddleware)
);

export default store;

eventsMap içinde, her eylem için hangi hedeflere gönderileceğini belirtebilirsiniz:

// src/analytics/eventsMap.js (güncellenmiş)
const eventsMap = {
  [ActionTypes.ADD_TO_CART]: (action) => ([ // Bir dizi döndürerek birden fazla hedefi belirt
    {
      target: 'ga', // Google Analytics'e gönder
      event_name: 'add_to_cart',
      currency: 'TRY',
      value: action.payload.price * action.payload.quantity,
      items: [{
        item_id: action.payload.productId,
        item_name: action.payload.productName,
        price: action.payload.price,
        quantity: action.payload.quantity,
      }],
    },
    {
      target: 'fb', // Facebook Pixel'e gönder
      eventName: 'AddToCart',
      properties: {
        content_ids: [action.payload.productId],
        content_name: action.payload.productName,
        currency: 'TRY',
        value: action.payload.price * action.payload.quantity,
      },
    },
  ]),
  // ... diğer olaylar
};

Bu sayede, aynı Redux eyleminden farklı analitik platformlarına uygun formatlarda veri gönderebilirsiniz.

Koşullu Olaylar

Bazen bir analitik olayını yalnızca belirli koşullar altında göndermek isteyebilirsiniz (örn. kullanıcı giriş yapmışsa). Bunu, callback fonksiyonu içinde basit bir if kontrolü ile yapabilirsiniz. Eğer bir olay gönderilmesini istemiyorsanız, callback’ten null veya undefined döndürmeniz yeterlidir.

// src/analytics/eventsMap.js
const eventsMap = {
  [ActionTypes.USER_PROFILE_UPDATED]: (action, prevState, nextState) => {
    // Sadece kullanıcı giriş yapmışsa olayı gönder
    if (nextState.auth.isLoggedIn) {
      return {
        event_name: 'user_profile_updated',
        user_id: nextState.auth.userId,
        // ... diğer parametreler
      };
    }
    return null; // Olayı gönderme
  },
  // ...
};

eventsMap callback fonksiyonları, action, prevState ve nextState parametrelerini alabilir. Bu, durumdaki değişikliklere göre koşullu olaylar oluşturmanıza olanak tanır.

Hata Yakalama

Analitik çağrıları sırasında oluşabilecek hataları yönetmek önemlidir. Redux Beacon, onError seçeneği sunar:

// src/store/index.js
const beaconMiddleware = createMiddleware(eventsMap, {
  ga: gaTarget,
  onError: (error) => {
    console.error('Redux Beacon hatası:', error);
    // Hataları bir hata izleme servisine (Sentry, Bugsnag) gönderebilirsiniz
  },
});

Geliştirme Ortamında İzlemeyi Devre Dışı Bırakma

Geliştirme ortamında analitik verileri kirletmek istemezsiniz. Bunu önlemek için ortam değişkenlerini kullanabilirsiniz:

// src/store/index.js
const gaTarget = createGoogleAnalyticsTarget({ trackerName: 'gtag' });

// Sadece üretim ortamında analitik olaylarını gönder
const beaconMiddleware = createMiddleware(eventsMap, {
  ga: gaTarget,
  // Ortam değişkenini kontrol et
  // process.env.NODE_ENV === 'production'
  // veya özel bir değişken: process.env.REACT_APP_ENABLE_ANALYTICS
  disabled: process.env.NODE_ENV !== 'production',
});

Test Edilebilirlik

Redux Beacon, analitik kodunuzu daha test edilebilir hale getirir. eventsMap‘iniz saf fonksiyonlardan oluştuğu için kolayca test edilebilir. Hedefleri (örneğin gaTarget) mock’layarak, eylemlerin doğru analitik olaylarına dönüştürülüp dönüştürülmediğini ve doğru hedeflere gönderilip gönderilmediğini kontrol edebilirsiniz.

// Örnek bir test senaryosu (Jest ile)
import { createMiddleware } from 'redux-beacon';
import eventsMap from '../analytics/eventsMap';
import * as ActionTypes from '../../store/actionTypes';

describe('Redux Beacon Analytics Middleware', () => {
  let mockGaTarget;
  let store;
  let next;
  let invoke;

  beforeEach(() => {
    mockGaTarget = jest.fn(); // Mock Google Analytics hedefi
    const beaconMiddleware = createMiddleware(eventsMap, { ga: mockGaTarget });

    // Middleware'i bir Redux store bağlamında taklit et
    store = {
      getState: () => ({ auth: { isLoggedIn: true } }), // Örnek durum
    };
    next = jest.fn();
    invoke = (action) => beaconMiddleware(store)(next)(action);
  });

  it('should dispatch ROUTE_CHANGED event to GA', () => {
    const action = { type: ActionTypes.ROUTE_CHANGED, payload: { pathname: '/test', title: 'Test Sayfası' } };
    invoke(action);

    expect(next).toHaveBeenCalledWith(action); // Eylemin bir sonraki middleware'e iletildiğinden emin ol
    expect(mockGaTarget).toHaveBeenCalledTimes(1);
    expect(mockGaTarget).toHaveBeenCalledWith({
      event_name: 'page_view',
      page_path: '/test',
      page_title: 'Test Sayfası',
    });
  });

  it('should not dispatch event if action type is not in map', () => {
    const action = { type: 'UNKNOWN_ACTION' };
    invoke(action);

    expect(next).toHaveBeenCalledWith(action);
    expect(mockGaTarget).not.toHaveBeenCalled();
  });
});

Performans İpuçları

Analitik çağrıları genellikle ağ istekleri içerir ve uygulamanızın performansını etkilememelidir. Redux Beacon bu konuda zaten asenkron bir yapıya sahiptir. Ancak, eventsMap içindeki callback fonksiyonlarınızın karmaşık hesaplamalar yapmadığından emin olun. Hızlı ve verimli olmalıdırlar.

Veri Gizliliği ve GDPR/KVKK

Kullanıcı verilerini toplarken veri gizliliği düzenlemelerine (GDPR, KVKK vb.) uymak zorunludur.

* Kullanıcı Onayı: Çoğu durumda, kullanıcıların çerezler ve izleme için açıkça onay vermesi gerekir. Uygulamanızda bir çerez izin banner’ı veya mekanizması bulundurun.
* Anonimleştirme: IP adreslerini anonimleştirin. Google Analytics bunu otomatik olarak yapabilir veya gtag('config', 'G-XXXXX', { 'anonymize_ip': true }); gibi ayarlarla manuel olarak etkinleştirebilirsiniz.
* Hassas Veri Yok: Asla kişisel olarak tanımlayıcı bilgileri (PII) Google Analytics’e göndermeyin (örn. ad, e-posta, TC kimlik numarası).

Universal Analytics (UA) ve Google Analytics 4 (GA4) Karşılaştırması ve Redux Beacon ile Uyumu

Google Analytics’in en son sürümü olan GA4, veri toplama ve raporlama yaklaşımında önemli değişiklikler getirmiştir.

* Universal Analytics (UA): Oturum tabanlı bir model kullanır. Sayfa görüntülemeleri ve özel olaylar gibi farklı “isabet türleri” (hit types) vardır.
* Google Analytics 4 (GA4): Tamamen olay tabanlı bir model kullanır. Her şey bir olaydır; sayfa görüntülemeleri bile page_view olayı olarak kaydedilir. Bu, farklı platformlardan (web, mobil uygulama) gelen verileri birleştirmeyi ve kullanıcı yolculuğunu daha iyi anlamayı kolaylaştırır.

Redux Beacon’ın olay odaklı yapısı, GA4’ün felsefesiyle mükemmel bir uyum içindedir. Redux eylemleri, uygulamanızda gerçekleşen olayları doğal olarak temsil eder. Bu nedenle, Redux Beacon ile GA4 entegrasyonu oldukça sezgiseldir.

@redux-beacon/google-analytics paketi, gtag.js veya analytics.js kütüphaneleri aracılığıyla Google Analytics API’siyle etkileşime girer. GA4 kullanıyorsanız, gtag.js kullanmak ve olayları GA4’ün beklediği formatta (event_name ve parametreler) göndermek en iyi yaklaşımdır. Redux Beacon’daki callback fonksiyonlarınızda bu formatı oluşturarak hem UA hem de GA4 ile çalışabilirsiniz.

GA4 Odaklı Olay Haritası Örneği:

// src/analytics/eventsMap.js (GA4 odaklı)
import * as ActionTypes from '../store/actionTypes';

const eventsMap = {
  [ActionTypes.ROUTE_CHANGED]: (action) => ({
    event_name: 'page_view',
    page_path: action.payload.pathname,
    page_title: action.payload.title || 'Sayfa Görüntüleme',
    // Diğer GA4 parametreleri eklenebilir
  }),

  [ActionTypes.USER_LOGIN_SUCCESS]: (action) => ({
    event_name: 'login',
    method: 'email_password', // veya 'google', 'facebook'
    user_id: action.payload.userId,
  }),

  [ActionTypes.ADD_TO_CART]: (action) => ({
    event_name: 'add_to_cart',
    currency: 'TRY',
    value: action.payload.price * action.payload.quantity,
    items: [{
      item_id: action.payload.productId,
      item_name: action.payload.productName,
      price: action.payload.price,
      quantity: action.payload.quantity,
    }],
  }),
  // ...
};

export default eventsMap;

GA4 ile entegrasyon yaparken, createGoogleAnalyticsTarget fonksiyonuna trackerName: 'gtag' seçeneğini geçirmek, Redux Beacon’ın gtag.js komutlarını doğru şekilde kullanmasını sağlar.

Örnek Senaryo: E-ticaret Uygulaması

Bir e-ticaret uygulamasında Redux Beacon’ın nasıl kullanılabileceğine dair kapsamlı bir senaryo oluşturalım:

Redux Action Types:

// src/store/actionTypes.js
export const FETCH_PRODUCTS_SUCCESS = 'FETCH_PRODUCTS_SUCCESS';
export const VIEW_PRODUCT_DETAIL = 'VIEW_PRODUCT_DETAIL';
export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const START_CHECKOUT = 'START_CHECKOUT';
export const COMPLETE_PURCHASE = 'COMPLETE_PURCHASE';
export const APPLY_FILTER = 'APPLY_FILTER';
export const SEARCH_PRODUCTS = 'SEARCH_PRODUCTS';
export const ROUTE_CHANGED = 'ROUTE_CHANGED';

Events Map (GA4 Odaklı):

// src/analytics/eventsMap.js
import * as ActionTypes from '../store/actionTypes';

const eventsMap = {
  [ActionTypes.ROUTE_CHANGED]: (action) => ({
    event_name: 'page_view',
    page_path: action.payload.pathname,
    page_title: action.payload.title || 'Sayfa Görüntüleme',
  }),

  [ActionTypes.FETCH_PRODUCTS_SUCCESS]: (action) => ({
    event_name: 'view_item_list',
    item_list_name: action.payload.category || 'Tüm Ürünler',
    items: action.payload.products.map(p => ({
      item_id: p.id,
      item_name: p.name,
      item_category: p.category,
      price: p.price,
    })),
  }),

  [ActionTypes.VIEW_PRODUCT_DETAIL]: (action) => ({
    event_name: 'view_item',
    currency: 'TRY',
    value: action.payload.product.price,
    items: [{
      item_id: action.payload.product.id,
      item_name: action.payload.product.name,
      item_category: action.payload.product.category,
      price: action.payload.product.price,
    }],
  }),

  [ActionTypes.ADD_TO_CART]: (action) => ({
    event_name: 'add_to_cart',
    currency: 'TRY',
    value: action.payload.product.price * action.payload.quantity,
    items: [{
      item_id: action.payload.product.id,
      item_name: action.payload.product.name,
      price: action.payload.product.price,
      quantity: action.payload.quantity,
    }],
  }),

  [ActionTypes.REMOVE_FROM_CART]: (action) => ({
    event_name: 'remove_from_cart',
    currency: 'TRY',
    value: action.payload.product.price * action.payload.quantity,
    items: [{
      item_id: action.payload.product.id,
      item_name: action.payload.product.name,
      price: action.payload.product.price,
      quantity: action.payload.quantity,
    }],
  }),

  [ActionTypes.START_CHECKOUT]: (action) => ({
    event_name: 'begin_checkout',
    currency: 'TRY',
    value: action.payload.totalPrice,
    items: action.payload.cartItems.map(item => ({
      item_id: item.product.id,
      item_name: item.product.name,
      price: item.product.price,
      quantity: item.quantity,
    })),
  }),

  [ActionTypes.COMPLETE_PURCHASE]: (action) => ({
    event_name: 'purchase',
    transaction_id: action.payload.orderId,
    affiliation: 'Online Store',
    currency: 'TRY',
    value: action.payload.totalPrice,
    tax: action.payload.taxAmount,
    shipping: action.payload.shippingCost,
    items: action.payload.purchasedItems.map(item => ({
      item_id: item.product.id,
      item_name: item.product.name,
      price: item.product.price,
      quantity: item.quantity,
    })),
  }),

  [ActionTypes.APPLY_FILTER]: (action) => ({
    event_name: 'filter_applied',
    filter_category: action.payload.filterCategory,
    filter_value: action.payload.filterValue,
  }),

  [ActionTypes.SEARCH_PRODUCTS]: (action) => ({
    event_name: 'search',
    search_term: action.payload.query,
  }),
};

export default eventsMap;

Bu örnek senaryo, bir kullanıcının ürün listeleme, ürün detay görüntüleme, sepete ekleme/çıkarma, ödeme sürecini başlatma ve satın alma işlemlerini Redux eylemleri aracılığıyla nasıl izleyebileceğinizi göstermektedir. Her bir eylem, GA4’ün beklediği zenginleştirilmiş veri yapısına uygun bir olay olarak dönüştürülür. Bu sayede, e-ticaret dönüşüm huninizin her adımını detaylı bir şekilde analiz edebilirsiniz.

Sonuç

React/Redux uygulamalarında Google Analytics entegrasyonu, uygulamanızın dinamik doğası nedeniyle belirli zorluklar içerir. Ancak Redux Beacon, bu zorlukları aşmak için güçlü, esnek ve temiz bir çözüm sunar. Redux Beacon’ı kullanarak, analitik mantığınızı uygulamanızın iş mantığından ayırabilir, merkezi bir olay haritası oluşturabilir ve Redux eylemlerinizi anlamlı analitik olaylarına dönüştürebilirsiniz.

Bu makalede ele aldığımız adımları izleyerek, uygulamanızda güvenilir ve kapsamlı bir analitik altyapısı kurabilirsiniz. Temel kurulumdan gelişmiş olay izlemeye, birden fazla analitik hedefi kullanmaya ve veri gizliliği hususlarına kadar Redux Beacon, veri odaklı kararlar almanıza yardımcı olacak değerli içgörüler toplamanızı sağlayacaktır. Unutmayın, iyi bir analitik entegrasyonu, sadece verileri toplamakla kalmaz, aynı zamanda bu verileri yorumlayarak uygulamanızın başarısı için stratejik adımlar atmanızı sağlar.