Une carte thermique (ou heatmap) est une visualisation des interactions de vos utilisateurs superposée aux données de Session Replay Il existe trois types différents de cartes thermiques :

• Click maps : Visualisez les interactions des utilisateurs (clics) pour comprendre comment les utilisateurs interagissent avec votre page.
• Top Elements : Visualisez un classement des 10 éléments ayant reçu le plus d’interactions sur une page donnée.
• Scroll maps : Visualisez jusqu’où les utilisateurs font défiler une page, y compris l’endroit où se situe la ligne de flottaison moyenne d’une page. La ligne de flottaison moyenne est le point le plus bas d’une page qu’un utilisateur peut voir sur son appareil sans faire défiler.

Utilisez les cartes thermiques pour examiner des données complexes en un coup d’œil et obtenir des informations sur l’optimisation de votre expérience utilisateur.

Prérequis

Pour commencer avec les cartes thermiques :

1. Vérifiez votre version du Browser SDK :
   • Pour Clickmaps, vous devez utiliser la dernière version du SDK (v4.40.0 ou ultérieure).
   • Pour Scrollmaps, vous devez être sur la version du SDK (v4.50.0 ou ultérieure).
2. Activez Session Replay.
3. DéfinisseztrackUserInteractions: true dans l’initialisation du SDK pour activer le suivi des actions (requis pour Clickmaps).

Mise en route

Accédez à Digital Experience > Real User Monitoring > Session Replay > Heatmaps. Sélectionnez votre application et votre vue.

Sur la Real User Monitoring landing page, sélectionnez votre application dans le sélecteur d’applications et la vue. À gauche du sélecteur de période, vous pouvez sélectionner le type de heatmap que vous souhaitez afficher : Top Elements, Clickmaps ou Scrollmaps.

Accédez à Digital Experience > Product Analytics > Heatmaps. Sélectionnez votre application et votre vue.

Depuis cette page, vous pouvez sélectionner le type de heatmap (Top Elements, Clickmaps, ou Scrollmaps) que vous souhaitez afficher pour une vue particulière.

Cliquez sur le nom d’une vue pour obtenir un aperçu plus détaillé de la carte thermique associée.

Vous disposez des options de vue supplémentaires suivantes :

• Pour changer la vue affichée, utilisez les sélecteurs View Name et Application en haut.
• Pour modifier la vue par appareil, utilisez le sélecteur Device type.
• Pour filtrer par nom d’action, utilisez le menu déroulant Filter actions by.
• Pour ajouter des filtres plus granulaires, comme une zone géographique spécifique par exemple, cliquez sur le bouton Add Filter.

Éléments principaux

Les heatmaps Top Elements agrègent les actions de clic sur une vue donnée en affichant les éléments les plus sollicités, ainsi que leur rang d’interaction. Le classement sur la carte elle-même correspond au nom de l’action sur le côté.

Survolez n’importe quel nom d’action dans le panneau pour mettre en surbrillance l’action correspondante sur la carte.

Clickmaps

Une Clickmap vous montre les actions avec lesquelles les utilisateurs interagissent le plus sur une vue donnée en agrégeant les actions de clic issues des sessions et en les visualisant sous forme de blobs sur la carte.

À gauche se trouve une liste de toutes les actions qui se sont produites sur la page, classées par fréquence. Lorsque vous cliquez sur une action, vous pouvez en savoir plus sur cette interaction, par exemple :

• Le nombre de fois où l’utilisateur a effectué l’action et où elle se situe dans les analyses globales des principales actions sur une page donnée.
• Si un signal de frustration s’est produit sur cette action (par exemple, si un utilisateur a cliqué frénétiquement sur ce bouton), vous pouvez également consulter les signaux de frustration associés.

Depuis cette vue, vous pouvez également cliquer sur le bouton Start a Funnel pour identifier l’abandon des utilisateurs.

Scrollmaps

Les Scrollmaps affichent l’activité de défilement agrégée sur une page donnée. Utilisez les Scrollmaps pour voir où se situe la ligne de flottaison moyenne de la page et combien d’utilisateurs défilent jusqu’à une profondeur donnée. Vous pouvez faire glisser la barre bleue flottante sur une Scrollmap jusqu’à la profondeur que vous souhaitez évaluer.

Le panneau à gauche de la Scrollmap fournit des aperçus de haut niveau avec des liens directs vers les résultats de requête, comme un lien vers une liste de vues dans lesquelles l’utilisateur a défilé au-delà d’un certain percentile. Sous le panneau d’aperçu se trouvent une minicarte de la page et un graphique de distribution affichant des données de défilement granulaires, utiles pour identifier l’endroit où se produit le plus grand abandon.

Captures d’écran

Une capture d’écran représente l’état d’une vue à un moment donné. Le changement de capture d’écran affiche des résultats différents, selon la capture d’écran sélectionnée. Vous pouvez également enregistrer des captures d’écran afin que chacun au sein de votre organisation puisse analyser le même état de vue.

Modification des captures d’écran

Depuis la vue de la carte thermique, cliquez sur le bouton Change Screenshot. Un menu déroulant apparaît avec trois options.

Choisissez parmi les captures d’écran précédemment enregistrées par vous ou vos coéquipiers. Cela permet de garantir que chacun au sein de votre organisation analyse le même état de vue.

Capturez une capture d’écran directement depuis votre application en direct. Utilisez cette option lorsque l’état dont vous avez besoin — tel qu’une fenêtre modale ouverte, un menu survolé ou une position de défilement spécifique — n’existe pas dans vos replays enregistrés.

Prerequisite : Installez l’extension Chrome Datadog Test Recorder avant d’utiliser cette option. L’extension charge votre application en direct dans un navigateur intégré à Datadog, vous permettant de naviguer jusqu’à la page exacte et à l’état de l’interface utilisateur que vous souhaitez capturer.

1. Cliquez sur Take new screenshot.

2. Accédez à la page que vous souhaitez capturer dans le navigateur intégré.

3. Faites défiler et interagissez avec la page pour afficher le contenu souhaité.

4. Sélectionnez un niveau de masquage pour empêcher l’apparition de données sensibles dans votre capture d’écran de carte thermique. Les paramètres de confidentialité configurés au niveau des éléments individuels dans votre code restent prioritaires. Pour plus d’informations, consultez Options de confidentialité.

5. Cliquez sur Take Screenshot. Un aperçu de la capture d’écran s’ouvre.

6. Examinez l’aperçu et cliquez sur Confirm pour appliquer la capture d’écran à votre carte thermique.

Sélectionnez une capture d’écran issue d’un Session Replay enregistré.

1. Cliquez sur Grab from replay.

2. Cliquez sur un événement d’action à droite pour sélectionner un instantané différent pour votre carte thermique.

3. Si la session ne contient pas l’action qui conduit à la capture d’écran souhaitée, retournez à la liste des Session Replays en cliquant sur Choose Another Replay.

4. Cliquez sur Take Screenshot pour appliquer la capture d’écran au point de pause sur la carte thermique.

Enregistrement des captures d’écran

Les captures d’écran prises à l’aide de Grab from replay ou Take new screenshot sont automatiquement enregistrées et deviennent la vue par défaut pour toute personne au sein de votre organisation qui ouvre la carte thermique. Pour enregistrer également la capture d’écran sélectionnée automatiquement à partir d’un replay récent, cliquez sur Save sur la capture d’écran actuelle.

Vous pouvez enregistrer plusieurs captures d’écran pour la même vue (par exemple : default view, open navigation menu, open modal) et basculer entre les captures d’écran enregistrées par vos coéquipiers.

Pour supprimer la capture d’écran actuellement enregistrée et revenir à celle sélectionnée automatiquement à partir d’une relecture récente, cliquez sur Unpin sur la capture d’écran actuelle.

Analyse des cartes thermiques au-delà de la durée de conservation des relectures

Dans Product Analytics, les données de clic survivent à la Session Replay utilisée comme arrière-plan. Voir Rétention des données. Pour afficher une carte thermique pour une période antérieure à la rétention de vos Session Replay :

1. Définissez la plage de dates sur une période couvrant les 30 derniers jours, afin qu’une carte thermique s’affiche avec un arrière-plan provenant d’un Session Replay récent.
2. Cliquez sur Save dans la capture d’écran actuelle pour l’épingler.
3. Redéfinissez la plage de dates sur la période que vous souhaitez analyser.

Vos anciennes données de clic apparaissent sur la capture d’écran épinglée. Vous pouvez également utiliser Take new screenshot pour capturer un état spécifique de votre application en direct.

Remarque : L’arrière-plan reflète votre application telle qu’elle apparaissait récemment, et non telle qu’elle apparaissait pendant la période que vous analysez. Si la mise en page de votre page a changé entre-temps, les clics peuvent apparaître sur les mauvais éléments.

Rétention des données

Une carte thermique combine deux types de données (la superposition - clics et défilements, et la capture d’écran d’arrière-plan), et Datadog conserve chacune pendant une période différente :

Une carte thermique nécessite les deux pour s’afficher. Si vous sélectionnez une période où les données de clic existent toujours mais où aucun Session Replay n’est disponible pour servir d’arrière-plan, la carte thermique affiche « Aucune donnée de Session Replay », même si vous pouvez toujours interroger ces actions dans l’Analytics Explorer.

Dans Product Analytics, si vous prévoyez d’analyser une vue sur une période supérieure à 30 jours, enregistrez-en une capture d’écran tant que les Session Replay sont encore disponibles. L’enregistrement d’une capture d’écran prolonge la rétention du Session Replay sous-jacent à 15 mois, de sorte que la carte thermique continue de s’afficher aussi longtemps que Datadog conserve vos données de clic Product Analytics. Consultez Analyse des cartes thermiques au-delà de la rétention des Session Replay.

Dans RUM, les événements d’action expirent après 30 jours, les cartes thermiques ne sont donc pas disponibles au-delà de cette fenêtre.

Pour les périodes de rétention qui s’appliquent à d’autres types de données, consultez Périodes de rétention des données. Pour prolonger la rétention sur des Session Replay individuels, consultez Extend data retention.

Étapes suivantes

Après avoir analysé les cartes thermiques, l’étape suivante consiste à comprendre l’action de l’utilisateur en explorant les données associées. Regardez les session replays associés pour voir les actions des utilisateurs dans le contexte de leur session globale, ou accédez à un Analytics Explorer dans RUM ou Product Analytics pour analyser vos données utilisateur.

Dépannage

Je regarde une carte thermique pour une vue donnée, mais elle m’affiche une page inattendue.

Les cartes thermiques sont basées sur les noms de vue. Selon la configuration de votre application, de nombreuses pages peuvent commencer à être regroupées sous le même nom de vue, ou vous pouvez commencer à avoir des noms de vue spécifiques.

La vue que j’ai sélectionnée n’affiche pas le contenu initial.

Les cartes thermiques sont générées à partir des données de Session Replay. L’algorithme intelligent de Datadog sélectionne un Session Replay à la fois récent et qui correspond le mieux à l’état initial de la page. Dans certains cas, ce Session Replay peut ne pas être celui que vous souhaitez utiliser. Pour changer l’instantané de votre carte thermique, utilisez le bouton Change Snapshot pour naviguer parmi les différents états d’un Session Replay et trouver celui que vous souhaitez. Si le Session Replay que vous consultez ne contient pas l’instantané que vous recherchez, vous pouvez utiliser le bouton Choose Another Replay pour sélectionner un autre Session Replay de la même vue.

Dans la liste d’actions sur le côté de ma carte thermique, je vois une icône indiquant un élément qui n’est pas visible dans la carte thermique.

L’infobulle sur l’icône indique que l’élément n’est pas visible. Cela signifie que l’élément est une action courante sur votre page, mais qu’il n’est pas affiché sur l’instantané dans la carte thermique. Pour voir cet élément, vous pouvez cliquer sur Change Snapshot dans le coin supérieur droit pour changer l’instantané de votre carte thermique vers un instantané où cet élément est présent.

Après avoir tenté de créer une carte thermique, je vois apparaître l’état « Aucune donnée de Session Replay ».

L’état « Aucune donnée de Session Replay » signifie que Datadog n’a trouvé aucun Session Replay à utiliser comme arrière-plan de carte thermique. Causes courantes :

• La période sélectionnée est plus ancienne que votre rétention de Session Replay, qui est de 30 jours par défaut. Les données de clic peuvent toujours exister, mais aucun Session Replay ne reste à utiliser comme arrière-plan. Consultez Analyse des cartes thermiques au-delà de la rétention des Session Replay.
• Aucun Session Replay ne correspond à vos filtres de recherche actuels.
• Vous avez récemment commencé l’enregistrement avec le Browser SDK, et le Session Replay n’est pas encore disponible. Cela peut prendre quelques minutes.

Après avoir tenté de créer une carte thermique, je vois apparaître l’état « Données insuffisantes pour générer une carte thermique ».

Cela signifie que Datadog n’a pas pu faire correspondre les actions utilisateur avec le Session Replay actuellement sélectionné. Cela se produit pour diverses raisons, telles que :

• Votre application n’utilise pas la dernière version du SDK (>= 4.20.0).
• Votre page a récemment changé de manière significative.

Toutes les informations utilisateur sur la page sont vides.

Les informations utilisateur ne sont pas collectées par défaut. Les cartes thermiques utilisent les informations utilisateur disponibles dans vos données de session pour afficher des informations pertinentes sur le comportement.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Session Replay for BrowsersDOCUMENTATION Session Replay for MobileDOCUMENTATION Capturez et analysez des cartes thermiques personnalisées dans Session ReplayBLOG Visualisez les interactions des utilisateurs sur vos pages en utilisant Scrollmaps dans Datadog HeatmapsBLOG