Analyse des expériences mobiles - Résolution des problèmes de zonage

Pourquoi ma capture d'écran ne contient-elle pas tout l'écran ?

Lorsque vous prenez une capture d'écran de votre écran, certaines parties peuvent ne pas être complètes en raison de contenus nécessitant un défilement – comme les écrans d'accueil, les listes de produits ou les détails des produits.

Solution :

• Android :  Capturez plusieurs captures d'écran de l'écran et enregistrez-les dans la même zone. 
• iOS : Prenez une longue capture d'écran pour capturer l'ensemble de l'écran.

 

Spécifique à Android

Problème :

L'écran dont vous souhaitez prendre une capture d'écran ne se rend pas bien sur Android (par exemple, les couleurs de fond ne s'affichent pas). 

Ce qui cause cela :

Contentsquare ne peut pas capturer les propriétés de style personnalisées dans la capture d'écran. Si des propriétés de style personnalisées ont été utilisées dans le code de votre écran, telles que la couleur de fond, celles-ci ne seront pas rendues dans votre capture d'écran. 

Solution :

Utilisez le mode de capture d'écran statique pour capturer vos captures d'écran. Si vous souhaitez avoir l'ensemble de l'écran, capturez plusieurs captures d'écran de chaque section et enregistrez-les dans la même zone.

Que signifie un 0,00 % ou N/A sur une zone ?

Une zone affiche 0 % lorsque aucune donnée n'a été collectée.

N/A signifie non applicable et est affiché dans le cas où il n'y a pas suffisamment de sessions pour que les données soient significatives, ou lorsqu'une zone contient trop de zones enfants. Essayez de sélectionner une zone plus petite ou un autre segment.

Pourquoi le taux de tap est-il à 0 % pour certaines zones ?

Cause racine : les gestes ne sont pas attachés aux zones les plus basses mais à une zone parente.

Comment valider :

1. Entrez en mode création de zone,

2. Survolez la zone avec 0%,

3. Appuyez sur “touche haut” pour sélectionner la zone parente,

4. Répétez jusqu'à ce que vous ayez sélectionné la zone parente qui a la même taille que celle avec 0%,

5. Créez la zone,

6. Si l'hypothèse est vraie, vous aurez des données.

Sous-cause principale (iOS uniquement) : Les zones sont UIIMAGEVIEW

Solution :

Créez une zone sur une vue parente pour obtenir les taps sur l'image ou utilisez l'option “multi zones” cela sélectionnera la zone parente

Pourquoi le taux de tap est-il à 0% pour toutes les zones (ou une partie significative d'entre elles) ?

Cause principale 1 : l'instantané a été pris sur une version de l'application qui ne correspond pas au contexte d'analyse

Comment valider :

1. survolez le “Instantané X sur Y” pour voir la version de l'application de l'instantané

2. Ouvrez l'AC et ajoutez une condition sur la version de l'application correspondant exactement à celle de l'instantané

3. Appliquez les modifications de l'AC

4. si les données sont maintenant légitimes, c'était la cause principale

Cause principale 2 : le SDK Android n'attache pas les gestes à la vue attendue

Voir l'explication ici.

Pourquoi les captures d'écran échouent-elles ?

Cause principale 1 : Aucune vue d'écran déclenchée auparavant

Pour qu'une capture d'écran soit acceptée par le serveur, elle doit être attachée à une vue d'écran.

Comment nous identifions le problème :

1. Vous devez essayer de reproduire le problème en consultant les journaux

2. Vérifiez s'il y a eu un événement de vue d'écran avant ou non lorsque vous essayez de capturer l'instantané

3. S'il n'y en avait pas, cela signifie que c'est le problème

Solution : 

Vous devez mettre à jour le plan de marquage des écrans pour suivre l'écran souhaité

Cause principale 2 : L'instantané est trop grand / La vitesse de téléchargement du réseau est trop lente

La capture de l'instantané en cours prend un certain temps (environ 30 secondes) et échoue ensuite.

Comment nous identifions le problème :

1. Regardez l'écran et si c'est un long écran avec beaucoup d'images, c'est un bon candidat,

2. Quel type de connexion internet avez-vous, surtout en ce qui concerne l'upload. Si c'est un ADSL avec <1Mb/s, c'est un autre indice,

3. Essayez de capturer l'écran sur une connexion internet Fibre ou en utilisant 4G (meilleur upload). Si cela réussit, alors c'est le problème,

4. Si vous êtes sur Android, essayez d'utiliser le mode de capture d'instantané statique pour capturer l'écran. Si cela réussit, alors c'est le problème.

Solution :

Parlez à l'équipe de mise en œuvre

Pourquoi y a-t-il une grande zone grisée avec le texte "Un-tracked webview" ?

Cause racine : Le suivi du Webview ne fonctionne pas pour cet écran.

Le suivi du Webview n'a pas été activé dans les paramètres du SDK

Comment valider le problème :

1. Allez dans les paramètres du SDK,

2. Vérifiez les drapeaux de fonctionnalités,

3. nous devrions avoir ceci :

[{"name":"web_views_tracking","minVersion":"2.0.0","enabled":true}]

Solution :

Dites à l'équipe de mise en œuvre de définir le bon drapeau de fonctionnalité pour le suivi du Webview.

Si la version du SDK est supérieure à 4.1.0, l'équipe de mise en œuvre n'a pas besoin d'ajouter le drapeau de fonctionnalité manuellement.

Le suivi du Webview n'a pas été implémenté du côté de l'application native

Comment valider le problème

1. Avez-vous implémenté le suivi du Webview du côté de l'application native ?

2. si ce n'est pas le cas, c'est au moins une partie du problème

Solution

Suivez les étapes d'implémentation du Webview.

Que faire si le suivi du Webview n'a pas été implémenté du côté de la page web ?

Comment valider le problème :

1. 1. Sur iOS : Recherchez un journal spécifique suivant cette documentation.

   2. sur Android : Avez-vous implémenté la balise de suivi du Webview sur les pages web chargées dans le Webview ?

Solution :

Suivez les étapes d'implémentation de la balise de suivi du Webview.

L'instantané n'est pas rendu comme prévu ou est cassé

Cause racine 1 : Les éléments d'interface utilisateur natifs ne sont pas pris en charge

Comment identifier le problème

Si l'instantané ne ressemble pas à l'écran capturé (parties manquantes) :

• dans la liste des instantanés

• le panneau latéral de l'instantané de zonage

• l'éditeur de zonage

Et si l'élément manquant est un « popup » ou un « menu » ou un élément UI apparaissant par le bas (bottom sheet), alors c'est probablement un élément nativeUI que nous ne supportons pas pour le moment.

Vous pouvez trouver plus de détails et les limitations actuelles ici

Cause racine 2 [sur Android uniquement] : remplacement de style personnalisé

Comment identifier le problème :

Si l'instantané a l'air bon dans la liste des instantanés et le panneau latéral de l'instantané de zonage, mais que l'instantané présente des problèmes d'affichage comme : couleurs incorrectes, sections noires, etc.

C'est probablement un cas où le SDK a des difficultés à obtenir les bonnes valeurs de style parce que vous les avez remplacées dans votre code.

Le symptôme peut même être que l'instantané affiche un écran différent, mais si vous faites attention, vous pouvez voir certains éléments de l'écran attendu comme du texte ou des icônes.

Solution :

Utilisez l'instantané statique. Il a été développé pour gérer les cas particuliers

Cause racine 3 [sur Android uniquement] : Jetpack Compose n'est pas encore supporté sur Android

Jetpack Compose est un kit d'outils UI Android introduit par Google pour construire des interfaces utilisateur natives. Il simplifie le processus de développement UI. Aujourd'hui, le SDK Android est capable d'analyser la partie de l'UI construite avec Compose pour identifier tous les éléments internes. Cela conduit à capturer la partie construite avec Compose comme un seul élément sans la capacité d'analyser les éléments internes.

Pourquoi ne puis-je pas créer une zone sur un élément de liste sur iOS (SwiftUI) ?

Lors de l'utilisation du zonage, vous n'arrivez pas à sélectionner une zone correspondant à un élément qui est la ligne d'une liste. Mais vous pouvez sélectionner des éléments enfants.

Explication :

Le SDK a une limitation lors de la prise d'un instantané ou de la collecte d'événements de geste des écrans SwiftUI qui contiennent des composants VStack et LazyVStack.

Dans certains cas, SwiftUI ne rendra pas un élément UI dans la hiérarchie de la vue pour un élément de liste, c'est particulièrement vrai lorsque l'élément n'a pas de couleur de fond attribuée (ou a une couleur transparente).

Dans l'exemple suivant, nous avons une liste d'éléments, chacun incluant l'image de Luigi et les 2 lignes de texte. Nous voulons créer la zone sur cet élément, mais l'élément UI correspondant à l'élément de liste n'existe pas. Par conséquent, vous ne pourrez pas créer la zone. La raison en est que SwiftUI n'a pas créé l'élément dans UIKit car il n'était pas considéré comme nécessaire :

Solution :

Si possible, nous recommandons d'ajouter un modificateur de couleur de fond pour chaque élément à l'intérieur de la pile. Le modificateur de fond ne peut pas être transparent, il doit être d'une couleur. Cela peut être la même couleur que la couleur de fond de la pile.

Alternativement, nous savons que ce problème n'existe pas lorsqu'un composant Liste est utilisé. Il offre la possibilité d'afficher une liste d'éléments verticalement et présente également les avantages du chargement paresseux et de la réutilisation des éléments, ce qui a un impact moindre sur les performances.

Dans le deuxième exemple ci-dessous, l'élément UI existe. Vous pouvez créer la zone grâce à une couleur de fond qui a été ajoutée, permettant à SwiftUI de créer l'élément dans UIKit :

Que lire ensuite

• Configurer et analyser un écran avec Zoning (Applications)
• Dépannage de l'Analyse de Zoning.