Mobil Uygulamada Kullanıcı Davranışı Kaydı: React Native

Mobil uygulamada kullanıcı davranışı kaydı, kullanıcının ekranlar arasında nasıl gezindiğini, nereye dokunduğunu ve nerede takıldığını sonradan izlemenizi sağlar. Araçlar bunu ya ekran görüntüleri alarak ya da ekrandaki öğelerin yapısını ve metnini kaydederek yapar. React Native’de yapı tabanlı yöntem, kaydı hafif tutar ve kullanıcının yazdığı değerleri cihazdan çıkmadan maskelemeyi kolaylaştırır.

Mobil uygulamalarda sorunları yeniden üretmek webden daha zordur. Kullanıcıların telefon modelleri, işletim sistemi sürümleri, ekran boyutları ve bağlantı koşulları çok farklıdır. “Ödeme ekranında buton çalışmıyor” diyen bir müşterinin yaşadığını ekipte kimse kendi cihazında göremeyebilir. Oturum kaydı, bu durumda destek ekibine ve geliştiricilere tahmin yerine somut bir kayıt sunar; mağaza yorumlarında dile getirilen şikâyetlerin kaynağını bulmayı da hızlandırır.

Mobil uygulamada oturum kaydı nasıl çalışır?

Web sitelerinde oturum kaydı, tarayıcıdaki sayfa yapısını kaydeder. Mobil uygulamalarda böyle ortak bir yapı yoktur, bu yüzden araçlar iki farklı yoldan birini seçer.

Ekran görüntüsü tabanlı kayıt

Uygulama belirli aralıklarla ekranın görüntüsünü alır ve bunları sunucuya gönderir. İzlerken kayıt bir video gibi görünür ve uygulamanın her pikseli yerindedir. Buna karşılık görüntüler daha fazla veri tutar, maskeleme için ekranda gizlenecek bölgelerin görüntü üzerinde doğru tespit edilmesi gerekir ve genellikle yerel bir modül kurulumu ister.

Yapı ve metin tabanlı kayıt

Uygulama ekrandaki öğeleri, yani görünümleri, metinleri, konumları ve boyutları kaydeder. İzlerken ekran bu bilgilerden yeniden çizilir; sonuç birebir bir ekran görüntüsü değil, uygulamanızın sadık bir tel kafes görünümüdür. Metinler gerçek metin olarak kaydedildiği için okunaklıdır, aranabilir ve çevrilebilir. Veri miktarı düşüktür, maskeleme ise değer gönderilmeden önce öğe düzeyinde yapılır.

React Native’de neler kaydedilir, neler kaydedilmez?

AnyReplay’in React Native kaydedicisi ikinci yöntemi kullanır. Ekrandaki öğe ağacını belirli aralıklarla okur ve son okumadan bu yana değişenleri kaydeder. Neyin kaydedildiğini ve sınırları bilmek, beklentinizi doğru kurmanızı sağlar.

• Kaydedilir: öğe türleri, metinler, konum ve boyutlar, köşe yuvarlaklığı ve kenarlık gibi bazı görsel özellikler.
• Kaydedilir: dokunuşlar, parmak kalktığı anda (kaydırma ya da kaydırarak geçiş dokunuş sayılmaz), kaydırma konumları ve bir saniye içinde neredeyse aynı noktaya yapılan üç dokunuştan oluşan öfkeli dokunuşlar.
• Kaydedilir: ekran geçişleri. NavigationContainer ile bağladığınızda her ekran kendi rota adıyla görünür.
• Kaydedilir: platform, işletim sistemi sürümü, ekran boyutu ve dil gibi cihaz bilgileri; her oturum hangi platformun ve uygulama sürümünün kaydettiğini gösterir.
• Kısmen kaydedilir: FlatList gibi listelerde yalnızca o anda ekranda oluşturulmuş satırlar vardır; kayıtta geri kaydırdığınızda listenin tamamını göremezsiniz.
• Kaydedilmez: özel yerel bileşenler metinsiz, bilinmeyen bir kutu olarak görünür.
• Kaydedilmez: canvas, harita, web görünümü ve video içerikleri; bunlar etiketli kutu olarak görünür.
• Kaydedilmez: cihazın fotoğraf galerisindeki ya da önbelleğindeki görseller hiç okunmaz.

Tüm ayrıntılar React Native kurulum dokümantasyonunda (İngilizce) yer alıyor. Kaydedici React Native’in yeni mimarisini gerektirir; güncel React Native ve Expo sürümlerinde yeni projeler bu mimariyle başlar.

Performans ve veri kullanımı nasıl etkilenir?

Mobil kullanıcılar pil ve mobil veri konusunda hassastır; bir analiz aracının uygulamayı yavaşlatması kabul edilemez. Yapı tabanlı kayıtta bir ekranın ilk karesi birkaç kilobayt tutar. Sonraki karelerde yalnızca değişen öğeler gönderilir. Kullanıcı bir ekranda hiçbir şey yapmadan duruyorsa hiçbir veri gönderilmez.

Hacmi daha da azaltmak için örnekleme oranıyla kullanıcıların yalnızca bir kısmını kaydedebilirsiniz. Karar kullanıcı başına bir kez verilir; AsyncStorage gibi bir depolama verdiğinizde aynı kullanıcı sonraki açılışlarda da aynı sonucu alır. Proje başına aylık oturum sınırı da ek bir güvenlik ağıdır. Oturumun son birkaç saniyesi uygulama arka plana geçtiğinde gönderilir; işletim sistemi uygulamayı uyarı vermeden kapatırsa bu son saniyeler kaybolabilir.

Gizlilik: TextInput maskeleme nasıl çalışır?

Mobil uygulamalarda kullanıcılar giriş bilgileri, adres, kart bilgisi ve mesaj gibi hassas veriler yazar. Mobil SDK web ile aynı şekilde çalışır: maskAllInputs varsayılan olarak açıktır, yani kullanıcının TextInput içine yazdıkları siz maskAllInputs: false demedikçe maskelenir. Maskeleme cihazda, veri gönderilmeden önce yapılır; maskelenen öğe kutusunu korur ama metnini kaybeder.

• Her TextInput değeri varsayılan olarak maskelidir, maskAllInputs: false yazılanları kaydeder; maskAllTyping: true her alanı maskeler ve başka bir ayarla gevşetilemez.
• secureTextEntry kullanan her bileşen, adı ne olursa olsun, hiçbir ayarla açılamayacak şekilde maskelenir.
• textContentType ya da autoComplete değeri şifreyi, tek kullanımlık kodu veya kart alanını işaret eden alanlar, keyboardType="visible-password" alanları ve placeholder, accessibilityLabel, testID ya da nativeID metni ödeme veya kimlik alanı gibi okunan alanlar her ayarda maskelidir.
• testID değeri ar-mask içeren öğeler maskelenir; ekranda görünen ad, bakiye ya da adres gibi metinler için bunu kullanın. maskImages: true ise görsel adreslerini hiç kaydetmez.
• Maskelenen değerler cihazdan hiç çıkmadığı için oturum çevirisinde de çevrilmez.

Sınırı açıkça söylemek gerekir: maskAllInputs: false ile, hiçbir özelliği olmayan düz bir <TextInput /> kendisi hakkında bir şey söylemediği için kaydedilir — tıpkı webde işaretlenmemiş bir alan gibi. Posta kodu, e-posta adresi, telefon numarası ve kullanıcı adı da bu zeminin dışındadır. Hassas alanlara bir textContentType, bir autoComplete ya da ar-mask içeren bir testID verin veya varsayılanı koruyup konuyu kapatın.

Onay tarafında da web ile aynı yaklaşım geçerlidir: onay gelene kadar kayıt yapmayacak şekilde ayarlayabilirsiniz. Kullanıcının seçimini örneğin AsyncStorage içinde kendiniz saklar, uygulama açılışında consent(true) çağırırsınız. Maskeleme ayrıntıları maskeleme dokümantasyonunda (İngilizce). KVKK açısından genel çerçeve için KVKK ve oturum kaydı yazımıza bakabilirsiniz.

Olay tabanlı analitik araçlarından farkı ne?

Firebase Analytics gibi olay tabanlı araçlar, sizin tanımladığınız olayları sayar: uygulama açıldı, ürün görüntülendi, satın alma tamamlandı. Bu sayılar hunileri ve eğilimleri görmek için vazgeçilmezdir. Ama bir kullanıcı satın alma ekranında neden durduğunu anlatmaz. Oturum kaydı ise o kullanıcının ekranda ne gördüğünü ve ne yaptığını gösterir.

İkisini birleştirmek için önemli anları track() ile işaretleyebilir, kullanıcı kimliğini identify() ile ekleyebilirsiniz. Böylece destek ekibiniz şikâyet eden kullanıcının oturumunu hızla bulur.

Expo ile çalışır mı?

Evet. @anyreplay/react-native saf JavaScript olduğu için yerel modül, yapılandırma eklentisi ya da yeniden derleme gerektirmez. Expo Go’da, geliştirme ve üretim derlemelerinde çalışır; ekranın kaydı için gereken New Architecture, Expo SDK 52’den itibaren varsayılan olarak açıktır. Uygulama koduna iki satır eklemeniz yeterlidir: kaydediciyi başlatan init() çağrısı ve uygulamayı saran <AnyReplay> bileşeni. Projede izinli alan adları tanımlıysa uygulamanın bundle id’sini İzinli uygulamalar listesine ekleyip aynı değeri appId olarak verin. Expo Router ile ekran adlarının nasıl alınacağı Expo kurulum dokümantasyonunda (İngilizce) anlatılıyor.

import { init, AnyReplay } from '@anyreplay/react-native';

init({ projectKey: 'PROJE_ANAHTARINIZ' });

export default function App() {
  return <AnyReplay>{/* uygulamanız */}</AnyReplay>;
}

Mobil oturum kaydı için kontrol listesi

1. Uygulamanızın React Native’in yeni mimarisiyle çalıştığını doğrulayın.
2. Uygulama için web sitesinden ayrı bir proje açın.
3. Kaydı onay akışınıza bağlayın ve kullanıcının seçimini saklayın.
4. Ekranda görünen ad, bakiye, adres gibi metinleri ar-mask ile işaretleyin.
5. Hassas alanları maskeli tutun: varsayılanı koruyun ya da maskAllInputs: false kullanıyorsanız alanlara textContentType, autoComplete veya ar-mask içeren bir testID verin.
6. Kendi cihazınızda bir oturum kaydedip bu alanların gerçekten maskelendiğini kontrol edin.
7. Ekran adlarının kayıtta anlamlı görünmesi için gezinme takibini ekleyin.
8. Kritik adımları track() ile işaretleyin.
9. Örnekleme oranını ve aylık oturum sınırını trafiğinize göre ayarlayın.
10. Aydınlatma metninize mobil uygulamadaki kaydı da ekleyin.

Ayrıntılar için React Native özellik sayfasına göz atabilir, sorularınız için iletişim sayfasından bize ulaşabilirsiniz.