Quels scénarios les conseils suivants résolvent-ils ?
- Lorsque les modifications que vous avez apportées aux variantes d’une expérience dans l’éditeur graphique n’apparaissent pas, même si vous les avez enregistrées et simulées.
- Lorsque les modifications que vous avez apportées à toutes les pages avec l’éditeur graphique n’apparaissent pas après la mise en ligne d’une expérience.
- Lorsque l’éditeur graphique ne se charge pas.
Comment fonctionnent les éditeurs graphiques ?
Bien que faire des changements avec l’éditeur graphique semble facile, l’architecture de votre page web (par exemple, la façon dont elle est codée) peut rendre l’édition compliquée. Comme la plupart des éditeurs visuels conçus pour créer des expériences, l’éditeur graphique de Kameleoon utilise des chemins de sélecteur CSS pour identifier les éléments que vous modifiez. Les sélecteurs sont la pierre angulaire de toute action que vous effectuez dans l’éditeur graphique. Kameleoon utilise deux types de chemins de sélecteur CSS :- Sélecteurs simples, tels que l’ID unique de l’élément : Parce qu’il est unique, il ne peut pas être répété sur une page ou attribué à un autre élément sur la même page. Par conséquent, les modifications apportées à cet élément dans l’éditeur graphique sont confinées à cet élément.
- Sélecteurs combinateurs : L’élément est sélectionné en fonction d’une relation spécifique avec ses éléments parents.
- Si Kameleoon trouve un ID pour l’élément sélectionné : Kameleoon utilise l’ID par défaut pour identifier l’élément lors du chargement de la page et applique les modifications.
- Si Kameleoon ne trouve pas d’ID pour l’élément sélectionné : Kameleoon crée un sélecteur combinateur à partir de l’élément parent le plus proche qui possède un ID. Par exemple, si un élément nom de produit n’a pas d’ID mais que l’en-tête a un ID, Kameleoon crée un chemin unique de l’élément en-tête au nom de produit.
Qu’est-ce qui cause les problèmes ?
En général, les IDs attribués aux éléments sur les single-page applications sont générés dynamiquement, ce qui signifie que leurs valeurs et chemins de sélecteur changent continuellement. Cependant, Kameleoon peut suivre ces changements. Pour activer l’option de suivi, vous devez définir une méthode de sélection d’élément sur une page en indiquant un attribut personnalisé. Pour ce faire :- Cliquez sur Admin > Project.
- Cliquez sur l’icône crayon pour le projet que vous souhaitez modifier.
- Dans le menu Configuration, cliquez sur General.
- Sous Advanced settings, basculez Enable support for dynamic websites (Single Page App, Progressive Web App…) sur ON.
- Sous Set a custom attribute (optional), définissez votre attribut personnalisé souhaité (par exemple,
data-id,data-qa).
Le chemin de sélecteur utilisé ne permet pas la sélection précise d’un élément
Tous les éléments n’ont pas d’ID. Lorsque l’ID est absent, Kameleoon génère un chemin unique à partir de l’élément parent le plus proche avec un ID jusqu’à l’élément que vous souhaitez modifier. Voici un exemple de chemin de sélecteur qui identifie le bloc contenant les images miniatures de produits :#ProductSection-product-template > div:first-child > div:first-child > div:nth-of-type(6) > div:first-child > ul:nth-of-type(1) > div:first-child.
Ce chemin commence au bloc parent, ProductSection-product-template, et passe par cinq autres blocs enfants avant d’atteindre le bloc miniature. Ainsi, le sélecteur suit Product section template > block1 > block2 > block3 > block4 > block5 > thumbnail.
Généralement, plus le chemin de sélecteur est large, plus il est probable que le sélecteur ne couvre pas tous les cas d’usage sur le site web. Parce que chaque site web est unique, la limitation du sélecteur présente des défis distincts pour les éditeurs graphiques.
Les pages produit peuvent avoir des mises en page variées (telles que différents balisages HTML) ; par conséquent, elles nécessitent différents sélecteurs. Par exemple, certaines pages produit peuvent avoir un bloc pour les évaluations, tandis que d’autres non. L’incohérence dans la présence des éléments casse le chemin de sélecteur original que Kameleoon a trouvé lors de la création de la variante.
Le risque de modifications incohérentes des éléments dans une expérience augmente proportionnellement à la longueur et à l’étendue du chemin de sélecteur que Kameleoon identifie et dépend de la nature dynamique de la mise en page de la page produit. Lorsque le risque est trop grand, utilisez d’autres options de sélection que Kameleoon propose depuis la barre d’outils de hiérarchie. Vous pouvez trouver une classe HTML plus sûre à utiliser ou demander à un développeur ou un CSM de créer un sélecteur CSS ou de valider un choix.
Alternativement, vous pouvez demander à l’IA de générer un chemin pour un élément.
- Sélectionnez un élément.
- Dans la barre latérale de gauche, cliquez sur Edit selector.
- Cliquez sur AI generation > Validate.
Modifications conflictuelles
L’une des raisons de la popularité et de l’utilisation généralisée des éditeurs graphiques est la facilité avec laquelle ils vous permettent de commencer l’expérimentation sans avoir besoin de code. Les modifications sont simples dans l’éditeur graphique ; cependant, vous devez être prudent en introduisant des modifications conflictuelles dans vos variantes. Les modifications conflictuelles font généralement référence aux éditions effectuées sur un élément enfant qui remplacent les éditions effectuées sur un élément parent. Un exemple inclut la modification de la couleur d’un élément de texte (l’enfant), puis la sélection du parent et le changement de couleur à nouveau. Kameleoon n’appliquera ou n’affichera pas correctement les modifications car le changement de l’élément enfant est rendu en premier. Pour éviter les modifications conflictuelles, suivez ces règles :- Ne combinez jamais le code HTML avec d’autres capacités d’édition natives de l’éditeur graphique, sauf si vous comprenez les résultats exacts.
- Si vous prévoyez d’apporter des modifications au même élément, assurez-vous de toujours sélectionner l’élément avec le même sélecteur CSS. Faites attention aux éléments composés de plusieurs éléments.
L’éditeur graphique ne parvient pas à se charger
Il existe plusieurs raisons pour lesquelles l’éditeur graphique peut ne pas se charger.L’éditeur graphique ne se charge pour personne
Étape 1 : Vérifier l’installation du script Kameleoon
Si l’éditeur graphique ne se charge pas et que vous êtes redirigé vers la page de connexion ou une autre destination, vérifiez si le script Kameleoon est correctement installé sur la page. Pour ce faire :- Ouvrez les outils de développement de votre navigateur.
- Sur Mac, appuyez sur Command + Option + I
- Sur Windows, appuyez sur Control + Shift + C
- Naviguez vers l’onglet Elements et appuyez sur Command + F (Mac) ou Control + F (Windows) et recherchez Kameleoon dans le DOM.
- Ouvrir l’onglet Network.
- Filtrer par Kameleoon après avoir rafraîchi la page pour confirmer si le script est chargé.
- Si le script Kameleoon est présent : Passez à l’étape de dépannage suivante.
- Si le script Kameleoon n’est pas présent : Vous devez installer le script sur le site web pour continuer.
- Dans Developer tools, cliquez sur les doubles flèches > Kameleoon.
- Cliquez sur Dev tools > Tag injection.
- Saisissez votre sitecode sous Sitecode to inject.
- Cliquez sur Inject tag.
Étape 2 : Vérifier la configuration du domaine et du sous-domaine
Assurez-vous que le domaine et tous les sous-domaines pertinents ont été correctement configurés dans Kameleoon.- Cliquez sur Admin > Project.
- Sélectionnez Setup pour le projet pertinent.
- Cliquez sur Modify setup.
- Accédez à la section Domain configuration et ajoutez tous les domaines et sous-domaines nécessaires.
- Pour les sous-domaines, utilisez un astérisque (
*). Par exemple,*.mywebsite.com.
- Pour les sous-domaines, utilisez un astérisque (
- Après avoir ajouté les domaines requis, validez votre configuration.
- En haut de la page, cliquez sur l’icône crayon à côté du titre de votre projet pour modifier l’URL du domaine si nécessaire.
Étape 3 : Vérifier les erreurs de politique CORS
Pour vous assurer que l’éditeur graphique fonctionne correctement, vérifiez la console de votre navigateur pour toute erreur de politique CORS (cross-origin resource sharing).- Ouvrez la console en utilisant les raccourcis suivants :
- Sur Mac :
Command + Option + J - Sur Windows :
Control + Shift + J
- Sur Mac :
- Recherchez les erreurs liées à CORS en rouge, comme indiqué dans l’image ci-dessous.
*.kameleoon.com*.kameleoon.eu*.kameleoon.io
L’éditeur graphique se charge pour certains utilisateurs et pas pour d’autres
Étape 1 : Vider le cache
Vous consultez peut-être une version obsolète de votre site web, ce qui pourrait empêcher le chargement de l’éditeur graphique. Pour résoudre ce problème :Option 1 : Vider votre cache
- Ouvrez l’inspecteur du navigateur en utilisant l’un de ces raccourcis :
- Sur Mac :
Command + Option + I - Sur Windows :
Control + Shift + C
- Sur Mac :
- Faites un clic droit sur le bouton d’actualisation du navigateur et sélectionnez Empty cache and hard reload.
Option 2 : Utiliser la navigation privée (mode incognito)
Vous pouvez également essayer d’ouvrir l’éditeur graphique dans une fenêtre de navigation privée pour vous assurer qu’aucun fichier mis en cache n’interfère.Étape 2 : Autoriser les cookies tiers
Assurez-vous que votre navigateur autorise les cookies tiers, car ils sont essentiels pour que l’éditeur graphique fonctionne correctement. Pour activer les cookies tiers :- Allez dans les Paramètres de votre navigateur.
- Naviguez vers Privacy & Security.
- Localisez la section Third-party Cookies et assurez-vous qu’ils sont autorisés.
Étape 3 : Désactiver les bloqueurs de publicités
Les bloqueurs de publicités peuvent parfois interférer avec le bon fonctionnement de l’éditeur graphique. Pour résoudre ce problème, essayez l’une de ces solutions :- Désactivez votre bloqueur de publicités et relancez l’éditeur graphique.
- Ouvrez une fenêtre de navigation privée où le bloqueur de publicités peut ne pas être actif et relancez l’éditeur graphique.
- Essayez d’utiliser un autre navigateur sans bloqueurs de publicités et voyez si l’éditeur graphique y fonctionne.
Étape 4 : Désactiver les autres extensions de navigateur
Vérifiez si vous avez des extensions de navigateur activées qui pourraient interférer avec le bon chargement de l’éditeur graphique. Les extensions liées à la confidentialité (telles que Ghostery) ou les optimisateurs de performance (uBlock Origin, par exemple) peuvent empêcher l’éditeur de se charger correctement.Étape 5 : Désactiver le VPN
Vérifiez les paramètres de votre application VPN ou la barre des tâches pour les connexions actives et désactivez-le s’il est activé. Se déconnecter du VPN permettra un accès direct à votre réseau sans passer par un serveur différent, ce qui peut aider à charger correctement l’éditeur graphique Kameleoon.Étape 6 : Basculer vers un réseau Wi-Fi différent
Si l’éditeur graphique ne se lance toujours pas, il peut y avoir des problèmes liés au réseau. Essayez de vous connecter à un réseau différent et relancez l’éditeur.Étape 7 : Utiliser le navigateur Chrome Dev
Le navigateur Chrome Dev est souvent plus compatible avec des outils comme l’éditeur graphique Kameleoon. Si vous rencontrez des problèmes avec le navigateur Chrome standard, passez à Chrome Dev.Étape 8 : Installer l’extension de l’éditeur graphique
L’installation de l’extension de l’éditeur graphique Kameleoon peut aider à contourner les erreurs courantes, telles que les problèmes de politique CORS, et améliorer les performances de chargement de l’éditeur.Étape 9 – Vérifier le pare-feu ou les outils de sécurité (tels qu’Edgesuite ou WAF)
Si votre entreprise utilise un pare-feu, un Web Application Firewall (WAF) ou un outil proxy tel qu’Edgesuite/Akamai, les requêtes de l’éditeur graphique Kameleoon peuvent être bloquées. Pour résoudre cela : Contactez votre équipe informatique et demandez-leur d’autoriser les domaines de Kameleoon dans la configuration du pare-feu/WAF. Les domaines et sous-domaines listés dans l’article FAQ doivent être accessibles. Assurez-vous que le trafic HTTPS (GET, POST, OPTIONS) et les connexions WebSocket sont autorisés vers ces domaines. Après avoir mis à jour la configuration du pare-feu, relancez l’éditeur graphique pour confirmer si le problème est résolu.