Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez des doutes sur une information, veuillez vous référer à la version anglaise.
Le modèle d'erreur personnalisé vous permet de collecter les messages d'erreur présents sur la page web consultée afin de les agréger et de les analyser dans l'Analyse des erreurs.
Ces instructions doivent être utilisées en complément de l'article sur le Configurateur de balises Contentsquare, qui comprend des détails sur les prérequis et la création de Snippet.
Utilisé couramment pour
- Collecter tout texte affiché sur l'écran de l'utilisateur. Par exemple, un message texte dans une bannière, un pop-up, ou à côté d'un champ de formulaire basé sur une action de l'utilisateur.
- Collecter des erreurs qui ne sont pas visibles pour les utilisateurs. Par exemple, s'il y a une ligne de code exécutée lorsque les utilisateurs essaient d'acheter un article qui est en rupture de stock, même si votre site web peut avoir une logique qui les empêche d'accéder à la page d'achat (pour les articles en rupture de stock).
Comment l'utiliser
Une fois que vous avez sélectionné le modèle d'erreur personnalisé, utilisez les étapes ci-dessous pour configurer ce modèle sélectionné et le déclencheur choisi.
Étape 1 : Complétez les champs de saisie
- Message : une description de l'erreur. Ici, vous pouvez soit mettre une chaîne fixe (texte) de votre choix pour une valeur fixe (par exemple, erreur de validation de formulaire), soit si vous utilisez l'un des déclencheurs suivants - Clic ou Tap sur un élément, Élément existe, Insertion d'élément, Élément devient visible ou Survol de souris - vous pouvez passer le texte de l'élément cible dans votre événement, en utilisant l'expression ${element.textContent} dans le champ Nom de l'événement. Vous pouvez également combiner des chaînes fixes et le texte de l'élément en utilisant la concaténation. Par exemple, Erreur de validation de formulaire : ${element.textContent}
-
Attributs (optionnel) : ici, vous pouvez ajouter des attributs spécifiques de votre erreur personnalisée pour collecter des informations telles que le type d'erreur ou sa langue.
- Les valeurs d'attribut peuvent être soit du texte manuel (une chaîne), soit vous pouvez les utiliser pour récupérer les attributs de l'élément. Par exemple, ${element.className} ou ${window.utag.data.error}
Étape 2 : Sélectionnez un déclencheur
Sélectionnez un déclencheur et définissez les conditions qui déclencheront le Snippet.
Déclencheurs disponibles
- Insertion d'élément
- L'élément devient visible
- Clic ou tap sur l'élément
- L'élément existe
- Suppression d'élément
- Survol de souris
Directives pour les modèles et les déclencheurs
Règles générales
Vous pouvez appliquer les règles générales suivantes pour le modèle d'erreurs personnalisées :
[class*='error'i],[class*='warning'i],[class*='alert'i],[class*='danger'i]
Pour capturer le contenu du message (lorsqu'aucune donnée personnelle n'est exposée) :
${element.textContent}
Identifier l'élément de déclenchement
Pour identifier quel élément utiliser comme déclencheur, étudiez comment la page avec l'erreur que vous souhaitez capturer se comporte. L'élément qui contient le texte de l'erreur existe-t-il lorsque la page se charge pour la première fois ? Si oui, vous pouvez utiliser soit le déclencheur d'Insertion d'élément, soit le déclencheur de L'élément devient visible.
En revanche, s'il est déjà présent sur la page lorsqu'elle se charge pour la première fois mais est caché, vous voudrez utiliser le déclencheur de L'élément devient visible.
Les déclencheurs d'Insertion d'élément et de L'élément devient visible vous permettent de choisir si vous souhaitez qu'ils se déclenchent sur chaque élément/instance ou juste une fois par vue de page. Si vous cherchez à déclencher à partir d'un seul élément (comme une erreur de paiement échoué), vous pouvez le restreindre à se déclencher une fois par vue de page. Cependant, si vous souhaitez capturer plusieurs erreurs (comme des erreurs de validation sur un formulaire où le même extrait CSTC avec le même sélecteur CSS peut être utilisé pour capturer tous les messages pour tous les champs ayant une erreur), alors vous voudrez qu'il se déclenche plusieurs fois par vue de page.
Expression : ${element.textContent}
Lorsque vous utilisez ${element.textContent} , soyez prudent pour éviter de sélectionner des éléments (en utilisant des sélecteurs CSS) qui sont trop larges et incluent d'autres textes que vous ne souhaitez pas capturer.
Catégoriser les erreurs avec des paires clé/valeur
En plus de collecter le texte du message d'erreur, vous pouvez attribuer jusqu'à 5 paires clé/valeur pour catégoriser chaque erreur. La clé et la valeur peuvent avoir jusqu'à 30 caractères. Par exemple, type : validation.
Modifications d'attributs et Élément Existe
Le déclencheur Élément Existe ne détecte pas les modifications d'attributs (modifications de classe, par exemple).
Il ne détectera que si un élément existe lors d'un chargement de page naturel ou s'il existe parmi les éléments ajoutés via une mutation du DOM. Cela signifie que si vos éléments d'erreur existent déjà au chargement de la page, avant de devenir visibles, et qu'ils ne deviennent visibles que par un changement de classe, le déclencheur Élément Existe ne pourra pas le détecter, même si vos sélecteurs sont spécifiques aux nouvelles classes ajoutées après que l'erreur soit devenue visible.