Experience Analytics Mobile - Zoning troubleshooting

Why my screenshot doesn't contain the entire screen?

When taking a screenshot of your screen, some parts of it may not be complete due to content requiring scrolling – like home screens, product lists or product details.

Solution:

• Android:  Capture several screenshots of the screen and save them to the same zoning. 
• iOS: Take a long screenshot to capture the entire screen.

 

Android-specific

Problem:

The screen you want to take a screenshot of doesn’t render well on Android (for example, background colors don’t show). 

What’s causing it:

Contentsquare can’t capture custom-style properties in the screenshot. If custom-style properties have been used in the code of your screen, such as background color, these will not render in your screenshot. 

Solution:

Use the Static screenshot mode to capture your screenshots. If you’d like to have the whole screen, capture several screenshots of each section and save to the same zoning.

What does a 0.00 % or N/A on a zone mean?

A zone shows 0% when no data has been collected.

N/A stands for not applicable and is shown in the case there are not enough sessions for the data to be significant, or when a zone contains too many children zones. Try to select a smaller zone or another segment.

Why is tap rate at 0% for certain zones?

Root cause: gestures are not attached to the lowest zones but to a parent zone

How to validate:

1. Enter in zone creation mode,

2. Hover the zone with 0%,

3. Press “key up” to select the parent zone,

4. Repeat until you have selected the parent zone that has the same size as the one with 0%,

5. Create the zone,

6. If the assumption is true, you will have data.

Sub-Root cause (iOS only): Zones are UIIMAGEVIEW

Solution:

Create a zone on a parent view to get the taps on the image or Use the option “multi zones” it will select the parent zone

Why is tap rate at 0% for all zones (or a significant part of them)?

Root cause 1: snapshot has been taken on an app version that is not matching the analysis context

How to validate:

1. hover the “Snapshot X out of Y” to see the app version of the snapshot

2. Open the AC and add a condition on app version exactly matching the one from the snapshot

3. Apply AC changes

4. if the data is now legitimate, this was the root cause

Root Cause 2: Android SDK does not attach the gestures to the expected view

See the explanation here.

Why are screenshots failing?

Root cause 1: No screenview triggered before

For a screenshot to be accepted by the server, it has to be attached to a screenview.

How we identify the issue:

1. You must try to reproduce the issue by looking at the logs

2. Check if there has been a screenview event before or not when you try to capture the snapshot 

3. If there wasn’t it means that it is the issue

Solution: 

You must update the screen tagging plan to track the desired screen

Root cause 2: Snapshot is too big/Network upload speed is too low

Snapshot capture in progress takes a while (like 30 seconds) and then fails.

How we identify the issue:

1. Take a look at the screen and if it’s a long screen with lots of images, it is a good candidate,

2. What kind internet connection you have, especially about the upload. If it’s an ADSL like with <1Mb/s, it’s another hint,

3. Try to capture the screen on a Fiber internet connection or using 4G (better upload). If It succeeds, then it is the issue,

4. If you are on Android, try to use the static snapshot mode to capture the screen. If It succeeds, then it is the issue.

Solution:

Talk to the implementation team

Why is there is a big greyed-out area with the text "Un-tracked webview"?

Root cause: Webview tracking is not working for this screen.

Webview tracking has not been enabled in SDK settings

How to validate the issue:

1. Go to SDK settings,

2. Check the features flags,  

3. we should have this:

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

Solution:

Tell Implementation Team to set the proper feature flag for webview tracking.

If the SDK version is higher than 4.1.0, the Implementation team does not need to add the feature flag manually.

Webview tracking has not been implemented on native app side

How to validate the issue

1. Have you implemented the webview tracking on the native app side?

2. if not, that is at least part of the issue

Solution

Follow webview implementation steps.

What to do if Webview tracking has not been implemented on web page side?

How to validate the issue:

1. 1. On iOS: Look for a specific log following this documentation.

   2. on Android: Have you implemented the webview tracking tag on the web pages loaded in the webview?

Solution:

Follow webview tracking tag implementation steps.

Snapshot is not rendered as expected or broken

Root cause 1: Native UI element are not supported

How to identify the issue

If the snapshot does not look like the screen captured (missing parts):

• in the snapshot list

• the zoning snapshot side panel

• the zoning editor

And the missing element is a “popup” or a “menu” or a UIelement appearing from the bottom (bottom sheet) then it’s most probably a nativeUI element that we don’t support for now.

You can find more details and current limitations here 

Root cause 2 [on Android only]: style custom override

How to identify the issue:

If the snapshot looks good in the snapshot list and the zoning snapshot side panel but the snapshot has display issues like: wrong colors, black sections, etc.

This is most probably a case of SDK having trouble getting the right style values because you have overridden it in your code.

The symptom can even be that the snapshot is displaying a different screen but if you pay attention you may see some elements from the expected screen like text or icons. 

Solution:

Use the Static snapshot. It has been developed to handle edge cases

Root cause 3 [on Android only]: Jetpack Compose is not supported yet on Android

Jetpack compose is an Android UI toolkit introduced by Google for building native UI. It simplifies the UI development process. Today, the Android SDK is able to parse the part of the UI built with Compose to identify all inner elements. This leads to capture the part built with Compose as one element without the ability to analyze inner elements.

Why can't I create a zone on a list element on iOS (SwiftUI)?

When using Zoning, you don't manage to select a zone matching an element that is the row of a list. But you can select child elements.

Explanation:

The SDK has a limitation when taking a snapshot or collecting gesture events of SwiftUI screens that contain VStack and LazyVStack components.

In certain cases, SwiftUI will not render a UI Element in the View hierarchy for a list element, this is especially true when the element does not have a background color attributed (or has a transparent color).

In the following example, we have a list of items, each including the Luigi image and the 2 lines of text. We want to create the zone on this element, but the UI element corresponding to the list item doesn’t exist. Consequently, you won't be able to create the zone. The reason being that SwiftUI has not created the element in UIKit because it was not considered necessary:

Solution: 

If possible, we recommend to add a background color modifier for each element inside the stack. The background modifier cannot be transparent, it has to be a color. It can be the same color as the background stack. 

Alternatively, we know that this problem doesn't exist when a List component is used. It provides the ability to display a list of items vertically and also comes with the benefits of lazy loading and elements reuse which have a lesser impact on performance.

In the second example below, the UI element exists. You can create the zone thanks to a background color that was added to it, allowing SwiftUI to create the element in UIKit:

What to read next

• Set up and analyze a screen with Zoning (Apps)
• Troubleshooting Zoning Analysis.