TP - Visualisez et analysez votre expérience utilisateur (DEM) avec correction

Ce que vous allez apprendre dans ce TP

• Accéder à l'environnement SaaS Dynatrace
• Préparer son espace de travail pour le TP
• Différencier les types d'applications (Experience Vitals,Web, Mobile, Frontend)
• Accéder à une application pour notre analyse
• Comprendre le score Apdex de l'application
• Comparer l'Apdex de la semaine en cours avec celui de la semaine dernière
• Retrouver les Core Web Vitals de l'application
• Identifier et afficher les services qui concourent au fonctionnement de l'application
• Accéder à la vue Smartscape de l'application
• Différencier les ressources 1st party, CDN et 3rd party
• Afficher spécifiquement les 3rd party ressources
• Afficher la répartition entre les nouveaux utilisateurs et les utilisateurs de retour (anciens)
• Afficher les types d'utilisateurs (Real users, Synthetic, Robots)
• Accéder aux sessions utilisateurs
• Vérifier l'activation du RGPD
• Analyser les détails d'une session
• Visualiser le replay d'une session
• Accéder à l'interface User sessions query
• Comprendre la syntaxe de base de l'USQL
• Filtrer les sessions utilisateurs en erreur
• Utiliser des fonctions d'agrégation comme GROUP BY
• Comprendre la notion d'entonnoir (Funnel)
• Construire une requête USQL multi-étapes
• Analyser un parcours de conversion utilisateur

Les prérequis et connexion #

Ce que vous allez apprendre dans cette section

• Accéder à l'environnement SaaS Dynatrace
• Préparer son espace de travail pour le TP

Pour ce TP, nous allons utiliser la plateforme SaaS dédiée. Vous devez vous connecter à l'adresse suivante : https://playground.dynatrace.rousseltm.fr/.

Veuillez vous rapprocher de votre formateur pour obtenir les identifiants de connexion.

Découverte des applications #

Ce que vous allez apprendre dans cette section

• Différencier les types d'applications (Experience Vitals,Web, Mobile, Frontend)
• Accéder à une application pour notre analyse

Avant d'analyser les données, il est important de comprendre les différents types d'applications gérés par Dynatrace et de savoir comment y accéder.

1. Les types d'applications

   Dans Dynatrace, les applications sont catégorisées pour mieux adapter la collecte de données. Quelle est la différence entre une application Web, Mobile et Frontend ?

   Experience Vitals : Nouvelle application de surveillance de la santé et de la performances des applications. Les ingénieurs SRE, les équipes d'exploitation et les développeurs peuvent consulter les données de santé actuelles et historiques grâce à des indicateurs spécifiques au DEM, tels que les indicateurs clés, sur le web et sur mobile. De plus, ils peuvent analyser en détail les performances des pages, des vues et des ressources afin de résoudre les problèmes rencontrés ou d'optimiser les performances.
   Frontend : Application classique pour la surveillance des applications de bout en bout.
   Web: Application classique pour la surveillance des applications Web.
   Mobile: Application classique pour la surveillance des applications Web mobiles natives (iOS/Android), surveillées via l'intégration d'un SDK spécifique.

2. Accès à l'application EasyTrade

   Pour la suite de ce TP, nous allons travailler sur la web application 'EasyTrade' et on va l'analyser dans l'application Dynatrace 'Frontend'. Trouvez et accédez à cette application depuis le menu principal.

   Allez dans la liste des applications et dans la liste, sélectionnez Frontend, puis sélectionnez EasyTrade dans la liste des applications surveillées.

Analyse de la performance #

Ce que vous allez apprendre dans cette section

• Comprendre le score Apdex de l'application
• Comparer l'Apdex de la semaine en cours avec celui de la semaine dernière
• Retrouver les Core Web Vitals de l'application

L'Apdex (Application Performance Index) et les Core Web Vitals sont des métriques permettant de mesurer la satisfaction des utilisateurs vis-à-vis des performances et temps de réponse d'une application.

1. Comparatif de l'Apdex

   Affichez le comparatif entre l'Apdex de cette semaine et celui de la semaine dernière. Ceci est très utile en entreprise, par exemple, pour vérifier les gains ou pertes de performance suite à une Mise En Production (MEP) récente.

   Dans la vue de l'application EasyTrade, repérez le sélecteur de temps (Timeframe selector) en haut à droite. Sélectionnez This week (ou les 7 derniers jours). Ensuite, utilisez la fonctionnalité de comparaison (Compare to previous time frame) et choisissez Previous week. Le graphique de l'Apdex affichera alors deux courbes permettant de voir clairement l'évolution.

2. Core Web Vitals

   Dans cette section, utiliser l'application Experience Vitals pour retrouver rapidement le core web vitals de notre application.
   
   

   Si vous souhaitez avoir le details sur la différence apdex vs core web vitals il faut lire cet article : Apdex vs Core Web Vitals.

   Ouvrez l'application Experience Vitals depuis le menu Dynatrace, puis sélectionnez l'application EasyTrade. Vous y trouverez un tableau de bord récapitulant les scores associés aux Core Web Vitals.

Analyse des services sous-jacents #

Ce que vous allez apprendre dans cette section

• Identifier et afficher les services qui concourent au fonctionnement de l'application
• Accéder à la vue Smartscape de l'application

Une application Frontend s'appuie généralement sur plusieurs services Frontend et Backend (API, bases de données, etc.). Si une application est lente, cela peut venir d'un de ces services.

1. Afficher les services connectés

   Trouvez comment afficher la liste des services qui sont appelés par l'application EasyTrade.

   Dans les détails de l'application EasyTrade, dans le bloc 'Performance analysis', cliquez sur Service. Dans le bloc qui s'ouvre, vous avez la liste des services utilisés par l'application. Vous pouvez utilisez l'option Service flow (Flux de services) associée à l'application. Le Service flow est particulièrement utile car il illustre graphiquement la chaîne d'appels depuis le frontend jusqu'aux bases de données, en précisant la contribution de chaque service au temps de réponse global.

2. Vue Smartscape (Smartscape topology)

   Trouvez comment accéder à la vue Smartscape (Smartscape topology) spécifique à l'application EasyTrade pour visualiser ses dépendances de bout en bout.

   Depuis l'écran principal de l'application EasyTrade, repérez le menu d'actions supplémentaires (souvent représenté par ... ou More en haut à droite) et sélectionnez Smartscape ou Smartscape topology. Cette vue topologique vous permet de visualiser instantanément les couches d'infrastructure (services, processus, hôtes et datacenters) qui soutiennent spécifiquement cette application.

Analyse des ressources #

Ce que vous allez apprendre dans cette section

• Différencier les ressources 1st party, CDN et 3rd party
• Afficher spécifiquement les 3rd party ressources

Lors du chargement d'une page, de multiples ressources (images, scripts, CSS) sont téléchargées. Il est crucial de les catégoriser pour identifier la source des lenteurs (qui peut parfois être externe).

1. Catégorisation des ressources

   Dynatrace classe automatiquement les ressources de votre application. Prenez connaissance des différentes catégories.

   1st party resources : Ressources chargées depuis votre propre domaine (le domaine principal de l'application). Ce sont celles sur lesquelles vous avez le contrôle direct.
   CDN resources : Ressources chargées depuis des réseaux de diffusion de contenu (Content Delivery Networks) connus (ex: Cloudflare, Akamai).
   3rd party resources : Ressources chargées depuis des domaines tiers (ex: scripts d'analytics, publicités, widgets de chat externes). Vous n'avez pas de contrôle direct sur leurs temps de réponse.

2. Afficher les 3rd party ressources

   Affichez la liste des '3rd party ressources' pour l'application EasyTrade.

   Dans l'écran de l'application EasyTrade, cherchez la section Resources ou Top resources. Cliquez sur le bouton pour voir toutes les ressources (View all resources), puis appliquez un filtre sur le type de ressource pour sélectionner uniquement 3rd party.

Comportement des utilisateurs #

Ce que vous allez apprendre dans cette section

• Afficher la répartition entre les nouveaux utilisateurs et les utilisateurs de retour (anciens)
• Afficher les types d'utilisateurs (Real users, Synthetic, Robots)

L'analyse du comportement permet de comprendre si votre application attire de nouveaux utilisateurs ou fidélise vos anciens utilisateurs.

1. Nouveaux vs Anciens utilisateurs

   Trouvez comment afficher la répartition entre le nombre de nouveaux utilisateurs (New users) et les utilisateurs connus/anciens (Returning users).
   

   Sur l'écran principal de l'application EasyTrade, naviguez vers la section User behavior (Comportement des utilisateurs). Vous y trouverez un indicateur dédié aux New vs. Returning users. Dynatrace utilise un cookie persistant stocké dans le navigateur du visiteur pour déterminer s'il a déjà visité l'application précédemment ou non.

2. Types d'utilisateurs

   Trouvez comment afficher la répartition des types d'utilisateurs visitant votre application.
   
   

   Différence entre les types d'utilisateurs :

   • Real users : Ce sont les vrais visiteurs humains qui interagissent avec votre application via leur navigateur ou appareil mobile.
   • Synthetic : Ce sont les exécutions de vos propres moniteurs synthétiques (robots Dynatrace) configurés pour tester la disponibilité et les performances de votre application.
   • Robots : Ce sont les bots, crawlers et spiders du web (ex: Googlebot, Bingbot) automatiquement détectés par Dynatrace.

   
   
   

   Sur l'écran principal de l'application EasyTrade, toujours dans la section User behavior, vous trouverez une répartition par User type (Type d'utilisateur). Vous pouvez utiliser cette information ou filtrer les vues pour isoler spécifiquement le trafic des utilisateurs réels (Real users).

Sessions utilisateur #

Ce que vous allez apprendre dans cette section

• Accéder aux sessions utilisateurs
• Vérifier l'activation du RGPD
• Analyser les détails d'une session
• Visualiser le replay d'une session

Analyse détaillée des sessions individuelles.

Risque RGPD : La collecte de données de session peut inclure des informations personnellement identifiables (PII). Il est crucial de s'assurer du recueil du consentement de l'utilisateur et de masquer les données sensibles pour être en pleine conformité avec le RGPD.

1. Accéder aux sessions des utilisateurs

   Trouvez comment lister toutes les sessions des utilisateurs pour l'application.

   Depuis la liste des applications dynatrace, allez dans l'application Session segmentation ou Users & Sessions: vous avez accès aux sessions de l'ensemble de vos applications. Vous pouvez ensuite filtrer sur une application ou un paramètre en particulier. Mais le mieux était de cliquer sur 'Analyze user sessions' depuis le details de l'application EasyTrade. Vous y trouverez la liste complète des sessions avec leurs métadonnées.

2. Statut du RGPD

   Vérifiez si l'option de respect de la vie privée (Data privacy / RGPD) est bien activée pour cette application.
   
   

   Configuration de la collecte : Pour configurer cela, allez dans les paramètres de l'application (Settings) > Data privacy. Vous pouvez y activer le 'Opt-in mode' (qui nécessite l'accord explicite via un cookie) et configurer le masquage des adresses IP, des frappes clavier et des données de session (Masking).
   
   Consultez cet article pour plus de détails : Gestion du RGPD dans Dynatrace.

   Pour savoir si c'est activé en regardant les sessions : si les adresses IP sont masquées (ex: terminant par .0) et que les utilisateurs sont principalement listés comme 'Anonymous' (à moins d'un login explicite), les mesures de confidentialité sont actives. L'endroit définitif pour le confirmer est dans Settings > Data privacy de l'application.

3. Détails d'une session

   Ouvrez une session utilisateur spécifique et parcourez les détails disponibles.

   Cliquez sur n'importe quelle session dans la liste 'Session segmentation'. Vous verrez une chronologie (Timeline) de toutes les actions de l'utilisateur (clics, chargements de page, erreurs, appels réseau) triées chronologiquement.

4. Replay de session

   Trouvez comment lancer le 'Session Replay' (si disponible) pour voir l'écran de l'utilisateur comme s'il s'agissait d'une vidéo.
   
   

   Génération du Session Replay : Dynatrace ne capture pas un flux vidéo classique (ce qui serait lourd et poserait de forts problèmes de sécurité). Il enregistre plutôt les mutations du DOM (HTML/CSS) et les événements (souris, défilement) côté navigateur, qu'il reconstitue ensuite sous forme de 'film'. Les champs de saisie de mots de passe sont automatiquement masqués.

   Dans les détails d'une session, si le Session Replay a été capturé, vous verrez un bouton Play (icône de lecture) au niveau de la session. Cliquez dessus pour ouvrir le lecteur intégré et revoir les interactions de l'utilisateur.

Requêtes USQL #

Ce que vous allez apprendre dans cette section

• Accéder à l'interface User sessions query
• Comprendre la syntaxe de base de l'USQL
• Filtrer les sessions utilisateurs en erreur
• Utiliser des fonctions d'agrégation comme GROUP BY

Les applications Dynatrace de DEM affichent les informations dans une structure fixe. Pour vous permettre de les organiser à votre guise dans un tableau de bord, Dynatrace met à votre disposition le langage User Session Query Language (USQL) pour interroger les données de sessions utilisateurs.

L'USQL (User Session Query Language) est le langage de requête de Dynatrace permettant d'analyser les données DEM. Sa syntaxe est très similaire à l'instruction SELECT en SQL standard.

Les 4 tables en USQL :

• usersession : Contient les informations globales sur la session (ex: système d'exploitation, durée, localisation).
• useraction : Contient les données sur chaque action de l'utilisateur (ex: chargement de page, clic).
• userevent : Contient les événements personnalisés déclenchés lors de la session.
• usererror : Regroupe toutes les erreurs (JavaScript, requêtes réseau) rencontrées par l'utilisateur.

1. Accéder à User sessions query

   Trouvez comment accéder à l'interface d'interrogation des sessions utilisateurs (User sessions query).

   Depuis le menu principal de Dynatrace ou via la barre de recherche globale, recherchez et sélectionnez l'application User sessions query. C'est depuis cette interface que vous pourrez saisir et exécuter vos requêtes USQL.

2. Requête basique

   Rédigez une requête USQL pour lister toutes les sessions utilisateurs ayant rencontré au moins une erreur (erreur JavaScript, erreur réseau, etc.).
   

   Astuce : L'interface propose une fonctionnalité d'auto-complétion très utile. N'hésitez pas à l'utiliser pour construire facilement vos requêtes USQL sans avoir à mémoriser toute la syntaxe.

   Dans la barre de recherche USQL, vous pouvez saisir cette requête :

   SELECT * FROM usersession WHERE totalErrorCount > 0

   ou

   SELECT * from usersession where hasError IS NOT NULL

3. Analyse par navigateur

   Rédigez une requête USQL permettant de compter le nombre de sessions regroupées par famille de navigateur (browserFamily) pour identifier les navigateurs les plus utilisés.
   
   

   Modes d'affichage : Une fois la requête exécutée, vous pouvez modifier la façon dont les résultats sont présentés en utilisant les options d'affichage (attention, certains modes d'affichage nécessitent un formatage précis des données) :

   • Table only: Affichage sous forme de tableau de données classique.
   • Bar chart : Représentation sous forme de diagramme en barres, idéal pour comparer des volumes entre différentes catégories (comme ici, le nombre de sessions par navigateur).
   • Pie chart : Représentation sous forme de graphique en secteurs (camembert), parfait pour visualiser la proportion de chaque catégorie par rapport au total.
   • Line chart : Représentation sous forme de courbe temporelle (nécessite d'inclure une dimension de temps dans la requête).
   • Single value : Affiche une valeur unique (utile pour les requêtes retournant un seul résultat comme un COUNT global).
   • Funnel : Représentation sous forme d'entonnoir pour visualiser l'abandon à chaque étape d'un parcours.

   Utilisez l'opérateur GROUP BY comme ceci :

   SELECT browserFamily, COUNT(usersessionId) FROM usersession GROUP BY browserFamily ORDER BY COUNT(usersessionId) DESC

4. Ajout au tableau de bord classique

   Trouvez comment ajouter le résultat de votre requête USQL dans un tableau de bord classique (Dashboard classic) pour pouvoir le consulter rapidement plus tard sans avoir à retaper la requête.

   Une fois votre requête exécutée et le mode d'affichage choisi (par exemple, Pie chart ou Bar chart), cliquez sur le bouton Pin to dashboard situé en haut de l'écran des résultats. Vous pourrez alors choisir un tableau de bord existant ou en créer un nouveau.

Construction d'un Funnel #

Ce que vous allez apprendre dans cette section

• Comprendre la notion d'entonnoir (Funnel)
• Construire une requête USQL multi-étapes
• Analyser un parcours de conversion utilisateur

Les entonnoirs permettent d'identifier à quelle étape les utilisateurs abandonnent un parcours donné. Pour cette manipulation, on va utiliser l'application 'HipsterShopLogs'.

1. Identification des chargements des pages

   Créez une requête USQL pour lister les pages chargées (actions de type 'Load') pour l'application 'HipsterShopLogs', en les regroupant par nom et en comptant le nombre d'occurrences.
   
   

   Information : Cette requête n'est pas obligatoire pour créer un entonnoir (funnel). Cependant, lorsque vous ne connaissez pas bien une application, elle s'avère très utile pour identifier les pages et les actions pertinentes à intégrer dans les différentes étapes de votre funnel.

   

   Voici la requête USQL qui permet de compter le nombre de chargements de page, regroupés par nom de page :

   SELECT name,count(*) FROM useraction WHERE application="HipsterShopLogs" and type="Load" GROUP BY name

2. Création du funnel de conversion

   Créez une requête USQL générant un funnel (entonnoir) à 4 étapes simulant un parcours classique, par exemple : Page d'accueil -> Liste des produits -> Afficher panier -> Paiement.

   L'opérateur FUNNEL est spécialement conçu pour cela en USQL. Voici un exemple de requête :

   SELECT FUNNEL(useraction.name="loading of page /" AS "Accueil", useraction.name = "loading of page /product" AS "Liste des produits", useraction.name = "loading of page /cart" AS "Afficher panier", useraction.name = "loading of page /cart/checkout" AS "Paiement") FROM usersession WHERE useraction.application="HipsterShopLogs"

   Vous pourrez ensuite visualiser ce résultat sous forme de graphique 'Funnel' dans les options de présentation Dynatrace.

Niveau de difficulté : ●●●○○ (3/5)