Améliorer l'expérience utilisateur; Un guide pour le suivi des erreurs avec des événements et des propriétés personnalisées

Introduction des Événements Personnalisés

Les frameworks de développement web modernes offrent une multitude d'outils pour surveiller les interactions des utilisateurs et le comportement du système. Parmi eux, les événements personnalisés de Metricalp se démarquent comme des instruments polyvalents pour suivre des actions spécifiques et des occurrences au sein de votre application. Qu'il s'agisse de capturer des clics, des soumissions de formulaires ou même des erreurs, les événements personnalisés permettent aux développeurs d'obtenir des informations plus approfondies sur le comportement des utilisateurs et les performances du système.

Considérez le scénario du suivi des erreurs. Lorsqu'une erreur se produit, il ne s'agit pas seulement d'identifier le problème mais de comprendre son contexte et son impact sur les utilisateurs. Les journaux d'erreurs traditionnels peuvent fournir des détails techniques, mais ils manquent souvent des informations contextuelles cruciales nécessaires pour une résolution efficace. C'est là que les événements personnalisés brillent.

Suivi des Erreurs avec des Événements Personnalisés et des Propriétés Personnalisées

Imaginez un scénario où un utilisateur rencontre une erreur en utilisant votre application. Plutôt que de se fier uniquement à des journaux d'erreurs génériques, vous pouvez implémenter un événement personnalisé spécifiquement conçu pour capturer ces occurrences. Voyons comment ce processus se déroule :

Tout d'abord, dans Metricalp, vous pouvez autoriser tous les événements personnalisés ou spécifier ceux autorisés dans les paramètres du Tracker.

La beauté de Metricalp est que vous pouvez avoir différentes propriétés personnalisées par événement personnalisé. Vous pouvez également définir des alias de propriétés personnalisées par événement personnalisé dans les paramètres du Tracker.

Vous pouvez obtenir plus d'informations sur les alias de propriétés personnalisées et les événements personnalisés dans la documentation associée.

Voyons maintenant comment nous pouvons utiliser ces événements personnalisés et propriétés pour le suivi des erreurs, étape par étape.

Définition de l'Événement : Définissez un événement personnalisé nommé "error" dans votre système de suivi. Cet événement servira de balise pour capturer les erreurs dans toute votre application.

Si vous avez autorisé tous les événements personnalisés dans les paramètres du Tracker, vous n'avez pas besoin de le définir nulle part. Vous pouvez commencer à produire n'importe quel événement (comme "error") dès le premier jour. Mais si vous avez restreint les événements autorisés (comme dans notre exemple), alors vous devez autoriser l'événement "error" dans les paramètres du Tracker.

Contexte de l'Erreur : Attachez des propriétés personnalisées à l'événement "error" pour fournir un contexte et des détails. Ces propriétés pourraient inclure "error_title" pour décrire la nature de l'erreur et "error_message" pour fournir des informations supplémentaires ou des conseils.

Comme nous l'avons décrit dans la documentation, vous pouvez toujours attacher des propriétés personnalisées comme "{ type:"error", custom_prop1: "my_value" }". Mais nous savons que custom_prop1 n'est pas... lisible. La beauté de Metricalp est que vous pouvez définir différents alias de propriétés personnalisées par événement personnalisé. Ensuite, vous pouvez utiliser ces alias lors de la production des événements : "{ type:"error", error_title: "my_value" }"

Nous allons maintenant également définir des alias de propriétés personnalisées pour notre événement d'erreur personnalisé "error".

Nous avons défini les alias "error_title", "error_message", "user_id", "env", "app_version" pour notre événement "error".

Maintenant, c'est plus lisible et précieux pour l'analyse. Génial, non?

Maintenant, nous allons produire notre événement personnalisé lorsque nous attrapons une erreur. Il existe différentes façons de produire des événements personnalisés. Si vous utilisez React ou NextJS, vous pouvez utiliser la méthode de la bibliothèque d'intégration comme décrit dans la documentation. Si vous utilisez l'intégration pure, consultez la documentation des événements personnalisés.

try {
    // ....
  } catch (err) {
    window.metricalp.event({
      type: 'error',
      error_title: 'Register Attempt Error',
      error_message: err.message,
      user_id: user.id,
      env: 'production',
      app_version: '1.0.0',
    });
  }

C'est tout. Nous avons maintenant commencé à collecter les journaux d'erreurs de manière appropriée. Vérifions notre tableau de bord.

Nous avons nos erreurs, hourra. Je sais que les erreurs ne sont pas bonnes, mais si nous pouvons les capturer, nous pouvons les corriger. Maintenant, lorsque nous sélectionnons notre événement d'erreur, nous pouvons voir des propriétés personnalisées comme user_id, etc.

Mais pas seulement ça, nous avons aussi toutes nos données standard comme le navigateur de l'utilisateur, le système d'exploitation, etc. Nous avons donc maintenant tous les détails sur l'erreur. Nous pouvons la détecter et la corriger sans problème.

Disons que nous avons détecté une erreur 'xxx is not a function' dans la propriété personnalisée. Ensuite, nous pourrions simplement sélectionner cette propriété personnalisée comme filtre et rechercher directement le navigateur, le périphérique des utilisateurs pour cette erreur. Si par exemple 95%+ est le navigateur Safari, alors bang, nous avons trouvé le bug. C'est un problème de compatibilité avec le navigateur.

Avec Metricalp, vous pouvez trouver la cause de toute erreur. Est-ce lié au système d'exploitation? Un appareil mobile ou le pays de l'utilisateur? Tous les cas peuvent être analysés dans Metricalp.

Cela dit, Metricalp n'est pas seulement un outil d'analyse. Nous l'avons utilisé ici comme un capteur d'erreurs. C'est vraiment génial d'avoir des systèmes robustes et sécurisés. Mais ce n'est pas limité à cela, vous pouvez utiliser des événements et des propriétés personnalisés pour tous les scénarios. Par exemple, vous pouvez l'utiliser pour vos tests A/B. Vous pouvez l'utiliser pour le suivi des conversions. Cela dépend de vos besoins et de votre imagination. Metricalp supprime les frontières.

Vous avez maintenant appris comment utiliser Metricalp pour capturer et suivre les erreurs de manière appropriée.