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

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 ?

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.

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.

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.

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.

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.

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.

2. Afficher les 3rd party ressources

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

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).
   

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.

   
   
   

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.

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.

3. Détails d'une session

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

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.

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).

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.

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.

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.

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.

   

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.

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