Wie funktionieren Session Replays?

TL;DR

Session-Replay-Tools nehmen keine Videos von User-Sessions auf. Stattdessen erfasst ein Skript einen Snapshot vom Ausgangszustand der Seite, die Änderungen während der Session und die User-Events über die gesamte Session hinweg (zusammen mit einigen Custom Events).

Durch diese Art der Erfassung lassen sich private Daten herausfiltern. Aus demselben Grund beeinträchtigt Mouseflow auf deiner Website weder die User Experience noch braucht es viel Speicherplatz.

Beim Abspielen kehren Session-Replay-Tools diesen Prozess um und rekonstruieren die Webseite und die User-Aktionen aus den erfassten Daten.

Lies weiter, wenn du es genauer wissen willst!

Session-Replay-Tools werden oft mit virtuellen Überwachungskameras für Websites verglichen. Für Einsteiger*innen ist dieser Vergleich zwar hilfreich, die Technologie hinter Session Replays ist aber deutlich komplexer als eine simple Videoaufnahme.

In diesem Artikel schauen wir uns die Mechanismen hinter einem der wichtigsten Behavior-Analytics-Tools an und erklären dir im Detail, wie Session Recordings wirklich funktionieren.

Link kopierenLink kopiert

Let’Starten wir mit einer Definition. Ein Session-Replay-Tool (wie das von Mouseflow) ist ein Feature, mit dem du die Journey von Besucher*innen durch eine Website oder Web-App abspielen kannst.

Dabei wird sowohl nachgebildet, was User tatsächlich in ihrem Browser gesehen haben, als auch, was sie auf der Website gemacht haben. Also Mausbewegungen und Klicks, Taps auf dem Bildschirm, Scrollen, Tastatureingaben und Interaktionen mit verschiedenen Website-Elementen wie Formularen, Buttons, Menüs und mehr.

Mit Session Replays lässt sich die Interaktion von Usern mit einer Website oder App so nachbilden, dass sie genau die Experience widerspiegelt, die sie hatten.

Der Hauptzweck von Session Replays ist es, die Customer Experience zu verbessern und mögliche Hindernisse in der User Journey auf einer Website zu erkennen. Session Recordings bieten aber noch viele weitere kreative Einsatzmöglichkeiten über diese Kernfunktionen hinaus: Bugs und Fehler finden, User-Verhalten analysieren, Probleme für Support-Anfragen nachstellen und vieles mehr.

Mehr Use Cases für Session Recordings findest du in unserem Artikel über 7 Dinge, die du aus Aufzeichnungen deiner Website-Besucher*innen lernen kannst.

Session Replays sehen meist aus wie Videoaufnahmen, in denen die komplette Session eines Users abgespielt wird. Dabei werden die Interaktionen auf der Website in der Regel hervorgehoben, damit du sie besser sehen kannst. Hier ein Beispiel für ein Session Recording von Mouseflow:

So sieht ein Session Recording in Mouseflow aus

 

Auch wenn Session Recordings wie Videos aussehen, nutzen die meisten Session-Replay-Tools keine echte Videoaufnahme. Die Wiedergabe ist vielmehr eine exakte Rekonstruktion dessen, was User auf einer Website tatsächlich gesehen und womit sie interagiert haben.

Was uns direkt zur nächsten Frage bringt …

Link kopierenLink kopiert

Das Prinzip von Session Replays wirkt auf den ersten Blick ganz einfach, ist in Wirklichkeit aber deutlich komplexer.

Warum sind Session Replays also nicht einfach Videos mit echter Bildschirmaufnahme? Weil dieser Ansatz einige gravierende Nachteile mit sich bringt:

  • Bandbreite und Speicherplatz: Videoaufnahmen brauchen sehr viel Speicherplatz. Sie vom Computer der Besucher*innen an den Webserver zu übertragen, würde viel Bandbreite verbrauchen und die User Experience verschlechtern.
  • Datenschutz und Compliance: Vollständige Videoaufnahmen könnten sensible oder personenbezogene Daten erfassen. Das wirft Datenschutzbedenken auf und kann zu Konflikten mit gesetzlichen Vorgaben führen.
  • Sicherheitsrisiken: Wenn komplette Sessions aufgezeichnet werden, könnten auch Login-Daten oder vertrauliche Informationen erfasst werden. Im Fall eines Datenlecks wäre das ein echtes Sicherheitsrisiko.
  • Eingeschränkte Suche und ineffiziente Analyse: Videos lassen sich nur schwer indexieren oder durchsuchen, was es schwierig macht, bestimmte Interaktionen zu finden. Die Analyse von Videoinhalten ist deshalb zeitaufwendig, weil du lange Aufnahmen in Echtzeit anschauen musst.

Aber was wird dann eigentlich aufgezeichnet? Mouseflow und die meisten anderen Session-Replay-Tools erfassen die Struktur der Seite, die User besuchen (DOM), die Änderungen auf der Seite während der Session (DOM-Mutationen), die Aktionen der User mit den Elementen der Webseite und außerdem einige Metadaten.

Mehr über Behavior Analytics erfahren

Lade unseren Executive Guide zu Behavior Analytics herunter und erfahre, wie er dir bei deiner Arbeit helfen kann
Link kopierenLink kopiert

Das Document Object Model, kurz DOM, ist eine objektbasierte Darstellung einer Webseite. Es dient als Programmierschnittstelle, über die Programme und Skripte die Struktur, das Styling und die Inhalte einer Webseite dynamisch verändern können.

Das DOM ist wie ein Baum aufgebaut, bei dem jeder Zweig in einem Knoten endet. Jeder Knoten enthält Objekte, die bestimmte Teile der Webseite darstellen.

Document Object Model explained in a diagram

Du kannst dir HTML und das DOM als zwei leicht unterschiedliche Arten vorstellen, eine Webseite zu beschreiben. Das gute alte HTML liefert die statische Struktur und den Inhalt einer Seite, das DOM ist dagegen eine dynamische, interaktive Darstellung dieser Webseite.

Und da heute die meisten Webseiten dynamisch und interaktiv sind, ist das DOM für die Webentwicklung ziemlich nützlich. Wenn eine Webseite im Browser lädt, erstellt der Browser zum Beispiel aus den zugehörigen HTML- und CSS-Dateien eine DOM-Darstellung der Seite.

DOM-Mutationen sind demnach Änderungen an der Struktur oder am Inhalt eines Webdokuments, die nach dem ersten Laden der Seite dynamisch passieren. Typische Beispiele für DOM-Mutationen sind neue Elemente, die zu einer Webseite hinzugefügt werden, bestehende Elemente, die entfernt werden, geänderte Attribute oder Inhalte innerhalb von Elementen und eine neue Anordnung von Elementen.

Solche Änderungen passieren meist als Reaktion auf User-Interaktionen, ausgelöst durch Skripte, die auf der Seite laufen. Das DOM verändert sich zum Beispiel, wenn das Karussell auf der Startseite einer Website von einem Banner zum nächsten wechselt, neue Inhalte hinzufügt und die Struktur der Seite aktualisiert. Ein weiteres Beispiel für eine DOM-Mutation ist, wenn du auf einen Menüpunkt klickst und sich ein Untermenü öffnet.

Session-Replay-Tools wie Mouseflow unterstützen auch das Shadow DOM, wobei sich der Support je nach Anbieter unterscheidet.

Link kopierenLink kopiert

Wie du dir wahrscheinlich schon gedacht hast, bilden das ursprüngliche DOM und die darauffolgenden DOM-Mutationen zusammen das Session Recording. Es gibt aber noch einen weiteren entscheidenden Bestandteil: die Interaktionen der User mit den Elementen der Webseite. Diese stammen größtenteils aus JavaScript-Events.

In manchen Situationen reichen diese Events aber nicht aus, und dann braucht es Custom Events. Nehmen wir zum Beispiel an, ein User füllt ein Formularfeld aus und füllt es dann vor dem Absenden noch einmal neu aus.

Aus Sicht von JavaScript ist das ein einziges Event. Bei der Analyse der User Experience kann dieses erneute Ausfüllen aber genau den Moment zeigen, in dem User verwirrt sind oder zögern. Aus Sicht der Behavior Analytics ist das ein wichtiges Event. Deshalb ist es entscheidend, diese Interaktion genau so aufzuzeichnen, wie sie passiert ist. Und weil es kein JavaScript-Event gibt, das das erfasst, müssen wir ein Custom User Event aufzeichnen.

Und das war’s auch schon. Ein Session Recording in einem Tool wie Mouseflow besteht aus::

  • Ursprüngliches DOM (Document Object Model): Es erfasst den Zustand einer Webseite beim Laden.
  • DOM-Mutationen: Das sind die Änderungen, die auf einer Webseite passiert sind.
  • User-Events: Dazu gehören die Interaktionen der User, zum Beispiel Mausbewegungen, Klicks, Scrollen, Tastatur-Events und mehr. Sie stammen größtenteils aus JavaScript-Events, wir nutzen aber auch einige Custom Events.
  • Metadaten: Sie enthalten öffentlich verfügbare Daten wie Browserversion, Betriebssystemversion, Bildschirmauflösung, den Standort der Besucher*innen (abgeleitet aus der IP-Adresse, die selbst nicht gespeichert wird) und andere Informationen, die so gut wie jedes Web-Analytics-Tool erfasst.

Beim Abspielen geht Mouseflow im Grunde umgekehrt vor: Zuerst wird der ursprüngliche Zustand der Webseite aus dem ursprünglichen DOM wiederhergestellt. Dann werden die späteren Änderungen der Webseite während der Session aus den DOM-Mutationen rekonstruiert. Und schließlich werden die Interaktionen der User aus den aufgezeichneten Events darübergelegt. Mouseflow nutzt dieselben Events auch, um Heatmaps, Conversion-Funnels und mehr zu erstellen.

How session replay works: captured DOM, DOM mutations, custom and user events are combined with HTML, CSS and multimedia from the recorded website.

Einer der größten Vorteile dieses Ansatzes ist, dass beim Aufzeichnen der Session kaum Traffic entsteht. Wir reden hier von ein paar Kilobyte, nicht von Megabyte. So bleibt die Menge an übertragenen und gespeicherten Daten gering, und Session Replay beeinträchtigt die Performance deiner Website kaum.

Gleichzeitig können wir mit diesem Ansatz die komplette User Journey so erfassen, wie sie abläuft, und nicht nur einen Snapshot der Session. Und was die Qualität angeht: Die Wiedergabe sieht so aus, als wärst du selbst dabei gewesen, und nicht wie ein pixeliges, verschwommenes Video in niedriger Auflösung.

Außerdem können wir so die wichtigsten Events während der Session zusätzlich hervorheben, damit du sie klar erkennst.

Anders als bei einer klassischen Videoaufnahme lassen sich mit diesem Ansatz auch sensible Informationen ausschließen, bevor die Session-Daten übertragen werden. Das hilft dabei, die Privatsphäre der User zu schützen.

Link kopierenLink kopiert

Da das Session-Replay-Skript DOM-Daten und DOM-Mutationen im Browser der Besucherinnen erfasst, lassen sich sensible Informationen ausschließen, bevor die Daten an die Server von Mouseflow übertragen werden. Das senkt Datenschutz- und Sicherheitsrisiken.

Das Aufzeichnungsskript von Mouseflow ist zum Beispiel so konzipiert, dass es sensible Informationen in Feldern wie Passwörtern, Telefonnummern und Kreditkartendaten erkennt und ausschließt.

Sensible Informationen können aber auch an anderer Stelle auf einer Webseite auftauchen. Eine Telefonnummer, die in ein Formular eingegeben wurde, kann zum Beispiel später in einer Bestätigungsnachricht erscheinen. Damit solche Informationen nicht erfasst werden, nutzt Mouseflow Hashing, um übereinstimmende Werte zu erkennen und aus den Daten auszuschließen, die an die Server übertragen werden.

Mouseflow speichert die IP-Adressen von Besucherinnen nicht als Teil der Session Recordings. Mehr dazu erfährst du in unserem Help-Center-Artikel zur Anonymisierung von IP-Adressen.

Diese technischen Schutzmaßnahmen helfen, die Privatsphäre der Besucher*innen zu schützen. Ob Session Replay DSGVO-konform ist, hängt aber auch davon ab, wie es konfiguriert und eingesetzt wird. Mehr dazu in unserem Guide: Ist Session Replay DSGVO-konform?

 

Mouseflow erfasst und speichert die IP-Adressen von Besucher*innen nicht und lässt sich auch nicht entsprechend konfigurieren.

IP-Adressen gelten allgemein als personenbezogene Daten (PII). Zwar lässt sich eine bestimmte Person über eine IP-Adresse nur schwer identifizieren, und Browser brauchen eine IP-Adresse, um überhaupt im Internet kommunizieren zu können. Trotzdem gilt der Grundsatz, dass IP-Adressen zum Schutz und zur Sicherheit der User nicht erfasst oder gespeichert werden sollten. Mouseflow hält sich an diese Best Practice und erfasst und speichert keine IP-Adressen, da sie für die bereitgestellten Analysen nicht relevant sind.

 

Link kopierenLink kopiert

Session-Replay-Tools wie Mouseflow rekonstruieren User-Sessions aus dem ursprünglichen Document Object Model (DOM), den Änderungen auf der Seite (DOM-Mutationen), den User-Interaktionen und den Metadaten der Session.

Anders als bei einer klassischen Videoaufnahme lässt sich die User Experience so nachbilden, während die übertragene und gespeicherte Datenmenge gering bleibt. Außerdem können sensible Informationen schon vor der Übertragung ausgeschlossen werden, was die Privatsphäre der Besucher*innen schützt.

Wenn Teams wissen, wie Session Replay hinter den Kulissen funktioniert, verstehen sie die Technologie hinter den Aufzeichnungen besser, mit denen sie User-Verhalten und Website-Probleme untersuchen.