jQuery-Selektoren

Aktualisiert am Februar 10, 2021 Download PDFDownload as PDF
image_pdf

Bitte beachten Sie, dass dieser Artikel nur ein grundlegendes Verständnis für die Verwendung von Jquery-Selektoren in WalkMe vermittelt. Vorkenntnisse im Umgang mit Jquery-Selektoren sind empfehlenswert.

Kurzübersicht

jQuery ist eine Javascript-Bibliothek, die zur Manipulation einer HTML-Seite verwendet werden kann. CSS-Selektoren ermöglichen es Ihnen, Elemente in der HTML-Struktur anhand ihrer Merkmale wie z. B. ID, Klasse, Typ, Attribute oder Attributwerte zu identifizieren.

Unter bestimmten Umständen dienen jQuery-Selektoren als Alternative zum WalkMe-Algorithmus (Erfassungsmodus), um Elemente mit verbesserter Präzision, optimierter Leistung und der Möglichkeit, bestimmte Werte zu erfassen, zu identifizieren.

Ein jQuery-Selektor kann anhand der angegebenen Kriterien schnell ein Element im aktuellen Fenster finden. Die häufigsten jQuery-Selektoren im WalkMe-Editor werden wie folgt verwendet:

  • Onboarding-Ziele erstellen – Erstellen Sie Onboarding-Ziele basierend auf einem Bildschirmelement. Onboarding-Ziele werden ständig überprüft und der Einsatz von jQuery reduziert die Belastung auf Ihrer Website.
  • Ausgewähltes Element-Launcher – Fügen Sie den jQuery-Selektor in die Registerkarte „Selected Element“ eines Launchers ein, um die Leistung zu optimieren.
  • Werte erfassen – Erfassen Sie einen Wert aus einer Benutzervariablen oder einem Text auf dem Bildschirm, um ihn in eine dynamische Ankündigung einzubinden oder ihn in einer Regel zu verwenden.
  • Seitenbedingungen überprüfen – Veranlassen Sie WalkMe an, die Attribute eines Elements auf dem Bildschirm zu analysieren, um sie als Regeltyp in der Rule Engine zu verwenden.
  • Schwierige oder sich ändernde Elemente erfassen – Wählen Sie ein Element aus, dessen Attribute sich ändern können, z. B. seine Position auf der Website oder der Text, den es enthält. Alternativ können Sie den WalkMe-Algorithmus mit Präzision feinabstimmen.

Funktionsweise

Finden Sie das Element im HTML, indem Sie mit der rechten Maustaste auf dieses klicken und „Inspect Element“ auswählen. Das Element wird auf dem Bildschirm und im Entwicklerbereich (Developer Panel) markiert. Identifizieren Sie die eindeutigen Merkmale des Elements (wie Ort, Klasse, ID und Stil), um Ihren jQuery-Selektor zu erstellen. Elemente können anhand ihrer Position oder Attribute (Klasse, ID und Stil) identifiziert werden.

Schritt 1: Erstellen des jQuery-Selektors

Die grundlegende Syntax für die Verwendung von jQuery-Elementen in WalkMe ist: Element – Selektor – Wert. Nach der Identifizierung des Elements erstellen Sie einen jQuery-Selektor, der spezifisch das anschaut, was Sie interessiert. Nachstehend folgen einige Beispiele für jQuery-Selektoren:

  • ul element with id create-account: ul#create-account.
  • ul elements with class nav: ul.nav.
  • ul elements with class nav and class fl type: ul.nav.fl.

Weiter unten finden Sie eine Liste von nützlichen jQuery-Selektoren.

Schritt 2: Testen Ihres Selektors in der Konsole

  1. Geben Sie in der Befehlszeile im Entwickler-Bedienfeld wmjQuery(“”) mit Ihrem jQuery-Selektor zwischen den “” ein und drücken Sie die Eingabetaste.
    1. Bitte beachten Sie, dass Sie wmjQuery nur in einem Browser mit aktivierter Editor-Erweiterung verwenden können.
  2. Wenn Ihre Abfrage den gewünschten Wert zurückgibt, funktioniert Ihr Selektor! Um die ausgewählten Elemente auf dem Bildschirm anzuzeigen, klicken Sie auf den Link „More…“ (Weitere …).
  3. Bewegen Sie den Mauszeiger über die zurückgegebenen Objekte, um das hervorgehobene Element anzuzeigen.

Schritt 3: Verwenden von jQuery-Selektoren in WalkMe

Je nachdem, wie Sie das jQuery-Element verwenden möchten, kann jQuery in WalkMe in folgenden Bereichen eingesetzt werden:

  • Verwenden Sie das jQuery-Element, um ein Element für einen Schritt oder Launcher über die Registerkarte „Selected Element“ (Ausgewähltes Element) im Optionsmenü zu identifizieren.
  • Verwenden Sie das jQuery-Element, um den nächsten Schritt in einem Walk-Thru auszulösen. Dazu klicken Sie im Menü „Additional Step Triggers“ (Zusätzliche Schrittauslöser) auf das Element oder bewegen den Mauszeiger darüber.
  • Verwenden Sie das jQuery-Element, um einen Wert auf dem Bildschirm zu erfassen und als dynamischen Text im Rich Text Editor in einer Schritt-Sprechblase oder einem ShoutOut zu verwenden.
  • Verwenden Sie das jQuery-Element, um ein Ziel in der Registerkarte „Goal“ (Ziel) zu erstellen.
  • Verwenden Sie den jQuery-Selektor in der Rule Engine als Regeltyp (ähnlich wie jQuery als Regeltyp für Bildschirmelemente verwendet wird). Verfügbare Operatoren sind:
    • Wahr – Bedeutet, dass mindestens ein Element gefunden wurde.
    • Falsch – Bedeutet, dass keine Elemente gefunden wurden.
    • Sichtbar – Bedeutet, dass das Element sichtbar ist.
    • Text ist/ist nicht – Bedeutet, dass der Text der Texteingabe entspricht. Wenn der Selektor mehr als ein Element zurückgibt, wird der Text aller Elemente als ein Element zusammengefasst.
    • Größer als/Kleiner als – Bedeutet, dass der Wert über oder unter einer ganzen Zahl liegt.
    • Gefällt mir/Gefällt mir nicht – Bedeutet eine komplizierte Textsyntax.
    • Länge ist/ist nicht/Größer als/Kleiner als – Bedeutet gleich, größer oder kleiner als eine ganze Zahl. Wird verwendet, um abzufragen, wie viele Elemente die Abfrage zurückgibt. Erkennen Sie die genaue Abfragelänge in der Konsole: wmjQuery(„element.value“).length

Der Editor von WalkMe unterstützt nur Selektoren, die in der jQuery-Syntax bis zu der in jQuery 1.8.3 verwendeten Syntax geschrieben sind. Sie können jedoch jede Version von jQuery für andere Zwecke auf Ihrer Website verwenden, ohne einen Konflikt mit der WalkMe-Version von jQuery (wmjQuery) befürchten zu müssen. Bei weiteren Fragen wenden Sie sich bitte an [email protected].

Nützliche jQuery-Selektoren

Abfrage Beschreibung
Element Abfragen eines Elements
element[attribute] Abfragen eines Attributs eines Elements
element[attribute][attribute] Abfragen mehrerer Attribute eines Elements
element[attribute=“attribute value“] Abfragen eines Attributs eines Elements und dessen Wert
element[attribute^=“text“] Abfragetext am Anfang eines Attributs
element[attribute*=“text“] Abfragetext, der in einem Attribut enthalten ist
element[attribute!=“text“] Abfragetext, der von einem Attribut ausgeschlossen ist
element child-element Abfragen des untergeordneten Elements eines Elements (Leerzeichen zeigt an, dass das erste Element das übergeordnete Element des zweiten ist)
element:checked Abfragen des Status eines Kontrollkästchens (markiert oder nicht markiert)
[element=“]:mt_visible Abfragen, ob ein Element sichtbar ist
element:contains(Text) Abfrageelement enthält Text
element:eq(#) Abfragen spezifischer Ergebnisse in Reihenfolge (Zählung beginnt bei 0)

Testen Ihrer jQuery-Selektoren

Bei der Auswahl eines jQuery-Selektors ist es ratsam, mehrere zu vergleichen. Dadurch können Sie sicherstellen, dass Sie denjenigen auswählen, der die geringsten Auswirkungen auf die Leistung Ihrer Website/Anwendung hat. Führen Sie dazu die folgenden Schritte aus:

  1. Öffnen Sie die Entwicklertools Ihres Webbrowsers.
  2. Navigieren Sie zur Registerkarte „Console“ (Konsole) der Entwicklertools.
  3. Geben Sie „var time1 = window.performance.now(); wmjQuery(‚<your jQuery selector>‚); var time2 = window.performance.now(); console.log(time2 – time1);“ in die Konsole ein und klicken Sie auf die Eingabetaste auf Ihrer Tastatur.
    • Führen Sie diesen Befehl mehrmals in der Konsole aus, um ungefähr die durchschnittliche Zeit zu sehen, die er benötigt.
  4. Führen Sie denselben Befehl mit einigen alternativen jQuery-Selektoren aus und wählen Sie denjenigen, der am wenigsten Zeit für die Ausführung benötigt.

Probieren Sie es aus

Versuchen Sie, Ziele für Ihre Walk-Thrus auf der Basis von jQuery-Elementen zu erstellen.

  1. Identifizieren Sie ein Element, das den Abschluss eines Prozesses (Hauptziel) oder einer Phase in einem Prozess (Meilenstein-Ziel) darstellt.
  2. Öffnen Sie die Konsole und identifizieren Sie das Element „Build a Goal“ (Ein Ziel aufbauen) basierend auf dem jQuery-Element.
  3. Zeigen Sie Ihre Arbeit in der Vorschau an und prüfen Sie die Zielerreichung im Flow Tracker.

War dies hilfreich?

Vielen Dank für Ihr Feedback!

Weitere Informationen

< Zurück