React İle Web Uygulamalarında Kullanıcı Etkinliklerini İzleyen Bir Analiz Aracı Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Projeye başlamadan önce sisteminizde Node.js (en az 20.x sürümü) yüklü olmalıdır. React uygulamamızda modern kancaları (hooks) ve Context API'yi kullanarak veri akışını yöneteceğiz. Kurulum için terminalinizde şu komutları kullanabilirsiniz:

npx create-react-app user-analytics-tracker --template typescript
cd user-analytics-tracker
npm install axios

Bu kurulum, tip güvenliği için TypeScript ile birlikte gelir. Analiz verilerini sunucuya göndermek için axios kütüphanesini tercih ediyoruz. Veri gönderiminde güvenli bir uç nokta (endpoint) kullanmak, verilerin bütünlüğünü korumak adına kritiktir.

Adım 1: Merkezi Analiz Servisi Oluşturma

Kullanıcı etkinliklerini yakalamak için tüm uygulamada erişilebilir bir servis katmanı oluşturmamız gerekir. Bu servis, veriyi alır, doğrular ve analiz sunucusuna iletir. Aşağıdaki kod, basit bir izleme fonksiyonu örneğidir.

import axios from 'axios';

const ANALYTICS_ENDPOINT = 'https://api.uygulamaniz.com/v1/track';

export const trackEvent = async (eventName, eventData) => {
  try {
    await axios.post(ANALYTICS_ENDPOINT, {
      eventName,
      eventData,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    });
  } catch (error) {
    console.error('Analiz verisi gönderilemedi:', error);
  }
};

Bu servis, her etkinlikte zaman damgası ve kullanıcı tarayıcı bilgilerini otomatik olarak ekler. try-catch bloğu, ağ hatalarının uygulamanın ana akışını bozmasını engeller.

Adım 2: React Context API ile İzleme Sağlayıcısı

Her bileşende tek tek fonksiyon çağırmak yerine, bir AnalyticsProvider oluşturarak izleme mantığını tüm uygulamaya yaymak en temiz yöntemdir. Bu, "Prop Drilling" sorununu ortadan kaldırır.

import React, { createContext, useContext } from 'react';

const AnalyticsContext = createContext(null);

export const AnalyticsProvider = ({ children }) => {
  const log = (name, data) => trackEvent(name, data);

  return (
    
      {children}
    
  );
};

Bu yapı, uygulamanızın herhangi bir yerinde useAnalytics kancasını kullanarak kolayca etkinlik loglamanızı sağlar. Kodun okunabilirliğini artırır ve bakım kolaylığı sağlar.

Adım 3: Özel Hook Tasarımı

Bileşenler içinde kullanımı kolaylaştırmak için useAnalytics adında özel bir kanca (custom hook) oluşturuyoruz. Bu, geliştirici deneyimini (DX) iyileştiren standart bir yaklaşımdır.

export const useAnalytics = () => {
  const context = useContext(AnalyticsContext);
  if (!context) {
    throw new Error('useAnalytics, AnalyticsProvider içinde kullanılmalıdır.');
  }
  return context;
};

Bu kanca, bağlamın (context) doğru şekilde sağlanıp sağlanmadığını kontrol eder. Hata fırlatma mekanizması, geliştirme aşamasında hataları erkenden yakalamanıza yardımcı olur.

Adım 4: Etkinlikleri İzleme ve Bileşene Entegre Etme

Artık herhangi bir bileşende kullanıcı etkileşimlerini izleyebiliriz. Örneğin, bir "Satın Al" butonuna tıklanma olayını nasıl kaydedeceğimizi görelim.

const BuyButton = () => {
  const { log } = useAnalytics();

  const handleClick = () => {
    log('button_click', { buttonId: 'buy_now_01', page: 'product_detail' });
    // Satın alma mantığı buraya gelir
  };

  return Satın Al;
};

Bu yöntemle, veritabanına veya analiz sunucusuna gönderilen veriler standart bir şemaya sahip olur. Bu standartlaşma, ileride verileri işlerken büyük kolaylık sağlar.

Analiz Araçları Karşılaştırması

Adım 5: Güvenlik ve Performans Optimizasyonu

Kritik Uyarı: Kullanıcı verilerini izlerken XSS (Siteler Arası Betik Çalıştırma) saldırılarına karşı dikkatli olunmalıdır. Kullanıcıdan gelen verileri asla doğrudan DOM'a yazmayın. Ayrıca, GDPR ve KVKK gereği kişisel verileri (PII) analiz sunucusuna göndermeden önce mutlaka maskeleyin veya anonimleştirin.

Performansı artırmak için etkinlikleri anlık göndermek yerine bir kuyruk (queue) yapısı kullanabilirsiniz. requestIdleCallback kullanarak tarayıcının boş olduğu zamanlarda veri gönderimi yapmak, kullanıcı deneyimini olumsuz etkilemez.

const queue = [];
const processQueue = () => {
  if (queue.length > 0) {
    const event = queue.shift();
    trackEvent(event.name, event.data);
  }
};
// Belirli aralıklarla veya uygulama boşta kaldığında çalıştırın

Sıkça Sorulan Sorular

Analiz verilerini göndermek uygulamanın hızını düşürür mü?

Doğru yapılandırılmış bir asenkron gönderim mekanizması ve requestIdleCallback kullanımı ile performans kaybı ihmal edilebilir düzeydedir.

Kullanıcı sayfadan çıkarken verileri nasıl gönderirim?

navigator.sendBeacon API'sini kullanarak tarayıcı kapansa bile verilerin sunucuya iletilmesini garanti altına alabilirsiniz.

Veri gizliliği için ne yapmalıyım?

IP adreslerini anonimleştirin ve kullanıcı tarafından girilen hassas bilgileri (şifre, kredi kartı vb.) asla loglamayın.

Bu sistem çevrimdışı modda çalışır mı?

Evet, IndexedDB kullanarak verileri yerel olarak saklayıp, internet bağlantısı geri geldiğinde sunucuya iletebilirsiniz.

Farklı sayfa geçişlerini nasıl izlerim?

React Router'ın useLocation kancasını kullanarak her rota değişiminde otomatik loglama yapan bir sarmalayıcı (wrapper) oluşturabilirsiniz.

Yasal Uyarı: Bu rehber teknik eğitim amaçlıdır. Uygulamanızda kullanıcı verilerini işlerken yerel yasalara (KVKK, GDPR) uygunluk sağlamak tamamen geliştiricinin sorumluluğundadır. Hukuki süreçler için bir uzmana danışmanız önerilir.

Gelişmiş Hata Ayıklama ve İzleme Stratejileri

Kendi analiz aracınızı geliştirirken, verilerin doğru bir şekilde yakalandığından emin olmak için sağlam bir hata ayıklama (debugging) mekanizması kurmanız kritik öneme sahiptir. Özellikle ağ hataları veya yanlış tetiklenen etkinlikler, veri setinizin kirlenmesine yol açabilir.

Geliştirme aşamasında, verilerin sunucuya gönderilmeden önce konsolda görüntülendiği bir "debug modu" oluşturmak, süreci büyük ölçüde hızlandırır. Aşağıdaki örnek, analiz servisinizde kullanabileceğiniz basit bir hata ayıklayıcı yapısını göstermektedir:

const logEvent = (eventName, payload) => {
  if (process.env.NODE_ENV === 'development') {
    console.group(`[Analiz Servisi]: ${eventName}`);
    console.log('Veri:', payload);
    console.log('Zaman Damgası:', new Date().toISOString());
    console.groupEnd();
  }
  
  // Sunucuya gönderim mantığı burada devam eder
  sendToServer(eventName, payload).catch(err => {
    console.error('Analiz gönderimi başarısız:', err);
  });
};

Ayrıca, analiz aracınızın üretim (production) ortamında sessizce hata vermesi, uygulamanızın ana işlevselliğini etkilememelidir. Bu nedenle, tüm izleme işlemlerini bir try-catch bloğu ile sarmalamak, uygulamanın genel kararlılığını korumak için en iyi uygulamadır.

Analiz Verilerinin Test Edilmesi ve Doğrulanması

Analiz verilerinin doğruluğu, aldığınız kararların kalitesini belirler. Birim testleri (unit tests) kullanarak, belirli bir kullanıcı etkileşiminin doğru event yapısını oluşturup oluşturmadığını test edebilirsiniz. Jest ve React Testing Library kullanarak bir test senaryosu şu şekilde kurgulanabilir:

import { render, fireEvent } from '@testing-library/react';
import { AnalyticsProvider } from './AnalyticsContext';
import MyButton from './MyButton';

test('buton tıklandığında doğru analiz verisi tetiklenmeli', () => {
  const mockSend = jest.fn();
  
  render(
    
      
    
  );

  fireEvent.click(screen.getByText(/Tıkla/i));
  
  expect(mockSend).toHaveBeenCalledWith(
    expect.objectContaining({
      event: 'button_click',
      label: 'ana_sayfa_buton'
    })
  );
});

Bu test yaklaşımı, kodunuzda ileride yapacağınız refactoring işlemlerinde analiz sisteminizin bozulmadığından emin olmanızı sağlar. Özellikle büyük ölçekli uygulamalarda, analiz event'lerinin şemalarını (schema) bir TypeScript arayüzü ile tanımlamak, veri tutarlılığını garanti altına almanın en güvenli yoludur.

İpucu: Analiz verilerinizde "kullanıcı kimliği" (user_id) gibi hassas bilgiler kullanıyorsanız, bu verileri mutlaka sunucuya göndermeden önce hash'leyin (SHA-256 gibi yöntemlerle). Bu, hem veri gizliliği yasalarına uyumu kolaylaştırır hem de veritabanınızdaki güvenlik risklerini minimize eder.

Sonuç

React ile kendi analiz aracınızı oluşturmak, uygulamanızın kullanıcı etkileşimlerini derinlemesine anlamanızı sağlar. Bu rehberde, merkezi bir servis yapısı, Context API kullanımı ve performans optimizasyonlarını adım adım inceledik. Bir sonraki adım olarak, toplanan bu verileri görselleştirmek için bir dashboard (yönetim paneli) hazırlayabilir veya verileri bir veri ambarına aktararak yapay zeka destekli kullanıcı davranışı tahminleme modelleri üzerinde çalışabilirsiniz.