ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

📊 Bölüm 12: Analitik ve Kullanıcı Geri Bildirimi Toplama

Anahtar Noktalar

• Analitik Nedir? ArcGIS Experience Builder uygulamalarında kullanıcı davranışlarını, kullanım istatistiklerini ve performans metriklerini izleme ve analiz etme süreci.
• Kullanıcı Geri Bildirimi: Kullanıcıların deneyimlerini anlamak ve uygulamayı geliştirmek için geri bildirim toplama yöntemleri.
• Araçlar: ArcGIS Survey123, özel anket widget’ları, Google Analytics, ArcGIS API for JavaScript ve geliştirici konsolu.
• Erişilebilirlik: Geri bildirim formlarının WCAG 2.1 standartlarına uygunluğu.
• Haziran 2025 Güncellemesi: Yeni analitik widget’ları, gelişmiş geri bildirim araçları ve entegre performans raporlama.

Analitik ve Kullanıcı Geri Bildiriminin Önemi

Analitik ve kullanıcı geri bildirimi, ArcGIS Experience Builder uygulamalarının etkinliğini ölçmek, kullanıcı ihtiyaçlarını anlamak ve sürekli iyileştirme yapmak için kritik öneme sahiptir. Örneğin:

• Analitik, hangi widget’ların en çok kullanıldığını veya hangi sayfaların yavaş yüklendiğini gösterir.
• Kullanıcı geri bildirimi, uygulamanın eksikliklerini veya geliştirilmesi gereken alanlarını belirler.
  Bu bölüm, analitik yöntemlerini, geri bildirim toplama tekniklerini, entegrasyonları, erişilebilirlik uygulamalarını, kod örneklerini ve pratik senaryoları Haziran 2025 sürümüne uygun olarak detaylı bir şekilde açıklayacak. Yeni başlayanlardan uzman geliştiricilere kadar herkes için kapsamlı bir rehber sunulacak.

---

12.1 Analitik ve Kullanıcı Geri Bildirimi Nedir?

Analitik, uygulamanın kullanım istatistiklerini ve performans metriklerini toplama ve analiz etme sürecidir. Örneğin:

• Kullanıcıların hangi widget’lara tıkladığı.
• Harita etkileşimlerinin sıklığı.
• Sayfaların yükleme süreleri.

Kullanıcı Geri Bildirimi, kullanıcıların deneyimlerini, önerilerini ve şikayetlerini toplama sürecidir. Örneğin:

• Bir anket widget’ı ile kullanıcı memnuniyetini ölçme.
• Hata raporlarını toplama.

Neden Önemli?

• Kullanıcı Deneyimi: Kullanıcıların ihtiyaçlarını anlayarak uygulamayı geliştirir.
• Performans İyileştirme: Yavaş yüklenen bileşenleri tespit eder.
• Veri Odaklı Kararlar: Analitik verilerle optimizasyon önceliklerini belirler.
• Erişilebilirlik: Geri bildirim formlarının kapsayıcı olmasını sağlar.

12.2 Analitik Yöntemleri

Analitik, uygulamanın kullanımını ve performansını anlamak için çeşitli yöntemlerle uygulanır.

12.2.1 ArcGIS Yerleşik Analitik Araçları

ArcGIS Experience Builder, kullanım istatistiklerini izlemek için yerleşik araçlar sunar.

• Kullanım Alanları:
  • Uygulama görüntülenme sayıları.
  • Widget etkileşimleri.
  • Veri kaynağı kullanım istatistikleri.
• Adımlar:
  1. ArcGIS Online/Enterprise portalında uygulamanızı seçin.
  2. Analytics sekmesine gidin.
  3. Görüntülenme, kullanıcı etkinliği ve cihaz türleri gibi metrikleri inceleyin.
• Haziran 2025 Yeniliği: Yeni analitik widget’ı ile gerçek zamanlı kullanım raporları.

12.2.2 Özel Analitik Widget’ı

Özel bir widget ile kullanıcı etkileşimlerini izleyebilirsiniz.

• Örnek: Kullanıcı Tıklama İzleme Widget’ı// client/your-extensions/widgets/AnalyticsWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; export default function AnalyticsWidget(props: WidgetProps) { useEffect(() => { const trackClick = (event: MouseEvent) => { const target = event.target as HTMLElement; fetch(\'https://your-analytics-server.com/track\', { method: \'POST\', headers: { \'Content-Type\': \'application/json\' }, body: JSON.stringify({ event: \'click\', element: target.tagName, timestamp: new Date().toISOString() }) }); }; document.addEventListener(\'click\', trackClick); return () => document.removeEventListener(\'click\', trackClick); }, []); return <div style={{ display: \'none\' }}>Analytics Tracker</div>; }
• Adımlar:
  1. Widget’ı Experience Builder Developer Edition’da oluşturun.
  2. Uygulamaya ekleyin.
  3. Analitik verilerini bir sunucuya (ör. Node.js API) kaydedin.

12.2.3 Google Analytics Entegrasyonu

Google Analytics, detaylı kullanıcı davranışı analizi için kullanılabilir.

• Adımlar:
  1. Google Analytics hesabında bir mülk oluşturun ve izleme kodunu alın.
  2. Experience Builder uygulamasına izleme kodunu ekleyin:<!-- index.html --> <script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y\"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(\'js\', new Date()); gtag(\'config\', \'UA-XXXXX-Y\'); </script>
  3. Kullanıcı etkileşimlerini izlemek için olaylar tanımlayın:// client/your-extensions/widgets/TrackEventWidget/Widget.tsx import { React, WidgetProps } from \'jimu-core\'; export default function TrackEventWidget(props: WidgetProps) { const trackEvent = () => { (window as any).gtag(\'event\', \'button_click\', { event_category: \'User Interaction\', event_label: \'Custom Button\' }); }; return ( <button onClick={trackEvent} aria-label=\"Olay Takibi\">Tıkla</button> ); }
• İpucu: Google Analytics’te sayfa görüntülemeleri, olaylar ve kullanıcı demografisi gibi metrikleri analiz edin.

12.2.4 Performans Analitiği

Performans metriklerini izlemek için tarayıcı araçları ve ArcGIS API kullanılır.

• Araçlar:
  • Chrome DevTools: Yükleme sürelerini ve ağ çağrılarını analiz eder.
  • Lighthouse: Performans, erişilebilirlik ve SEO raporları sunar.
• Adımlar:
  1. Chrome DevTools’ta Performance sekmesini kullanarak yükleme sürelerini ölçün.
  2. Lighthouse ile performans raporları oluşturun:
     • Komut: npm install -g lighthouse
     • Çalıştırma: lighthouse https://your-app-url --view
• Örnek: Performans Optimizasyonu
  • Yavaş yüklenen bir veri kaynağını tespit edin:const response = await fetch(\'https://services.arcgis.com/data\', { cache: \'force-cache\' });
  • Önbellekleme ile yükleme süresini azaltın.

12.3 Kullanıcı Geri Bildirimi Toplama

Kullanıcı geri bildirimleri, uygulamanın eksikliklerini ve geliştirme alanlarını belirlemek için kullanılır.

12.3.1 ArcGIS Survey123 Entegrasyonu

ArcGIS Survey123, yapılandırılmış geri bildirim formları oluşturmak için idealdir.

• Adımlar:
  1. ArcGIS Online’da bir Survey123 formu oluşturun (ör. memnuniyet anketi).
  2. Formu Experience Builder’a entegre edin:
     • Survey Widget’ı ekleyin.
     • Survey123 formunu bağlayın.
  3. Kullanıcı yanıtlarını ArcGIS Online’da analiz edin.
• Örnek Form Soruları:
  • Uygulamanın kullanımı kolay mı? (1-5 ölçeği)
  • Hangi özellik geliştirilmeli? (Açık uçlu)
• İpucu: Survey123’te erişilebilirlik için ARIA etiketleri ekleyin.

12.3.2 Özel Geri Bildirim Widget’ı

Özel bir widget ile geri bildirim formu oluşturabilirsiniz.

• Örnek: Geri Bildirim Widget’ı// client/your-extensions/widgets/FeedbackWidget/Widget.tsx import { React, WidgetProps, useState } from \'jimu-core\'; export default function FeedbackWidget(props: WidgetProps) { const [feedback, setFeedback] = useState(\'\'); const submitFeedback = async () => { try { await fetch(\'https://your-feedback-server.com/submit\', { method: \'POST\', headers: { \'Content-Type\': \'application/json\' }, body: JSON.stringify({ feedback, timestamp: new Date().toISOString() }) }); alert(\'Geri bildirim gönderildi!\'); setFeedback(\'\'); } catch (error) { console.error(\'Feedback Error:\', error); } }; return ( <div style={{ padding: \'20px\' }}> <h3>Geri Bildirim</h3> <textarea value={feedback} onChange={(e) => setFeedback(e.target.value)} aria-label=\"Geri bildirim metni\" rows={5} style={{ width: \'100%\' }} /> <button onClick={submitFeedback} aria-label=\"Geri bildirimi gönder\" style={{ marginTop: \'10px\' }} > Gönder </button> </div> ); }
• Adımlar:
  1. Widget’ı Experience Builder Developer Edition’da oluşturun.
  2. Uygulamaya ekleyin.
  3. Geri bildirimleri bir sunucuya kaydedin (ör. Node.js API).

12.3.3 E-posta ve Webhook ile Geri Bildirim

• Adımlar:
  1. Share Widget’ında e-posta paylaşımını etkinleştirin.
  2. Webhook ile geri bildirimleri toplayın:
     • Zapier veya Integromat ile Webhook oluşturun.
     • Geri bildirimleri bir veritabanına kaydedin.
• Örnek: Webhook ile geri bildirim toplama:await fetch(\'https://your-webhook-url.com/feedback\', { method: \'POST\', body: JSON.stringify({ message: \'Uygulama harika!\' }) });

12.4 Erişilebilirlik ve Güvenlik

12.4.1 Erişilebilirlik

Geri bildirim formlarının WCAG 2.1 standartlarına uygun olması gerekir.

• Adımlar:
  1. ARIA etiketleri ekleyin:<textarea aria-label=\"Geri bildirim girin\" /> <button aria-label=\"Geri bildirimi gönder\">Gönder</button>
  2. Klavye navigasyonunu destekleyin:import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => submitFeedback() });
  3. Ekran okuyucu uyumluluğunu test edin (NVDA, VoiceOver).
• Araçlar: axe DevTools, WebAIM Contrast Checker.

12.4.2 Güvenlik

• Kimlik Doğrulama: Analitik ve geri bildirim API’leri için OAuth veya API anahtarları kullanın.
• Veri Şifreleme: HTTPS ile veri aktarımını şifreleyin.
• Veri Sınırlama: Kullanıcı verilerini yalnızca gerekli olduğunda toplayın.

12.5 Haziran 2025 Güncellemesindeki Yenilikler

• Analitik Widget’ları:
  • Gerçek zamanlı kullanım raporları.
  • Yeni grafik türleri (ör. ısı haritası).
• Geri Bildirim Araçları:
  • Geliştirilmiş Survey123 entegrasyonu.
  • Otomatik geri bildirim analizi.
• Erişilebilirlik:
  • Yeni useAccessibility hook’u.
  • Otomatik ARIA etiket oluşturma.
• Performans:
  • Analitik verileri için önbellekleme.
  • Daha hızlı geri bildirim formu yükleme.

12.6 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle analitik ve geri bildirim toplama süreçlerini açıklayacağız.

Örnek 1: Basit Geri Bildirim Formu (Başlangıç Seviyesi)

• Amaç: Kullanıcıların kısa bir geri bildirim formu doldurmasını sağlama.
• Widget’lar: Metin, Özel Geri Bildirim Widget’ı.
• Adımlar:
  1. Özel geri bildirim widget’ı oluşturun:// client/your-extensions/widgets/SimpleFeedbackWidget/Widget.tsx import { React, WidgetProps, useState } from \'jimu-core\'; export default function SimpleFeedbackWidget(props: WidgetProps) { const [rating, setRating] = useState(0); const submitRating = async () => { await fetch(\'https://your-feedback-server.com/rating\', { method: \'POST\', headers: { \'Content-Type\': \'application/json\' }, body: JSON.stringify({ rating }) }); alert(\'Teşekkürler!\'); }; return ( <div style={{ padding: \'20px\' }}> <h3>Uygulamayı Değerlendirin</h3> <select value={rating} onChange={(e) => setRating(Number(e.target.value))} aria-label=\"Değerlendirme puanı\" > <option value=\"0\">Puan Seçin</option> <option value=\"1\">1</option> <option value=\"2\">2</option> <option value=\"3\">3</option> <option value=\"4\">4</option> <option value=\"5\">5</option> </select> <button onClick={submitRating} aria-label=\"Değerlendirmeyi gönder\">Gönder</button> </div> ); }
  2. Uygulamaya ekleyin.
  3. Geri bildirimleri bir sunucuya kaydedin.
  4. Erişilebilirlik testi yapın (axe DevTools).
• Sonuç: Basit bir geri bildirim formu.
• İpucu: Formu kısa ve kullanıcı dostu tutun.

Örnek 2: Kullanıcı Etkileşim Analitiği (Orta Seviye)

• Amaç: Kullanıcıların harita etkileşimlerini izleme.
• Widget’lar: Harita, Özel Analitik Widget’ı.
• Adımlar:
  1. Özel analitik widget’ı oluşturun:// client/your-extensions/widgets/MapAnalyticsWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function MapAnalyticsWidget(props: WidgetProps) { const trackInteraction = (view: JimuMapView) => { view.view.on(\'click\', (event) => { fetch(\'https://your-analytics-server.com/track\', { method: \'POST\', headers: { \'Content-Type\': \'application/json\' }, body: JSON.stringify({ event: \'map_click\', coordinates: { x: event.mapPoint.x, y: event.mapPoint.y }, timestamp: new Date().toISOString() }) }); }); }; return ( <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={trackInteraction} /> ); }
  2. Harita widget’ıyla birlikte kullanın.
  3. Analitik verilerini bir sunucuya kaydedin.
  4. Performans testi yapın (Lighthouse).
• Sonuç: Harita etkileşimlerini izleyen bir analitik sistemi.
• İpucu: Büyük veri setlerinde önbellekleme kullanın.

Örnek 3: Survey123 ile Geri Bildirim Panosu (İleri Seviyesi)

• Amaç: Survey123 ile kapsamlı bir geri bildirim panosu oluşturma.
• Widget’lar: Survey, Harita, Tablo.
• Adımlar:
  1. ArcGIS Online’da bir Survey123 formu oluşturun (ör. memnuniyet anketi).
  2. Survey Widget’ı ekleyin, formu bağlayın.
  3. Harita Widget’ı ekleyin, geri bildirim konumlarını görselleştirin.
  4. Tablo Widget’ı ekleyin, geri bildirimleri listeleyin.
  5. Action: Harita seçimi Tablo’yu güncelleyin.
  6. Erişilebilirlik testi yapın:
     • ARIA etiketleri ekleyin.
     • Klavye navigasyonunu kontrol edin.
  7. Analitik verilerini ArcGIS Online’da analiz edin.
• Sonuç: Kapsamlı bir geri bildirim panosu.
• İpucu: Survey123 formlarını kısa tutun.

Örnek 4: Afet Yönetimi için Analitik ve Geri Bildirim Sistemi (Uzman Seviyesi)

• Amaç: Gerçek zamanlı afet verileriyle analitik ve geri bildirim toplayan bir uygulama.
• Widget’lar: Harita (3D), Analiz, Tablo, Survey, Özel Analitik Widget’ı.
• Adımlar:
  1. Özel Analitik Widget’ı oluşturun:// client/your-extensions/widgets/DisasterAnalyticsWidget/Widget.tsx import { React, WidgetProps, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function DisasterAnalyticsWidget(props: WidgetProps) { const trackInteraction = (view: JimuMapView) => { view.view.on(\'click\', (event) => { fetch(\'https://your-analytics-server.com/track\', { method: \'POST\', headers: { \'Content-Type\': \'application/json\' }, body: JSON.stringify({ event: \'disaster_map_click\', coordinates: { x: event.mapPoint.x, y: event.mapPoint.y }, timestamp: new Date().toISOString() }) }); }); }; return ( <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={trackInteraction} /> ); }
  2. Survey Widget’ı ekleyin, afet raporlama formu bağlayın.
  3. Harita Widget’ı (3D sahne) ekleyin, afet verilerini görselleştirin.
  4. Tablo Widget’ı ekleyin, geri bildirimleri listeleyin.
  5. Analiz Widget’ı ekleyin (Line of Sight).
  6. Action:
     • Harita seçimi Tablo ve Analiz’i güncelleyin.
     • Survey yanıtları Harita’yı güncelleyin.
  7. Erişilebilirlik:
     • ARIA etiketleri ve klavye navigasyonu ekleyin.
     • Ekran okuyucu testi yapın.
  8. Performans:
     • Önbellekleme ile veri yüklemelerini optimize edin.
     • Lighthouse ile performans testi yapın.
• Sonuç: Gerçek zamanlı analitik ve geri bildirim sistemi.
• İpucu: Analitik verilerini düzenli olarak yedekleyin.

12.7 En İyi Uygulamalar ve İpuçları

• Analitik:
  • Yalnızca gerekli verileri toplayın.
  • Performans etkisini azaltmak için önbellekleme kullanın.
• Geri Bildirim:
  • Formları kısa ve kullanıcı dostu tutun.
  • Kullanıcı gizliliğine saygı gösterin.
• Erişilebilirlik:
  • WCAG 2.1 standartlarına uyun.
  • Klavye navigasyonu ve ekran okuyucu desteği sağlayın.
• Güvenlik:
  • HTTPS ve kimlik doğrulama kullanın.
  • Analitik verilerini şifreli bir şekilde saklayın.

12.8 Sorun Giderme

• Analitik Hataları: API çağrılarını ve sunucu bağlantılarını kontrol edin.
• Geri Bildirim Hataları: Form gönderimlerini ve Webhook’ları test edin.
• Erişilebilirlik Sorunları: ARIA etiketlerini ve klavye navigasyonunu doğrulayın.
• Performans Sorunları: Önbellekleme ve veri sıkıştırma kullanın.

12.9 Kaynaklar

• ArcGIS Survey123 Dokümantasyonu
• Google Analytics Dokümantasyonu
• ArcGIS Experience Builder Geliştirici Kılavuzu
• WCAG 2.1 Kılavuzu