Événements d'enregistrement
Les enregistrements de session capturent des événements structurés — clics, interactions de formulaires, navigations entre pages, profondeur de défilement — en parallèle du replay visuel.
Ce que vous verrez
Lorsque vous ouvrez un enregistrement de session, le panneau Événements s'affiche à côté du lecteur. Il contient la liste chronologique de tous les événements capturés durant la session, avec pour chaque événement :
- Le type d'événement (voir la liste ci-dessous)
- L'horodatage relatif (ex. : « 1m 23s après le début »)
- Les détails contextuels : texte du bouton cliqué, URL de la page, valeur de l'élément de formulaire (masquée si sensible), etc.
Un clic sur un événement dans le panneau fait sauter le lecteur directement au moment correspondant dans la session.
Types d'événements capturés
Clics
Chaque clic de l'utilisateur est enregistré avec :
- l'élément cliqué (balise HTML, attribut
id, classe CSS) - le texte visible de l'élément (ex. : « Ajouter au panier », « Envoyer »)
- les coordonnées du clic dans la page
Les rage clicks (plusieurs clics rapides sur le même élément) sont automatiquement détectés et marqués d'un indicateur visuel dans la timeline — ils signalent souvent un élément non fonctionnel ou une interface qui ne répond pas assez vite.
Interactions de formulaires
- Focus sur un champ de formulaire : l'utilisateur a cliqué dans le champ
- Changement de valeur : la valeur d'un champ a été modifiée (la valeur réelle est masquée pour les champs sensibles)
- Soumission de formulaire : l'utilisateur a soumis un formulaire (avec l'URL cible si disponible)
Navigations entre pages
- Changement d'URL : l'utilisateur a navigué vers une nouvelle page ou une nouvelle route (pour les SPAs avec routage côté client)
- URL précédente et URL actuelle
- Mode de navigation : clic sur un lien, navigation par bouton Retour/Avant du navigateur, ou redirection
Défilement
- Profondeur de défilement maximale : le pourcentage de la page que l'utilisateur a scrollé (ex. : 75 % de la page visible)
- Événements de défilement significatifs : enregistrés lorsque l'utilisateur atteint des seuils (25 %, 50 %, 75 %, 100 % de la page)
Erreurs
- Erreur JavaScript : exceptions capturées durant la session avec le message d'erreur et la stack trace
- Erreur réseau : requêtes HTTP ayant échoué (4xx, 5xx) ou n'ayant pas abouti
Événements personnalisés
Le SDK permet d'émettre des événements personnalisés depuis votre code pour enrichir les enregistrements avec des données métier :
// Émettre un événement personnalisé dans votre code
QuickMonitoring.track('checkout_step_completed', {
step: 'payment',
product_count: 3
});
Les événements personnalisés apparaissent dans le panneau d'événements avec le nom et les propriétés que vous avez définis.
Condition de validation
Ouvrez une session enregistrée depuis Enregistrements, sélectionnez-la et vérifiez que le panneau d'événements est visible et synchronisé avec le lecteur de replay. Au moins un événement de type clic ou navigation doit apparaître dans la liste.
Problèmes courants
Le panneau d'événements est vide même si le replay s'affiche. Il est possible que la session soit très courte (quelques secondes) et n'ait pas généré d'événements significatifs autres que les événements de rendu DOM. Les sessions inférieures à 5 secondes ont souvent peu ou pas d'événements structurés.
Les clics ne s'affichent pas dans le panneau pour certains éléments.
Si un élément utilise pointer-events: none en CSS ou intercepte les événements différemment, le SDK peut ne pas capturer le clic. Les clics sur des éléments <canvas> ou des zones Shadow DOM ne sont pas toujours capturés fidèlement.
Je veux filtrer les sessions par type d'événement. Depuis la liste des sessions dans Enregistrements, utilisez le filtre Événements pour afficher uniquement les sessions contenant un type spécifique (ex. : sessions avec au moins une erreur JavaScript, ou sessions avec une soumission de formulaire).