jQuery doit être utilisé en cas de scenarios extrêmes uniquement
Nous vous recommandons d'utiliser jQuery le moins possible. Les applications Web changent en permanence et de petites mises à jour de l'interface utilisateur et de la structure de la page peuvent briser n'importe quel jQuery utilisé.
La sélection d'éléments de WalkMe s'adapte aux changements de l'application sous-jacente sans avoir recours à jQuery.
Aperçu général
jQuery est une bibliothèque JavaScript utilisée pour identifier et manipuler les éléments HTML sur une page. Bien que WalkMe fournisse une sélection d'éléments prête à l'emploi qui s'adapte aux modifications de l'interface utilisateur, les sélecteurs jQuery agissent comme une alternative puissante pour les cas extrêmes.
Ces sélecteurs identifient des éléments en fonction de caractéristiques spécifiques, telles que l'ID, la classe, le type et les attributs.
Cas d'utilisation
Nous vous recommandons d'utiliser jQuery avec parcimonie pour maintenir la stabilité du build. Cependant, c'est un outil essentiel pour les tâches suivantes :
- Créer des objectifs Onboarding : définissez les objectifs en fonction d'un élément à l'écran
- Configurer les lanceurs : saisissez des sélecteurs spécifiques dans l'onglet Élément sélectionné
- Saisir des valeurs : capturez des variables utilisateur ou du texte à l'écran pour les annonces dynamiques
- Vérifier les conditions de la page : utilisez le moteur de règles pour analyser les attributs de l'élément
Suivez ces étapes pour construire, tester et mettre en œuvre des sélecteurs personnalisés dans votre contenu WalkMe.
🎓 Institut d'adoption numérique
Opérateurs du moteur de règles disponibles
Lorsque vous utilisez le type de règle jQuery dans le moteur de règles, utilisez ces opérateurs pour définir votre logique :
- Vrai : au moins un élément a été trouvé
- Faux : aucun élément n'a été trouvé
- Visible : l'élément est actuellement visible sur la page
- Le texte est / n'est pas : le texte de l'élément correspond ou ne correspond pas à votre entrée
- Remarque : Lorsque le sélecteur renvoie plus d'un élément, le texte de tous les éléments est combiné en tant qu'élément unique
- Supérieur à / Inférieur à : la valeur est au-dessus ou en dessous d'un nombre entier
- Comme / Pas comme : signifie une syntaxe de texte compliquée
- La longueur est / n'est pas / supérieure / inférieure à : le nombre d'éléments renvoyés par la requête
- Trouvez la longueur exacte de la requête : wmjQuery(“element.value”).length
Remarque
L'Éditeur WalkMe prend en charge uniquement les sélecteurs écrits dans la syntaxe jQuery jusqu'à celle utilisée dans jQuery 1.8.3. Vous pouvez toutefois utiliser n'importe quelle version de jQuery à d'autres fins sur votre site web sans craindre d'un conflit avec la version WalkMe de jQuery (wmjQuery).
Nous vous recommandons d'utiliser également l'optimiseur de sélecteur jQuery de WalkMe.
Sélecteurs jQuery courants
Utilisez ces modèles pour identifier les éléments dans votre application :
- élément : localisez un élément HTML spécifique par son nom de balise
- element[attribute] : Localisez un élément qui contient un attribut spécifique
- element[attribute][attribute] : Localisez un élément qui correspond à plusieurs attributs simultanément
- élément[attribute= value=""] : localisez une correspondance exacte pour un attribut et sa valeur
- élément[attribute^= text=""] : localisez un élément où l'attribut commence par un texte spécifique
- élément[attribute*= text=""] : localisez un élément où l'attribut contient un texte spécifique n'importe où dans la chaîne
- element[attribute!= text=""] : localisez un élément qui ne contient pas le texte de l'attribut spécifié
- élément enfant-élément : localisez un élément enfant imbriqué (l'espace indique une relation parent-enfant)
- element:checked : localisez l'état d'une case à cocher ou d'un bouton radio
- [element]:visible : vérifiez si un élément spécifique est actuellement visible sur la page
- element:contains(Text) : localisez un élément en fonction de la chaîne de texte spécifique qu'il contient
- element:eq(#) : Localisez un index spécifique dans une liste de résultats (notez que le compte commence à 0)
Cheat sheet jQuery
Pour plus d'astuces et d'exemples jQuery, veuillez vous référer à notre cheat sheet jQuery
Étape 1 : construire le sélecteur
- Localisez l'élément dans le code HTML en cliquant dessus avec le bouton droit de la souris et en sélectionnant Inspecter l'élément
- Identifier les caractéristiques uniques telles que la classe, l'ID ou le style
- Rédigez votre sélecteur à l'aide de la syntaxe : Élément → Sélecteur → Valeur
- Exemple (ID) : ul#create-account
- Exemple (Class) : ul.nav visual. visual
Créer jQuery à l'aide de vos données WalkMe
Vous pouvez désormais utiliser les données WalkMe existantes en faveur d'un sélecteur jQuery.
Cela peut être accompli en ajoutant « $ {wm-data-key}» au sélecteur souhaité. Par exemple : le sélecteur : [id=], aura le « ${key} » remplacé par les données WalkMe réelles et ressemblera à : [id=”value”].
Étape 2 : tester dans la console
Remarque : vous devez avoir l'extension de l'Éditeur activée pour utiliser cette méthode.
- Ouvrez les outils de développement de votre navigateur et sélectionnez l'onglet Console
- Saisissez wmjQuery("your-selector-here") et appuyez sur Entrée
- Passez la souris sur les objets renvoyés dans la console pour vérifier que l'élément correct est mis en surbrillance à l'écran
Étape 3 : Implémenter dans l'éditeur
Une fois vérifié, vous pouvez appliquer votre sélecteur à plusieurs emplacements :
- Onglet Élément sélectionné : utilisez pour l'identification spécifique de l'étape ou du Launcher
- Déclencheurs d'étape supplémentaires : à utiliser pour déclencher les étapes au clic ou au survol
- Éditeur de texte enrichi : utilisez pour afficher du texte dynamique dans les bulles ou les Shoutouts
- Moteur de règles : Sélectionnez le type de règle jQuery pour créer une logique complexe
Pour assurer la meilleure expérience utilisateur, comparez la vitesse de vos sélecteurs :
- Saisissez le script suivant dans votre console : var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Exécutez la commande plusieurs fois pour trouver le temps d'exécution moyen
- Sélectionnez la version avec le temps moyen le plus bas
Conseil
Souvenez-vous que jQuery doit être utilisé avec parcimonie dans vos créations WalkMe et toujours en combinaison avec des conditions plus légères. Veuillez vous référer à l'article suivant pour plus d'informations : Meilleures pratiques WalkMe Performance
Notes techniques
- Pour les sites utilisant Shadow DOM, vous ne pourrez pas exécuter wmjQuery dans la console DevTools, vous devrez utiliser cette syntaxe à la place :
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('entrez votre sélecteur ici')
