Nutzerflüsse aufzeichnen, wiederholen und messen

Sofia Emelianova
Sofia Emelianova

Sehen Sie sich den neuen Bereich Rekorder (Vorabversion) mit dem Video unten an.

In dieser Anleitung erfahren Sie, wie Sie mit dem Bereich Rekorder Nutzerflüsse aufzeichnen, wiederholen und messen.

Weitere Informationen dazu, wie Sie aufgezeichnete Nutzerflüsse freigeben, bearbeiten und die dazugehörigen Schritte bearbeiten, finden Sie in der Referenz zu Rekorder-Funktionen.

Rekorder-Bereich öffnen

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

    Rekorder im Menü.

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

    Zeigt den Rekorder-Befehl im Menü „Command“ (Befehl) an.

Einleitung

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

In den nächsten Abschnitten erfahren Sie, wie Sie den folgenden Bezahlvorgang über den Bereich Rekorder aufzeichnen, wiedergeben und prüfen:

  1. Fügen Sie einen Kaffee in den Warenkorb.
  2. Fügen Sie einen weiteren Kaffee in den Einkaufswagen.
  3. Rufen Sie die Einkaufswagenseite auf.
  4. Nimm 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 Aufzeichnung starten.
  2. Geben Sie in das Textfeld Name der Aufzeichnung „Kaffee bezahlen“ ein. Starten Sie eine neue Aufzeichnung.
  3. Klicken Sie auf die Schaltfläche Neue Aufzeichnung starten. Die Aufzeichnung wird gestartet. Im Steuerfeld wird Aufzeichnung... angezeigt, was bedeutet, dass die Aufzeichnung läuft. Aufzeichnung läuft.
  4. Klicke auf Cappuccino, um ihn in den Einkaufswagen zu legen.
  5. Klicke auf Americano, um das Produkt in den Einkaufswagen zu legen. Der Rekorder zeigt die Schritte an, die Sie bisher ausgeführt haben. Schritte im Rekorder-Bereich.
  6. Rufen Sie die Einkaufswagenseite auf und entfernen Sie Americano aus dem Einkaufswagen.
  7. Klicken Sie auf die Schaltfläche Gesamt: 19,00 $, um den Bezahlvorgang zu starten.
  8. Füllen Sie im Formular mit den Zahlungsdetails die Textfelder Name und E-Mail aus und klicken Sie das Kästchen Ich möchte Benachrichtigungen zu Bestellungen und Werbenachrichten erhalten an. Formular mit Zahlungsdetails.
  9. Klicken Sie auf die Schaltfläche Senden, um den Bezahlvorgang abzuschließen.
  10. Klicken Sie im Bereich Rekorder auf Aufzeichnung beenden. Aufzeichnung beenden, um die Aufzeichnung zu beenden.

Einen User Flow wiederholen

Nachdem Sie einen User Flow aufgezeichnet haben, können Sie ihn noch einmal abspielen, indem Sie auf die Schaltfläche Noch einmal abspielen.Replay (Erneute Wiedergabe) klicken.

Sie können den User Flow auf der Seite noch einmal sehen. Der Wiedergabefortschritt wird auch im Bereich Rekorder angezeigt.

Wenn Sie bei der Aufzeichnung einen Fehler gemacht haben oder etwas nicht funktioniert, können Sie Fehler im User Flow beheben: Verlangsamen Sie die Wiedergabe, setzen Sie einen Haltepunkt und führen Sie ihn Schritt für Schritt aus.

Langsames Netzwerk simulieren

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

Einstellungen für die erneute Wiedergabe.

In Zukunft werden möglicherweise weitere Einstellungen unterstützt. Teile uns die gewünschten Einstellungen für die Wiedergabe mit.

Einen 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 wichtiger User Flow einer Shopping-Website. Im Bereich Rekorder können Sie den Bezahlvorgang einmalig erfassen und regelmäßig analysieren.

Wenn Sie auf die Schaltfläche Leistung messen klicken, wird zuerst eine erneute Aufrufabfolge von Webseiten ausgelöst. Anschließend wird das Leistungs-Trace im Steuerfeld Leistung geöffnet.

Weitere Informationen zum Analysieren der Laufzeitleistung Ihrer Seite über das Steuerfeld Leistung Sie können das Web Vitals-Kästchen im Bereich Leistung aktivieren, um die Web Vitals-Messwerte aufzurufen und Möglichkeiten zur Verbesserung des Surfens für Nutzer zu ermitteln.

Bereich „Leistung“.

Schritte bearbeiten

Sehen wir uns die grundlegenden Optionen zur Bearbeitung der Schritte im aufgezeichneten Workflow an.

Eine umfassende Liste der Bearbeitungsoptionen finden Sie unter Schritte bearbeiten in der Funktionsreferenz.

Schritte einblenden

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

Im Rekorder-Bereich wurde das Cappuccino-Element erweitert, um Typ, Ziel, Selektoren, Versatz X und Versatz Y anzuzeigen.

Der obige Schritt zeigt zwei Selektoren. Weitere Informationen

Bei der Wiedergabe des User Flows versucht der Rekorder, das Element mit einem der Selektoren nach Sequenz abzufragen. Wenn der Rekorder beispielsweise das Element mit dem ersten Selector erfolgreich abfragt, wird der zweite Selector übersprungen und es wird mit dem nächsten Schritt fortgefahren.

Selektoren zu einem Schritt hinzufügen und daraus entfernen

Sie können Selektoren hinzufügen oder entfernen. Sie können beispielsweise Selektor 2 entfernen, da in diesem Fall nur aria/Cappuccino ausreicht. Bewegen Sie den Mauszeiger auf Selektor 2 und klicken Sie auf -, um ihn zu entfernen.

Im Rekorder-Bereich der Entwicklertools wird eine Option zum Entfernen einer Auswahl angezeigt.

Selektoren in einem Schritt bearbeiten

Die Auswahl kann ebenfalls bearbeitet werden. Wenn Sie beispielsweise Mocha statt Cappuccino auswählen möchten, haben Sie folgende Möglichkeiten:

  1. Ändern Sie den Auswahlwert stattdessen in aria/Mocha.

    Selector bearbeiten.

    Alternativ können Sie auf die Schaltfläche AuswählenSchaltfläche „Auswählen“. und dann auf der Seite auf Mocha klicken.

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

  3. Versuchen Sie, andere Eigenschaften des Schritts zu bearbeiten, z. B. type, target oder value.

Schritte hinzufügen und entfernen

Sie haben auch die Möglichkeit, Schritte hinzuzufügen und zu entfernen. Dies ist nützlich, wenn Sie einen zusätzlichen Schritt hinzufügen oder einen versehentlich hinzugefügten Schritt entfernen möchten. Anstatt den User Flow neu aufzuzeichnen, können Sie ihn einfach bearbeiten:

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

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

  2. Sie können Schritt entfernen auswählen, um ihn zu entfernen. Beispielsweise ist das Ereignis Scrollen nach dem Schritt Mocha nicht erforderlich.

  3. Angenommen, Sie möchten warten, bis die neun Kaffees auf der Seite angezeigt werden, bevor Sie weitere Schritte ausführen. Wählen Sie im Schrittmenü Mocha die Option Schritt hinzufügen vor aus. Der neue Schritt „Assert Element“ wurde hinzugefügt und kann jetzt bearbeitet werden.

  4. Bearbeiten Sie in Assert Element den neuen Schritt mit den folgenden Details:

    • Typ: waitForElement
    • Selektor 1: .cup
    • Operator: == (klicken Sie auf die Schaltfläche Operator hinzufügen)
    • count: 9 (klicken Sie auf add count) Der neue Schritt für das Bezahlen bei Kaffee wurde mit den oben genannten Details aktualisiert.
  5. Noch einmal abspielen.Wiederholen Sie den Ablauf jetzt, um die Änderungen zu sehen.

Nächste Schritte

Herzlichen Glückwunsch, Sie haben die Anleitung abgeschlossen!

Weitere Funktionen und Workflows (z. B. Import und Export) des Rekorders finden Sie in der Referenz zu Rekorder-Funktionen.