Zum Inhalt springen
AnyReplay
Angebot anfragen
AnmeldenKostenlos starten

Session Replay · Web und React Native

Jede Session ansehen. In Ihrer Sprache.

AnyReplay zeichnet auf, was in Ihren Web- und React-Native-Apps passiert, und übersetzt die aufgezeichnete Oberfläche auf Abruf. So kann jemand in Berlin eine Session aus Istanbul nachvollziehen, ohne bei einem einzigen Button raten zu müssen, was darauf stand.

Kostenlos startenDemo ansehen, ohne AnmeldungAngebot anfragen
Free-Plan: 1 Projekt, 500 Sessions/MonatKeine Kreditkarte nötigBrowser-SDK mit ~35 KB (gzip)
Abstrakte Lichtbänder in Indigo und Cyan, die sich über einen dunklen Hintergrund ziehen und an die Zeitleiste einer Session erinnern

So funktioniert es

In drei Schritten von der Installation zu echten Einblicken

  1. 01

    Snippet installieren

    Ein Script-Tag fürs Web, zwei Zeilen für React Native. Das Browser-SDK ist gzip-komprimiert rund 35 KB groß und braucht keinen Build-Schritt; das Mobile-SDK kommt ohne natives Modul aus und läuft deshalb ab SDK 52 auch in Expo Go.

  2. 02

    Sessions kommen an

    Aufzeichnungen fließen an einen separaten Ingest-Service, der nur Daten von freigegebenen Origins annimmt. Der Einrichtungsassistent prüft die Installation anhand einer echten Session – Sie wissen also, dass alles funktioniert, bevor Ihre Nutzer überhaupt etwas davon merken.

  3. 03

    In Ihrer Sprache ansehen

    Wählen Sie im Player eine Sprache. Die aufgezeichneten Texte werden auf Abruf übersetzt, organisationsweit zwischengespeichert und wieder in das Replay eingesetzt – ein türkischer Checkout liest sich dann wie ein deutscher.

Produkt

Alles, was ein Replay-Tool können sollte – und das eine, was bisher keines konnte

Gebaut für Teams, deren Nutzer nicht alle die Sprache sprechen, in der das Team Sessions prüft. Jede Aussage auf dieser Seite ist durch einen Test im Repository abgesichert, nicht durch eine Folie.

Session-Übersetzung

Dieselbe Session – in der Sprache, in der Sie prüfen

Die Übersetzung wird auf den aufgezeichneten Event-Stream angewendet, bevor die Seite aufgebaut wird, statt nachträglich darübergelegt zu werden. Überschriften bleiben Überschriften, Buttons bleiben kurz, maskierte Eingaben bleiben maskiert, und Produktnamen überstehen die Übersetzung dank eines organisationsweiten Glossars unverändert, das für alle Projekte gilt.

Was der Nutzer sah

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.

Was Sie prüfen

de
  • headingIhre Bestellung wird vorbereitet
  • buttonZur Kasse
  • labelLieferadresse
  • input••••••••••
  • linkRückgabebedingungen
  • textDie Lieferung erfolgt innerhalb von 2 Werktagen.
So funktioniert die Übersetzung

Sicherheit und Datenschutz

Fremdes DOM zu rendern ist das Gefährlichste, was ein Replay-Tool tut

Deshalb behandelt der Player jede Aufzeichnung als potenziell feindlich. Script-Inhalte verlassen nie die Seite des Kunden, was dennoch durchrutscht, wird als noscript wiederhergestellt, und das Replay-iframe läuft in einer Sandbox ohne Script-Ausführung. In einem echten Browser verifiziert, durch Tests abgesichert.

Passwort-Hashing mit Argon2id
Mit OWASP-Parametern, per Test abgesichert. Refresh-Tokens rotieren, und ein wiederverwendetes Token widerruft seine gesamte Token-Familie.
Origin-Allowlist beim Ingest
Der Projektschlüssel steht in Ihrem HTML und ist bewusst öffentlich. Die Zugriffskontrolle übernimmt die serverseitige Origin-Prüfung, die eine Seite nicht fälschen kann.
Audit-Log
Append-only-Einträge zu Berechtigungsänderungen, Löschungen und Schlüsselrotationen, einsehbar für Inhaber und Administratoren.
Aufbewahrungsdauer
Aufzeichnungen werden pro Organisation nach dem von Ihnen festgelegten Zeitplan gelöscht – durch einen Bereinigungsjob, der alle paar Stunden läuft.
Zum Datenschutzmodell
Ein facettierter Glasschild mit indigofarbenem Leuchten, dahinter unscharfe Rechtecke als maskierte Felder

Installation

Das echte Snippet, kein Mock-up

Genau diesen Loader erhalten Sie im Einrichtungsassistenten, hier mit einem Platzhalter-Schlüssel. Der Loader trägt den Schlüssel in seiner URL, damit der Assistent „nicht installiert“ von „installiert, aber blockiert“ unterscheiden kann – zwei Probleme mit völlig unterschiedlichen Lösungen.

Web – vor </head> einfügen

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 – ohne natives Modul, läuft in Expo Go

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>
  );
}

Auch verfügbar als npm-Paket (@anyreplay/browser), als Next.js-Script-Snippet und als Tag für den Google Tag Manager.

Preise

Kostenlos starten. Wachsen, wenn es nötig ist.

Free ist ein vollwertiger Plan, keine Demo: ein Projekt, 500 Sessions pro Monat, 14 Tage Aufbewahrungsdauer und alle Sprachen. Bezahlte Pläne bieten mehr Projekte, mehr Volumen und eine längere Aufbewahrungsdauer.

Kostenlos startenAlle Pläne ansehenAngebot anfragen

  • 1 Projekt

    Web oder React Native

  • 500 Sessions / Monat

    Deterministisches Sampling hält Sie im Rahmen

  • 14 Tage Aufbewahrung

    Planmäßig gelöscht, im Audit-Log festgehalten

  • Alle Sprachen

    Übersetzung und Dashboard in fünf Sprachen inklusive

FAQ

Häufige Fragen vor der Installation

Was zeichnet AnyReplay auf?

Im Web zeichnet ein SDK auf Basis von rrweb DOM-Snapshots, Mutationen, Klicks, Scrollbewegungen, Eingaben (standardmäßig maskiert; Passwörter und Zahlungsfelder immer) und Navigation auf. In React Native erfasst es statt Screenshots den Elementbaum, den die App rendert – Elementtypen, Text und Layout –, sodass die Aufzeichnung klein bleibt und sich übersetzen lässt. Ionic-, Cordova- und Electron-Apps zeichnet dasselbe Web-SDK auf, jeweils über ein kleines eigenes Paket. Flutter-Apps zeichnet ein Paket auf pub.dev so auf wie React Native: als Baum aus Wörtern und Kästen. Ein Tauri-Paket gibt es als Vorschau, ein natives SDK für iOS oder Android noch nicht.

Wie funktioniert die Übersetzung?

Wählt jemand beim Ansehen eine Sprache, werden die Texte aus dem aufgezeichneten Event-Stream mit einem Kontexthinweis (Überschrift, Button, Label, Eingabefeld, Link, Text) extrahiert, stapelweise von einem KI-Modell übersetzt, organisationsweit über einen Content-Hash zwischengespeichert – ein einmal übersetzter Text wird also von allen Projekten der Organisation wiederverwendet – und wieder in den Stream eingesetzt, bevor das Replay aufgebaut wird. Produktnamen lassen sich über ein organisationsweites Glossar festlegen.

Werden Nutzereingaben aufgezeichnet?

Standardmäßig nicht: Jedes Formularfeld wird maskiert. Soll das Replay eines gescheiterten Checkouts zeigen, was Menschen getippt haben, schaltet eine Zeile das ein; Passwörter, Kartennummern, Prüfziffern und als Zahlungsdaten gekennzeichnete Felder bleiben in jeder Konfiguration maskiert. Eine zweite Zeile maskiert zusätzlich Rich-Text-Editoren, eine CSS-Klasse einzelne Elemente. Alles geschieht im Browser, bevor etwas gesendet wird, und jede Regel ist durch Tests abgesichert.

Kann eine aufgezeichnete Seite Code in meinem Dashboard ausführen?

Nein. Script-Inhalte werden schon bei der Aufzeichnung ersetzt, Scripts werden als noscript wiederhergestellt, und das Replay-iframe läuft in einer Sandbox ohne allow-scripts. Wird diese Berechtigung jemals aktiviert, schlägt der Build per Test fehl.

Was ist im Free-Plan enthalten?

Ein Projekt, 500 Sessions pro Monat, 14 Tage Aufbewahrungsdauer und alle Sprachen – ohne Kreditkarte. Die bezahlten Pläne finden Sie auf der Preisseite.

In welchen Sprachen ist das Dashboard verfügbar?

Englisch, Türkisch, Deutsch, Spanisch und Französisch. Die Session-Übersetzung wird heute in dieselben fünf Sprachen angeboten; weitere Sprachen sind auf Anfrage möglich.

Wie groß ist das Browser-SDK?

Gzip-komprimiert rund 35 KB, bei einem Budget von 45 KB, das in der CI geprüft wird. Es lädt asynchron und blockiert Ihre Seite nie.

Jede Session in Ihrer Sprache ansehen.

In wenigen Minuten installiert – und den Free-Plan behalten Sie, solange Sie möchten. Ein Projekt und 500 Sessions pro Monat, kostenlos.

Kostenlos startenAngebot anfragen