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ée 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.
Utilisations courantes
- Collecter tous les messages à l'écran. Par exemple :
- Messages d'erreur tels que ceux liés aux saisies de formulaire
- Friction e-commerce telles que le suivi des messages "en rupture de stock"
- Fournir une alternative à la recherche de texte (car elle ne repose pas sur le démasquage et l'échantillonnage de la lecture de session, ce que fait la recherche de texte)
Comment l'utiliser
Une fois que vous avez sélectionné le modèle d'erreur personnalisée, 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'${element.textContent} expression 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}
Générer des erreurs personnalisées pour chaque valeur
Vous souhaitez collecter des erreurs personnalisées pour chaque Unité de Gestion des Stocks ? Suivez notre guide sur le regroupement d'erreurs personnalisées pour ajouter un attribut pour ce cas d'utilisation spécifique.
É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ément devient visible
- Clic ou Tap sur un élément
- Élément existe
- Suppression d'élément
- Survol de souris
Directives sur le modèle et le déclencheur
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(s) déclencheur(s)
Pour identifier quel élément utiliser comme déclencheur, étudiez comment se comporte la page avec l'erreur que vous souhaitez capturer. L'élément/les éléments contenant le texte d'erreur existent-ils lors du premier chargement de la page ? Si oui, vous pouvez utiliser soit les déclencheurs d'Insertion d'élément, soit d'Élément devient visible.
Si, en revanche, il/ils est/sont déjà présent(s) sur la page lors de son premier chargement mais est/sont caché(s), vous voudrez utiliser le déclencheur d'Élément devient visible.
Les déclencheurs d'Insertion d'élément et d'É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ée), vous pouvez restreindre son déclenchement à 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 snippet 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.