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 den Bedingungs-Builder, um Elementattribute zu analysieren.
Funktionsweise
Befolgen Sie diese Schritte, um benutzerdefinierte Selektoren in Ihren WalkMe-Inhalten zu erstellen, zu testen und zu implementieren.
Verfügbare Bedingungs-Builder-Operatoren
Wenn Sie den Regeltyp jQuery im Bedingungs-Builder 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 Abfragelä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.
Condition Builder
Common jQuery Selectors
Use these patterns to identify elements within your application:
- element: Locate a specific HTML element by its tag name
- element[attribute]: Locate an element that contains a specific attribute
- element[attribute][attribute]: Locate an element that matches multiple attributes simultaneously
- element[attribute="value"]: Locate an exact match for an attribute and its value
- element[attribute^="text"]: Locate an element where the attribute starts with specific text
- element[attribute*="text"]: Locate an element where the attribute contains specific text anywhere within the string
- element[attribute!="text"]: Locate an element that does not contain the specified attribute text
- element child-element: Locate a nested child element (the space indicates a parent-child relationship)
- element:checked: Locate the status of a checkbox or radio button
- [element]:visible: Verify if a specific element is currently visible on the page
- element:contains(Text): Locate an element based on the specific text string it contains
- element:eq(#): Locate a specific index in a list of results (note that the count starts at 0)
Step 1: Build the selector
- Locate the element in the HTML by right-clicking it and selecting Inspect Element
- Identify unique characteristics like class, ID, or style
- Draft your selector using the syntax: Element → Selector → Value
- Example (ID): ul#create-account
- Example (Class): 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: Bei dem Selektor: [id=], wird das „${key}“ durch die tatsächlichen WalkMe-Daten ersetzt und sieht dann wie folgt aus: [id=”value”].
Step 2: Test in the console
Note: You must have the Editor Extension enabled to use this method.
- Open your browser's Developer Tools and select the Console tab
- Type wmjQuery("your-selector-here") and press Enter
- Hover over the returned objects in the console to verify the correct element is highlighted on screen
Step 3: Implement in the editor
Once verified, you can apply your selector in several locations:
- Selected Element tab: Use for specific Step or Launcher identification
- Additional step triggers: Use to trigger steps on click or hover
- Rich Text Editor: Use to display Dynamic Text in balloons or Shoutouts
- Condition Builder: Select the jQuery Rule Type to build complex logic
To ensure the best user experience, compare the speed of your selectors:
- Type the following script into your console: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Run the command several times to find the average execution time
- Select the version with the lowest average time
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
Technical Notes
- For sites using Shadow DOM you won't be able to run wmjQuery in the DevTools Console, you'll need to use this syntax instead:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
