jQuery sollte nur für Edge Cases verwendet werden.
Wir empfehlen, jQuery so wenig wie möglich zu verwenden. Webanwendungen ändern sich ständig und kleine Updates der Benutzeroberfläche und des Seitenaufbaus können jQuery außer Kraft setzen.
Die integrierte Elementauswahl von WalkMe passt sich ohne die Verwendung von jQuery an Änderungen in der zugrunde liegenden Anwendung an.
Kurzübersicht
jQuery ist eine JavaScript-Bibliothek, die zur Identifizierung und Manipulation von HTML-Elementen auf einer Seite verwendet wird. Während WalkMe eine sofort einsatzbereite Elementauswahl bietet, die sich an Änderungen der Benutzeroberfläche anpasst, fungieren jQuery-Selektoren als leistungsstarke Alternative für Randfälle.
Diese Selektoren identifizieren Elemente auf der Grundlage bestimmter Merkmale wie ID, Klasse, Typ und Attribute.
Anwendungsfälle
Wir empfehlen, jQuery sparsam zu verwenden, um die Build-Stabilität aufrechtzuerhalten. Es ist jedoch ein wichtiges Werkzeug für die folgenden Aufgaben:
- Onboarding-Ziele erstellen: Definieren Sie Ziele basierend auf einem Bildschirmelement.
- Launcher konfigurieren: Geben Sie bestimmte Selektoren in die Registerkarte Ausgewähltes Element ein
- Werte erfassen: Erfassen Sie Benutzervariablen oder Bildschirmtext für dynamische Ankündigungen.
- Seitenbedingungen überprüfen: Verwenden Sie die Rule Engine, um Elementattribute zu analysieren.
Funktionsweise
Befolgen Sie diese Schritte, um benutzerdefinierte Selektoren in Ihren WalkMe-Inhalten zu erstellen, zu testen und zu implementieren.
🎓 Digital Adoption Institute
Verfügbare Rule Engine-Operatoren
Wenn Sie den Regeltyp jQuery in der Regel-Engine verwenden, verwenden Sie diese Operatoren, um Ihre Logik zu definieren:
- Wahr: Mindestens ein Element wurde gefunden
- Falsch: Es wurden keine Elemente gefunden
- Sichtbar: Das Element ist derzeit auf der Seite sichtbar
- Text ist/ist nicht: Der Elementtext entspricht Ihrer Eingabe oder entspricht nicht
- Hinweis: Wenn der Selector mehr als ein Element zurückgibt, wird der Text aller Elemente als ein Element zusammengefasst.
- Größer als/Weniger als: Der Wert liegt über oder unter einer ganzen Zahl
- Like/Not Like: Bedeutet eine komplizierte Textsyntax
- Länge ist / ist nicht / größer als / weniger als: Die Anzahl der von der Abfrage zurückgegebenen Elemente
- Finden Sie die genaue Abfrage-Länge: wmjQuery(“element.value”).length
Anmerkung
Der WalkMe Editor unterstützt nur Selektoren, die in einer jQuery-Syntax bis einschließlich jQuery 1.8.3 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.
Wir empfehlen, auch den jQuery Selector Optimizer von WalkMe zu verwenden.
Allgemeine jQuery-Selektoren
Verwenden Sie diese Muster, um Elemente innerhalb Ihrer Anwendung zu identifizieren:
- Element: Suchen Sie ein bestimmtes HTML-Element anhand seines Tag-Namens
- element[attribute]: Suchen Sie ein Element, das ein bestimmtes Attribut enthält
- element[attribute][attribute]: Suchen Sie ein Element, das mehreren Attributen gleichzeitig entspricht.
- Element[attribute= value=""]: Finden Sie eine genaue Übereinstimmung für ein Attribut und seinen Wert.
- element[attribute^= text=""]: Suchen Sie ein Element, bei dem das Attribut mit einem bestimmten Text beginnt.
- Element[attribute*= text=""]: Suchen Sie ein Element, dessen Attribut einen bestimmten Text irgendwo in der Zeichenfolge enthält.
- Element[attribute!= text=""]: Suchen Sie ein Element, das nicht den angegebenen Attributtext enthält.
- element child-element: Suchen Sie ein verschachteltes untergeordnetes Element (das Leerzeichen zeigt eine Eltern-Kind-Beziehung an).
- element:checked: Ermitteln Sie den Status eines Kontrollkästchens oder einer Optionsschaltfläche.
- [element]:visible: Überprüfen Sie, ob ein bestimmtes Element derzeit auf der Seite sichtbar ist
- element:contains(Text): Suchen Sie ein Element basierend auf der bestimmten Textzeichenfolge, die es enthält
- element:eq(#): Suchen Sie einen bestimmten Index in einer Liste der Ergebnisse (beachten Sie, dass die Zählung bei 0 beginnt).
Schritt 1: Erstellen Sie den Selektor
- Suchen Sie das Element in der HTML-Datei, indem Sie mit der rechten Maustaste darauf klicken und Element untersuchen auswählen.
- Identifizieren Sie eindeutige Merkmale wie Klasse, ID oder Stil
- Entwerfen Sie Ihren Selektor mit der Syntax: Element → Selektor → Wert
- Beispiel (ID): ul#create-account
- Beispiel (Klasse): ul.nav
Erstellen Sie jQuery mit Ihren WalkMe-Daten
Sie können jetzt vorhandene WalkMe-Daten zugunsten eines jQuery-Selektors verwenden.
Dies kann erreicht werden, indem Sie dem gewünschten Selektor „${wm-data-key}“ hinzufügen. Beispiel: der Selektor: [id=], wird das „${key}“ durch die tatsächlichen WalkMe-Daten ersetzt und sieht wie folgt aus:[id=”value”]
Schritt 2: Testen Sie in der Konsole
Hinweis: Sie müssen die Editor-Erweiterung aktiviert haben, um diese Methode zu verwenden.
- Öffnen Sie die Entwicklerwerkzeuge Ihres Browsers und wählen Sie die Registerkarte Konsole aus.
- Geben Sie wmjQuery("your-selector-here") ein und drücken Sie die Eingabetaste.
- Bewegen Sie den Mauszeiger über die zurückgegebenen Objekte in der Konsole, um sicherzustellen, dass das richtige Element auf dem Bildschirm hervorgehoben ist.
Schritt 3: Implementierung im Editor
Nach der Überprüfung können Sie Ihren Selektor an mehreren Orten anwenden:
- Registerkarte Ausgewähltes Element: Verwendung für die Identifizierung eines bestimmten Schritts oder Launchers
- Zusätzliche Schritt-Auslöser: Verwenden Sie, um Schritte beim Klick oder Bewegen des Mauszeigers auszulösen.
- Rich Text Editor: Verwenden Sie dies, um dynamischen Text in Sprechblasen oder ShoutOuts anzuzeigen.
- Regel-Engine: Wählen Sie den jQuery-Regeltyp aus, um komplexe Logik zu erstellen.
Schritt 4: Optimieren Sie die Leistung
Um die bestmögliche Benutzererfahrung zu gewährleisten, vergleichen Sie die Geschwindigkeit Ihrer Selektoren:
- Geben Sie das folgende Skript in Ihre Konsole ein: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Führen Sie den Befehl mehrmals aus, um die durchschnittliche Ausführungszeit zu ermitteln.
- Wählen Sie die Version mit der niedrigsten durchschnittlichen Zeit aus.
Tipp
Denken Sie daran, dass jQuery in Ihren WalkMe-Builds sparsam und immer in Kombination mit leichteren Bedingungen verwendet werden sollte. Weitere Informationen finden Sie im folgenden Artikel: WalkMe Performance Best Practices
Technische Hinweise
- Für Websites, die Shadow DOM verwenden, können Sie wmjQuery nicht in der DevTools-Konsole ausführen. Verwenden Sie stattdessen diese Syntax:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
