A snapshot is a static version of your app that allows you to analyze how users are interacting with content on a specific screen.
Inside one zoning, you can analyze several snapshots. This makes it possible to analyze different versions of one screen, for example, before and after a screen revamp or with a menu opened and closed.
How to capture a snapshot
You capture a snapshot of your app using your mobile device:
1. Click the phone icon next to your project name and scan the QR code that generates to access your app.
2. Tap the option ‘Tap to take a snapshot’
3. Your snapshot will automatically save to your Contentsquare Snapshots library.
How to capture the entire screen
If you want to capture your entire screen in a snapshot, you can do using your mobile device and what's known as a Long Snapshot:
1. Scroll down the screen content until you reach the desired end of your snapshot/zone.
2. Tap the snapshot button to begin your capture. If you are using the snapshot capture for the first time, a pop-up appears explaining how to complete the capture. Click ‘Got it!’ to close the pop-up and tap the snapshot button again.
3. A panel will be displaying the snapshot's sending progress to the snapshot library (it can take a little longer if a lot of elements were captured).
4. Once complete, you will see the screen below and your capture will be added to the snapshot library. You can now use it to create a zoning!
How to use the right snapshot
Depending on the analysis context you set (device, date range, segment), snapshots can be less relevant if your app has since been updated, and this can impact your Zoning Analysis results.
To get the most accurate results for your analysis, it’s recommended that you select snapshots that have the most sessions available. Contentsquare uses your analysis context to automatically detect if an app version with more sessions is available.
1. Click ‘App version’ and 'View' to open the side panel for more information, including any suggested app versions that have a greater percentage of sessions.
2. From there, you can change your snapshot (capture a new one or select an existing one from your library) or ignore the suggestion.
How to use an existing snapshot from your snapshot library
1. You can access your existing snapshots when changing a snapshot (as above), or by clicking 'My snapshots' when analzying a zoning.
2. In your snapshot library, hover over 'i' icon that displays the percentage of sessions for more information. You can also select a specific app version by using the ‘Filter by App version’ dropdown and selecting one of the app versions listed.
How is the snapshot rendered in Contentsquare?
When you take a snapshot, our SDKs will parse the rendered UI of the screen (even some elements not visible on the screen in that moment), and build a tree of all the UI elements, attaching visual properties to each of them (position, width and height, background color, image of the content…).
With this tree, the Zoning module can render the snapshotted screen, allowing you to analyze the different content on the screen via zones.
Device light mode and dark mode
Snapshots captured from your app will reflect your end-user's device configuration of their light or dark mode theme settings. However, note this is not the case for snapshots captured from WebViews or Long Snapshots on Android - these will instead reflect your own device's light or dark mode configuration (where you are viewing the snapshot from).
Multiple windows open on a single screen
In cases where there are multiple windows open on a single screen (for example, one on top of the other), the snapshot captured will reflect the active window (the foremost window). The windows behind will not be displayed in the snapshot.
Deleting a Snapshot
1. When analyzing a snapshot in Zoning Analysis, click the 'My snapshots' button.
2. Hover over a snapshot you want to delete and click the 'Delete' icon.
3. If the snapshot is used within any other zonings, this will be indicated on the onscreen modal.
4. Click 'Delete Snapshot' to permanently delete the snapshot (including from any zonings where it's used).
Troubleshooting your Snapshot
Problem: The snapshot you took doesn’t contain the entire screen.
What’s causing it: This is most likely due to that the screen contains content that requires scrolling, like home screens, product lists or product details.
Solution:
- Android: Capture several snapshots of the screen and save them to the same zoning.
- iOS: Take a long snapshot to capture the entire screen.
Read more here
A Contentsquare snapshot can only capture the content that is rendered by the app. What happens is that in the cases mentioned above, the content that is not visible yet is not rendered, and the content disappears from the screen when scrolling.
The reason is that mobile app developers often use specific UI components to render lists of content, which purpose is to optimize the app’s performance and responsiveness by only rendering the visible content.
Android-specific
Problem: The screen you want to take a snapshot 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 snapshot. If custom-style properties have been used in the code of your screen, such as background color, these will not render in your snapshot.
Solution: Use the Static snapshot mode to capture your snapshots. If you’d like to have the whole screen, capture several snapshots of each section and save to the same zoning.
Read more here
The default properties are captured without taking into account the custom properties. Because of this, if you capture a snapshot in the default Dynamic snapshot mode, your snapshot may have display issues.
You can solve this issue thanks to Static snapshots.
How does it work?
Static snapshot only allows you to capture the visible part of the screen of your phone. Unlike the default mode, static mode will use the screenshot of the entire screen (similar to the thumbnail) and will build a tree of visible UI elements only, attaching less style properties (only position, width and height).
How to activate it?
Long-press the snapshot button to access the settings, toggle the static snapshot flag on, take snapshots by tapping on the snapshot icon.
Troubleshooting technical explanations
Developers use specific UI components (UITableView or UICollectionView for iOS and RecyclerView for Android) to make it easy to efficiently display large sets of data. Developers can supply the data and define how each item looks, and it will dynamically create the elements when they're needed.
Those individual container elements are recycled. When an item scrolls off the screen, it doesn't destroy its container. Instead, the view (container) is reused for new items that have scrolled onscreen. This reuse vastly improves app's performance and responsiveness, and reduces power consumption.
Usually, developers will not use these specific UI components in these 2 cases:
The screen content is smaller than the device height:
Screen content is not bigger than the viewport, so there's no need to scroll because all the content is displayed. No screenshot issue, the capture is working fine.
The screen content is a bit longer, but rendered:
Content is a bit longer than the viewport, developers can decide to create all the elements, even the ones that are not yet visible on the screen and a bit further down in the screen.
In that case, Contentsquare will be able to capture a snapshot (on iOS or on Android default mode) of all UI elements that have been rendered, even if it requires to scroll a little more.