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
- Öffnen Sie die Entwicklertools.
Klicken Sie auf Weitere Optionen > Weitere Tools > Aufzeichnung.
Alternativ können Sie das Befehlsmenü verwenden, um den Bereich Aufzeichnung zu öffnen.
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:
- Legen Sie einen Kaffee in den Einkaufswagen.
- Fügen Sie dem Einkaufswagen einen weiteren Kaffee hinzu.
- Rufe die Seite „Einkaufswagen“ auf.
- Entfernen Sie einen Kaffee aus dem Einkaufswagen.
- Starten Sie den Bezahlvorgang.
- Geben Sie die Zahlungsdetails ein.
- Gehen Sie zur Kasse.
User Flow aufzeichnen
- Öffnen Sie diese Demoseite. Klicken Sie auf die Schaltfläche Neue Aufnahme starten, um zu beginnen.
- Geben Sie „coffee checkout“ in das Textfeld Aufzeichnungsname ein.
- 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.
- Klicken Sie auf Cappuccino, um ihn in den Einkaufswagen zu legen.
- Klicken Sie auf Americano, um ihn in den Einkaufswagen zu legen. Im Aufzeichnungstool werden die Schritte angezeigt, die Sie bisher ausgeführt haben.
- Rufen Sie die Seite „Einkaufswagen“ auf und entfernen Sie Americano aus dem Einkaufswagen.
- Klicken Sie auf die Schaltfläche Gesamt: 19,00 €, um mit dem Bezahlvorgang zu beginnen.
- 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.
- Klicke auf die Schaltfläche Senden, um den Bezahlvorgang abzuschließen.
- Klicken Sie im Bereich Aufnahme auf die Schaltfläche 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 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.
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.
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 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.
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:
Ändern Sie den Wert des Selektors stattdessen in aria/Mocha.
Alternativ können Sie auf die Schaltfläche Auswählen und dann auf der Seite auf Mocha klicken.
Wiederholen Sie den Ablauf jetzt. Es sollte Mokka anstelle von Cappuccino ausgewählt werden.
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:
Klicken Sie mit der rechten Maustaste auf den Schritt, den Sie bearbeiten möchten, oder auf das Dreipunkt-Menü daneben.
Sie können Schritt entfernen auswählen, um ihn zu entfernen. Das Ereignis Scroll nach dem Schritt Mocha ist beispielsweise nicht erforderlich.
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.
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)
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.