Nutzerflüsse aufzeichnen, wiederholen und messen

Im Video unten sehen Sie den neuen Bereich Aufzeichnung (Vorabversion).

In diesem Tutorial erfahren Sie, wie Sie mit dem Steuerfeld Aufzeichnung User Flows aufzeichnen, wiedergeben und analysieren.

Weitere Informationen zum Freigeben, Bearbeiten und Ändern der aufgezeichneten Nutzerflüsse und ihrer Schritte finden Sie in der Referenz zu den Funktionen des Rekorders.

Bereich „Aufzeichnung“ öffnen

  1. Öffnen Sie die Entwicklertools.
  2. Klicken Sie auf Weitere Optionen   Mehr.   > Weitere Tools > Aufzeichnung.

    „Aufzeichnung“ im Menü.

    Alternativ können Sie das Befehlsmenü verwenden, um den Bereich Aufzeichnung zu öffnen.

    Befehl „Aufzeichnung“ im Menü „Befehl“ anzeigen

Einführung

Wir verwenden die Demoseite für die Kaffeebestellung. Der Bezahlvorgang ist ein gängiger User Flow auf Shopping-Websites.

In den folgenden Abschnitten erfahren Sie, wie Sie den folgenden Bezahlvorgang mit dem Bereich Aufzeichnung aufzeichnen, wiedergeben und prüfen:

  1. Legen Sie einen Kaffee in den Einkaufswagen.
  2. Fügen Sie dem Einkaufswagen einen weiteren Kaffee hinzu.
  3. Rufe die Seite „Einkaufswagen“ auf.
  4. Entfernen Sie einen Kaffee aus dem Einkaufswagen.
  5. Starten Sie den Bezahlvorgang.
  6. Geben Sie die Zahlungsdetails ein.
  7. Gehen Sie zur Kasse.

User Flow aufzeichnen

  1. Öffnen Sie diese Demoseite. Klicken Sie auf die Schaltfläche Neue Aufnahme starten, um zu beginnen.
  2. Geben Sie „coffee checkout“ in das Textfeld Aufzeichnungsname ein. Starten Sie eine neue Aufnahme.
  3. Klicken Sie auf die Schaltfläche Neue Aufnahme starten. Die Aufzeichnung wird gestartet. Im Steuerfeld wird Aufzeichnen… angezeigt, was bedeutet, dass die Aufzeichnung läuft. Aufnahme läuft.
  4. Klicken Sie auf Cappuccino, um ihn in den Einkaufswagen zu legen.
  5. Klicken Sie auf Americano, um ihn in den Einkaufswagen zu legen. Im Aufzeichnungstool werden die Schritte angezeigt, die Sie bisher ausgeführt haben. Schritte im Bereich „Aufzeichnung“
  6. Rufen Sie die Seite „Einkaufswagen“ auf und entfernen Sie Americano aus dem Einkaufswagen.
  7. Klicken Sie auf die Schaltfläche Gesamt: 19,00 €, um mit dem Bezahlvorgang zu beginnen.
  8. Fülle im Formular für Zahlungsdetails die Textfelder Name und E-Mail aus und setze ein Häkchen in das Kästchen Ich möchte Benachrichtigungen zu Bestellungen und Werbenachrichten erhalten. Formular für Zahlungsdetails
  9. Klicke auf die Schaltfläche Senden, um den Bezahlvorgang abzuschließen.
  10. Klicken Sie im Bereich Aufnahme auf die Schaltfläche Beenden Sie die Aufnahme. Aufzeichnung beenden, um die Aufnahme zu beenden.

User Flow wiedergeben

Nachdem Sie einen Nutzerfluss aufgezeichnet haben, können Sie ihn wiedergeben, indem Sie auf die Schaltfläche Wiederholen.Wiedergeben klicken.

Sie können sich die Aufzeichnung des Nutzerflusses auf der Seite ansehen. Der Fortschritt der Wiedergabe wird auch im Bereich Aufzeichnung angezeigt.

Wenn Sie während der Aufzeichnung einen Fehlklick gemacht haben oder etwas nicht funktioniert, können Sie den Nutzerfluss debuggen: Verlangsamen Sie die Wiedergabe, setzen Sie einen Haltepunkt und führen Sie sie Schritt für Schritt aus.

Langsames Netzwerk simulieren

Sie können eine langsame Netzwerkverbindung simulieren, indem Sie die Wiedergabeeinstellungen konfigurieren. Maximieren Sie beispielsweise die Wiedergabeeinstellungen und wählen Sie im Drop-down-Menü Netzwerk die Option Langsames 3G aus.

Einstellungen für die erneute Wiedergabe

Möglicherweise werden in Zukunft weitere Einstellungen unterstützt. Teile uns mit, welche Einstellungen du dir für die Wiederholung wünschst.

User Flow messen

Sie können die Leistung eines Nutzerflusses messen, indem Sie auf die Schaltfläche Leistung messen klicken. Der Bezahlvorgang ist beispielsweise ein kritischer User Flow einer Shopping-Website. Im Bereich Aufzeichnung können Sie den Bezahlvorgang einmal aufzeichnen und regelmäßig messen.

Wenn Sie auf die Schaltfläche Leistung messen klicken, wird zuerst der User Flow noch einmal abgespielt und dann die Leistungsaufzeichnung im Bereich Leistung geöffnet.

Im Bereich Leistung können Sie die Laufzeitleistung Ihrer Seite analysieren. Sie können das Kästchen Web Vitals im Bereich Leistung aktivieren, um die Web Vitals-Messwerte aufzurufen und Verbesserungsmöglichkeiten für die Nutzerfreundlichkeit zu ermitteln.

Bereich „Leistung“

Schritte bearbeiten

Sehen wir uns die grundlegenden Optionen zum Bearbeiten der Schritte im aufgezeichneten Workflow an.

Eine umfassende Liste der Bearbeitungsoptionen finden Sie in der Referenz zu den Funktionen unter Schritte zur Bearbeitung.

Schritte einblenden

Maximieren Sie die einzelnen Schritte, um die Details der Aktion zu sehen. Maximieren Sie beispielsweise den Schritt Element „Cappuccino“ anklicken.

Im Steuerfeld für die Aufzeichnung wurde das Cappuccino-Element maximiert, um Typ, Ziel, Auswahlen, X- und Y-Offset zu sehen.

Im obigen Schritt sind zwei Selektoren zu sehen. Weitere Informationen finden Sie unter Auswahlschaltfläche für die Aufzeichnung.

Beim Abspielen des Nutzerflusses versucht der Aufzeichnungstool, das Element mit einer der Auswahlen nach Sequenz abzufragen. Wenn der Aufzeichner beispielsweise das Element mit der ersten Auswahl erfolgreich abfragt, überspringt er die zweite Auswahl und fährt mit dem nächsten Schritt fort.

Auswählen hinzufügen und aus einem Schritt entfernen

Sie können beliebige Auswahlschaltflächen hinzufügen oder entfernen. Sie können beispielsweise Auswahl 2 entfernen, da in diesem Fall nur aria/Cappuccino ausreicht. Bewegen Sie den Mauszeiger auf die Auswahl 2 und klicken Sie auf -, um sie zu entfernen.

Im Bereich „Aufzeichnung“ der DevTools wird eine Option zum Entfernen einer Auswahl angezeigt.

Auswählen in einem Schritt bearbeiten

Auch die Auswahl kann bearbeitet werden. Wenn Sie beispielsweise Mokka anstelle von Cappuccino auswählen möchten, haben Sie folgende Möglichkeiten:

  1. Ändern Sie den Wert des Selektors stattdessen in aria/Mocha.

    Selektor bearbeiten

    Alternativ können Sie auf die Schaltfläche AuswählenWählen Sie die Schaltfläche aus. und dann auf der Seite auf Mocha klicken.

  2. Wiederholen Sie den Ablauf jetzt. Es sollte Mokka anstelle von Cappuccino ausgewählt werden.

  3. Versuchen Sie, andere Schritteigenschaften wie Typ, Ziel und Wert zu bearbeiten.

Schritte hinzufügen und entfernen

Außerdem haben Sie die Möglichkeit, Schritte hinzuzufügen oder zu entfernen. Das ist hilfreich, wenn Sie einen zusätzlichen Schritt hinzufügen oder einen versehentlich hinzugefügten Schritt entfernen möchten. Anstatt den Nutzerfluss noch einmal aufzuzeichnen, können Sie ihn einfach bearbeiten:

  1. Klicken Sie mit der rechten Maustaste auf den Schritt, den Sie bearbeiten möchten, oder auf das Dreipunkt-Menü Dreipunkt-Menü daneben.

    Das Drop-down-Menü eines Schritts mit Optionen zum Entfernen und Hinzufügen von Schritten davor oder danach.

  2. Sie können Schritt entfernen auswählen, um ihn zu entfernen. Das Ereignis Scroll nach dem Schritt Mocha ist beispielsweise nicht erforderlich.

  3. Angenommen, Sie möchten warten, bis die 9 Kaffee auf der Seite angezeigt werden, bevor Sie weitere Schritte ausführen. Wähle im Menü Mocha die Option Schritt davor hinzufügen aus. Der neue Schritt „Element prüfen“ wurde hinzugefügt und kann jetzt bearbeitet werden.

  4. Bearbeiten Sie unter Element prüfen den neuen Schritt mit den folgenden Details:

    • type: waitForElement
    • Auslöser 1: .cup
    • Operator: == (auf Schaltfläche Operator hinzufügen klicken)
    • Anzahl: 9 (auf die Schaltfläche Anzahl hinzufügen klicken) Der neue Schritt für die Kaffeebestellung wurde mit den oben genannten Details aktualisiert.
  5. Wiederholen.Wiederholen Sie den Ablauf jetzt, um die Änderungen zu sehen.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben die Anleitung abgeschlossen.

Weitere Informationen zu Funktionen und Workflows (z. B. Import und Export) im Zusammenhang mit dem Aufzeichnungstool finden Sie in der Referenz zu Aufzeichnungstool-Funktionen.