İçeriğe geç
AnyReplay
Satış ekibiyle görüşün
Giriş yapÜcretsiz başlayın

Oturum kaydı · Web ve React Native

Her kullanıcının oturumunu izleyin. Kendi dilinizde.

AnyReplay, web ve React Native uygulamalarınızda olup biteni kaydeder ve kaydedilen arayüzü istediğiniz anda çevirir. Böylece İstanbul’daki destek ekibiniz, Berlin’den gelen bir oturumu tek bir butonda ne yazdığını tahmin etmeden takip edebilir.

Ücretsiz başlayınKayıt olmadan demoyu izleyinSatış ekibiyle görüşün
Free planı: 1 proje, ayda 500 oturumKredi kartı gerekmez~35 KB gzip tarayıcı SDK’sı
Koyu bir zeminde akan çivit mavisi ve camgöbeği ışık şeritleri; bir oturumun zaman çizelgesini çağrıştırıyor

Nasıl çalışır

Kurulumdan içgörüye üç adımda

  1. 01

    Kodu ekleyin

    Web için tek bir script etiketi, React Native için iki satır. Tarayıcı SDK’sı gzip ile yaklaşık 35 KB’tır ve derleme adımı gerektirmez; mobil SDK native modül içermediği için SDK 52 ve sonrasında Expo Go’da da çalışır.

  2. 02

    Oturumlar gelmeye başlar

    Kayıtlar, origin izin listesiyle korunan ayrı bir veri alım (ingest) servisine akar. Kurulum sihirbazı kurulumu gerçek bir oturumla doğrular; yani çalıştığını kullanıcılarınızdan önce siz bilirsiniz.

  3. 03

    Kendi dilinizde izleyin

    Oynatıcıda bir dil seçin. Kaydedilen metinler istendiği anda çevrilir, organizasyon genelinde önbelleğe alınır ve oynatmaya geri yerleştirilir — Almanca bir ödeme sayfası karşınıza Türkçe çıkar.

Ürün

Bir oturum kaydı aracından beklediğiniz her şey — ve hiçbirinin yapmadığı o tek şey

Kullanıcılarının hepsi ekibin çalıştığı dili konuşmayan ekipler için geliştirildi. Aşağıdaki her iddia bir sunum slaytıyla değil, kod deposundaki bir testle güvence altında.

Oturum çevirisi

Aynı oturum, sizin çalıştığınız dilde

Çeviri, sayfa kurulduktan sonra üstüne boyanmaz; sayfa kurulmadan önce kaydedilen olay akışına uygulanır. Başlıklar başlık, butonlar kısa, maskelenmiş girdiler maskeli kalır; ürün adları da organizasyonunuzdaki tüm projelerde paylaşılan bir sözlük sayesinde olduğu gibi korunur.

Kullanıcının gördüğü

de
  • headingIhre Bestellung wird vorbereitet
  • buttonZur Kasse
  • labelLieferadresse
  • input••••••••••
  • linkRückgabebedingungen
  • textDer Versand erfolgt innerhalb von 2 Werktagen.

Sizin incelediğiniz

tr
  • headingSiparişiniz hazırlanıyor
  • buttonÖdemeye geç
  • labelTeslimat adresi
  • input••••••••••
  • linkİade koşulları
  • textKargo 2 iş günü içinde teslim edilir.
Çeviri nasıl çalışır

Güvenlik ve gizlilik

Başkasının DOM’unu ekrana çizmek, bir oturum kaydı aracının yaptığı en tehlikeli iş

Bu yüzden oynatıcı her kaydı potansiyel bir saldırı olarak ele alır. Script gövdeleri müşterinin sayfasından hiç çıkmaz, arada sızan her şey noscript olarak yeniden kurulur ve oynatma iframe’i script çalıştırmayan bir sandbox içinde çalışır. Gerçek bir tarayıcıda doğrulandı, testlerle korunuyor.

Argon2id ile parola hash’leme
OWASP parametreleriyle, testle güvence altında. Yenileme token’ları her kullanımda yenilenir; tekrar kullanılan bir token tüm token ailesini iptal eder.
Veri alımında origin izin listesi
Proje anahtarı HTML’inizde yer alır ve tasarım gereği herkese açıktır. Asıl erişim denetimi, bir sayfanın taklit edemeyeceği sunucu tarafı Origin kontrolüdür.
Denetim kaydı
Yetki değişiklikleri, silmeler ve anahtar yenilemeleri için yalnızca eklenebilen kayıtlar; sahipler ve yöneticiler okuyabilir.
Saklama denetimi
Kayıtlar, kuruluş bazında belirlediğiniz takvime göre, birkaç saatte bir çalışan bir temizleyici tarafından silinir.
Gizlilik modelini inceleyin
Arkasında maskelenmiş alanları temsil eden bulanık dikdörtgenler bulunan, çivit mavisi parlayan çok yüzlü cam bir kalkan

Kurulum

Temsili bir görsel değil, gerçek kod

Bu, kurulum sihirbazının size verdiği yükleyicinin ta kendisi; yalnızca anahtar yerine bir yer tutucu var. Yükleyici anahtarı URL’sinde taşır; böylece sihirbaz “kurulmamış” ile “kurulmuş ama engelleniyor” durumlarını ayırt edebilir — çözümleri bambaşka iki sorun.

Web — </head> etiketinden önce yapıştırın

index.html
<script>
(function (w, d) {
  w.anyreplay = w.anyreplay || function () {
    (w.anyreplay.q = w.anyreplay.q || []).push(arguments);
  };
  var s = d.createElement('script');
  s.async = 1;
  s.src = 'https://cdn.anyreplay.com/v1/ar.min.js?k=ar_pk_live_your_project_key';
  d.head.appendChild(s);
})(window, document);

anyreplay('init', {
  projectKey: 'ar_pk_live_your_project_key',
  ingestUrl: 'https://in.anyreplay.com',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Form fields are masked: what visitors type replays as asterisks.
  // Passwords, one-time codes and card fields are masked either way.
  // Uncomment the first line to record what visitors type, or the
  // second to hide rich-text editors too.
  // maskAllInputs: false,
  // maskAllTyping: true
});
</script>

React Native — native modül yok, Expo Go’da çalışır

App.tsx
npm install @anyreplay/react-native

// App.tsx
import { AnyReplay, init, trackNavigation } from '@anyreplay/react-native';

init({
  projectKey: 'ar_pk_live_your_project_key',
  ingestUrl: 'https://in.anyreplay.com',
  // Your bundle id (iOS) or package name (Android). Required once the project lists allowed domains or apps.
  // appId: 'com.example.app',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Fields are masked: what people type replays as asterisks. Secure
  // fields, passwords, one-time codes and card fields are masked either
  // way. Uncomment the first line to record what people type, or the
  // second to mask every field in a way nothing can weaken.
  // maskAllInputs: false,
  // maskAllTyping: true
});

export default function Root() {
  return (
    <AnyReplay>
      <NavigationContainer ref={(ref) => { if (ref) trackNavigation(ref); }}>
        <App />
      </NavigationContainer>
    </AnyReplay>
  );
}

npm paketi (@anyreplay/browser), Next.js Script parçacığı ve Google Tag Manager etiketi olarak da kullanılabilir.

Fiyatlandırma

Ücretsiz başlayın. İhtiyaç duydukça büyüyün.

Free bir demo değil, gerçekten kullanılan bir plan: bir proje, ayda 500 oturum, 14 gün saklama süresi ve tüm diller. Ücretli planlar daha fazla proje, daha yüksek hacim ve daha uzun saklama süresi sunar.

Ücretsiz başlayınTüm planları görünSatış ekibiyle görüşün

  • 1 proje

    Web veya React Native

  • 500 oturum / ay

    Deterministik örnekleme sizi sınırın içinde tutar

  • 14 gün saklama

    Takvime göre silinir, denetim kaydına işlenir

  • Tüm diller

    Çeviri ve beş dilli panel dahil

SSS

Kurmadan önce en çok sorulanlar

AnyReplay neleri kaydeder?

Web’de rrweb tabanlı SDK; DOM anlık görüntülerini, değişiklikleri (mutation), tıklamaları, kaydırmaları, girdileri (varsayılan olarak maskeli; parola ve ödeme alanları her zaman) ve gezinmeyi kaydeder. React Native’de ise ekran görüntüsü yerine uygulamanın oluşturduğu öğe ağacını — öğe türlerini, metni ve yerleşimi — kaydeder; bu sayede kayıt küçük ve çevrilebilir olur. Ionic, Cordova ve Electron uygulamalarını ise aynı web SDK’sı, her biri için küçük bir paket üzerinden kaydeder. Flutter uygulamalarını pub.dev’deki paket, React Native’de olduğu gibi kelime ve kutulardan oluşan bir ağaç olarak kaydeder. Tauri paketi önizleme aşamasında; native iOS ya da Android SDK’sı ise henüz yok.

Çeviri nasıl çalışır?

İnceleyen kişi bir dil seçtiğinde, kaydedilen olay akışındaki metinler bir bağlam ipucuyla (başlık, buton, etiket, girdi, bağlantı, metin) çıkarılır, bir yapay zekâ modeliyle toplu hâlde çevrilir, içerik hash’ine göre organizasyon genelinde önbelleğe alınır — yani bir proje bir metni bir kez çevirdiğinde, aynı organizasyondaki diğer projeler de bu çeviriyi kullanır — ve oynatma yeniden kurulmadan önce akışa geri yerleştirilir. Ürün adları organizasyon genelindeki sözlükle sabitlenebilir.

Kullanıcı girdileri kaydediliyor mu?

Varsayılan olarak hayır: her form alanı maskelenir. Yarıda kalan bir ödemenin kaydında insanların ne yazdığını görmek isterseniz bunu tek satır açar; parolalar, kart numaraları, CVV’ler ve ödeme alanı olarak işaretlenmiş alanlar her yapılandırmada maskeli kalır. Bir diğer satır zengin metin editörlerini de, bir CSS sınıfı da tek tek öğeleri maskeler. Hepsi, hiçbir şey gönderilmeden önce tarayıcıda olur ve her kural testlerle güvence altındadır.

Kaydedilen bir sayfa panelimizde kod çalıştırabilir mi?

Hayır. Script gövdeleri kayıt anında değiştirilir, script’ler noscript olarak yeniden kurulur ve oynatma iframe’i allow-scripts olmadan sandbox içinde çalışır. Bu izin bir gün açılırsa bir test derlemeyi durdurur.

Free planı neleri kapsıyor?

Bir proje, ayda 500 oturum, 14 gün saklama süresi ve tüm diller; kredi kartı gerekmez. Ücretli planlar için fiyatlandırma sayfasına göz atın.

Panel hangi dilleri destekliyor?

İngilizce, Türkçe, Almanca, İspanyolca ve Fransızca. Oturum çevirisi de bugün aynı beş dile sunuluyor; talep üzerine yeni diller eklenebilir.

Tarayıcı SDK’sı ne kadar büyük?

gzip ile yaklaşık 35 KB; CI’da 45 KB’lık bir boyut bütçesiyle denetlenir. Asenkron yüklenir ve sayfanızı asla engellemez.

Her oturumu kendi dilinizde izleyin.

Dakikalar içinde kurun, Free planını dilediğiniz kadar kullanın. Bir proje ve ayda 500 oturum, ücretsiz.

Ücretsiz başlayınSatış ekibiyle görüşün