Nutzerverhalten in React-Native-Apps analysieren

Um das Nutzerverhalten in einer React-Native-App zu verstehen, kombinieren Sie am besten eventbasierte App-Analyse mit Session Replay. Events zeigen, wie oft etwas passiert, die Aufzeichnung zeigt, wie es passiert. Für React Native gibt es dabei zwei technische Ansätze: Bildschirmfotos in kurzen Abständen oder die Aufzeichnung der Elementstruktur mit ihren Texten, die deutlich weniger Daten erzeugt.

Wie funktioniert Session Replay in Apps?

Im Web lässt sich das DOM aufzeichnen, also die Struktur, aus der der Browser die Seite zeichnet. In nativen Apps gibt es kein DOM. Anbieter lösen das auf zwei Arten:

Das SDK @anyreplay/react-native folgt dem zweiten Ansatz. Es liest den Elementbaum Ihrer App und zeichnet Struktur und Text auf, keine Bildschirmfotos. Es ist reines JavaScript, braucht kein natives Modul und keinen neuen nativen Build. Voraussetzung ist die New Architecture von React Native, die bei aktuellen Projekten Standard ist.

Was wird in React Native erfasst und was nicht?

• Erfasst: Elementtypen, Texte, Position und Größe der Elemente auf dem Bildschirm.
• Erfasst: Berührungen (ein Tippen, wenn der Finger sich hebt; Scrollen und Wischen zählen nicht als Tippen), Scrollpositionen und Bildschirmwechsel; Bildschirmnamen übernimmt das SDK aus dem NavigationContainer von React Navigation.
• Erfasst: Geräteangaben wie Plattform, Betriebssystemversion und Bildschirmgröße; jede Session zeigt, welche Plattform und App-Version sie aufgezeichnet hat.
• Nur teilweise: Bei einer FlatList erscheinen nur die Zeilen, die zum jeweiligen Zeitpunkt gerendert waren.
• Als Platzhalter: Eigene native Komponenten erscheinen als Kästen ohne Inhalt, weil es nichts Lesbares zu erfassen gibt.
• Nicht erfasst: Inhalte von Canvas-Flächen, Karten, Web-Views und Videos; sie erscheinen als beschriftete Kästen.
• Erfasst, solange Sie nicht maskieren: Werte in Eingabefeldern; Zugangs- und Zahlungsfelder bleiben immer verborgen, siehe Abschnitt zum Datenschutz.

Die vollständige Liste finden Sie in der Installationsanleitung für React Native (auf Englisch). Einen Überblick über das SDK gibt die Seite Session Replay für React Native.

Wie stark belastet die Aufzeichnung Performance und Datenvolumen?

Gerade bei Apps ist das eine berechtigte Frage, denn viele Nutzer sind mobil unterwegs. Beim strukturbasierten Ansatz ist der erste Frame eines Bildschirms nur wenige Kilobyte groß. Danach werden ausschließlich Änderungen übertragen, und ein Bildschirm, auf dem sich nichts tut, sendet gar nichts.

Zusätzlich steuern Sie die Menge über zwei Stellschrauben: Mit sampleRate legen Sie fest, welcher Anteil der Nutzer aufgezeichnet wird; die Entscheidung fällt einmal pro Nutzer. Über monatliche Obergrenzen pro Projekt verhindern Sie, dass ein unerwarteter Ansturm Ihr Kontingent aufbraucht. Details stehen in der Dokumentation zum Sampling (auf Englisch).

Beim Beenden oder Wechseln der App gilt eine Besonderheit: Gepufferte Daten werden gesendet, sobald die App in den Hintergrund geht. Beendet das Betriebssystem die App ohne Vorwarnung, können die letzten Sekunden einer Session fehlen. Für die Analyse von Bedienproblemen spielt das in der Regel keine große Rolle.

Wie schützen Sie Eingaben und Einwilligung in der App?

In Apps geben Menschen oft besonders sensible Daten ein: Zugangsdaten, Adressen, Gesundheits- oder Finanzinformationen. Das mobile SDK verhält sich wie das im Browser: maskAllInputs ist standardmäßig true, was jemand in ein TextInput tippt, wird also maskiert, solange Sie nicht maskAllInputs: false setzen. Maskiert wird auf dem Gerät, bevor etwas gesendet wird:

• Standardmäßig ist jedes TextInput maskiert, maskAllInputs: false zeichnet Eingaben auf; maskAllTyping: true maskiert jedes Feld und lässt sich nicht abschwächen, maskImages: true zeichnet keine Bildadressen auf.
• Alles mit secureTextEntry ist in jeder Konfiguration maskiert.
• Ebenso Felder, deren textContentType oder autoComplete ein Passwort, einen Einmalcode oder ein Kartenfeld benennt, Felder mit keyboardType="visible-password", Felder, deren placeholder, accessibilityLabel, testID oder nativeID nach Zahlungs- oder Zugangsdaten klingt, jeder Wert aus 13 bis 19 Ziffern, der die Kartenprüfung besteht, und bei einer Kartennummer, die gerade getippt wird, alles nach der sechsten Ziffer.
• Elemente, deren testID die Zeichenfolge ar-mask enthält, verlieren ihre Texte, behalten aber ihren Kasten.

Die Grenze gehört dazugesagt: Mit maskAllInputs: false wird ein nacktes <TextInput /> ohne Attribute, das nichts über sich selbst sagt, aufgezeichnet — genau wie ein nicht markiertes Feld im Web. Postleitzahlen, E-Mail-Adressen, Telefonnummern und Benutzernamen gehören ebenfalls nicht zum Sockel. Geben Sie sensiblen Feldern ein textContentType, ein autoComplete oder eine testID mit ar-mask — oder bleiben Sie beim Standard. Weil maskierte Werte das Gerät nie verlassen, werden sie auch bei der Übersetzung von Aufzeichnungen nie übertragen. Für die Einwilligung gilt dasselbe Prinzip wie im Web: Mit requireConsent: true zeichnet das SDK nichts auf, bis Ihre App consent(true) aufruft. Die Entscheidung speichern Sie selbst und geben sie bei jedem App-Start weiter. Die rechtlichen Hintergründe beschreibt der Artikel Session Replay und DSGVO; lassen Sie Ihr Setup von Ihrer Datenschutzbeauftragten prüfen.

Worin unterscheidet sich Session Replay von eventbasierter App-Analyse?

Beide Ansätze ergänzen sich. In AnyReplay setzen Sie mit track() eigene Events, etwa „Onboarding abgeschlossen“, und filtern die Session-Liste danach. Sessions mit unbehandelten Fehlern werden markiert. Funnel-Berichte oder A/B-Tests bietet AnyReplay nicht; dafür bleibt Ihr Analysewerkzeug zuständig.

Funktioniert das auch mit Expo?

Ja. Weil das SDK kein natives Modul enthält, läuft es ab Expo SDK 52 – mit der New Architecture, die es braucht – in Expo Go ebenso wie in Entwicklungs- und Produktions-Builds, ohne Konfigurations-Plugin und ohne Prebuild. Die Einbindung besteht aus zwei Zeilen App-Code: dem Aufruf von init() und dem Umschließen der App mit <AnyReplay>. Mit Expo Router melden Sie Bildschirmwechsel über screen(). Die Schritte zeigt die Anleitung für Expo (auf Englisch).

Aufzeichnungen aus der App erscheinen in derselben Session-Liste wie Ihre Web-Sessions. Arbeitet Ihr Support in mehreren Ländern, lassen sich die aufgezeichneten Texte auf Abruf ins Deutsche, Englische, Türkische, Spanische oder Französische übersetzen, siehe Session-Übersetzung.

Checkliste für die Einführung in Ihrer App

• Prüfen, ob die App die New Architecture nutzt.
• @anyreplay/react-native installieren, init() einmal auf Modulebene aufrufen und die App mit <AnyReplay> umschließen.
• Führt das Projekt erlaubte Domains, die Bundle-ID der App unter Erlaubte Apps eintragen und denselben Wert als appId übergeben.
• Bildschirmnamen über NavigationContainer oder bei Expo Router über screen() melden.
• requireConsent: true setzen und consent(true) an Ihre Einwilligungslösung koppeln.
• Entscheiden, ob Eingaben aufgezeichnet werden: beim Standard bleiben oder mit maskAllInputs: false aufzeichnen und sensiblen Feldern textContentType, autoComplete oder eine ar-mask-testID geben.
• Sensible Anzeigen außerhalb von Eingabefeldern mit testID und ar-mask kennzeichnen.
• Eigene Komponenten, Listen und Videos in einer Testaufzeichnung prüfen.
• sampleRate und monatliche Obergrenzen festlegen.
• Wichtige Schritte wie Registrierung oder Kauf mit track() markieren.
• Datenschutzerklärung der App aktualisieren und Speicherdauer festlegen.