This article will provide you with everything you need to know about screenshots (ex Snapshots) in Zoning Analysis. A screenshot is a static version of your site's pages used for analysis in the Zoning Analysis. In the Screenshot library, you will find all the screenshots that have been created of your site.
How to capture a screenshot and access your library
You can capture a new screenshot by clicking on the picture button directly from inside a Zoning:
You will be able to see your screenshots gallery for this Zoning, and/or add new screenshot(s) by clicking on the button 'Add new screenshot' in the menu.
To change the screenshot you are currently analyzing, simply open your screenshots library and scroll to the one you want to analyze in Zoning.
How to use the right screenshot
Changes made to your website's HTML can have an impact on your Zoning Analysis results. Keep in mind that theses changes can be both visible and invisible on the front end of your website:
- Visible change: a new carousel is added to a page,
-
Invisible change: a
divhas changed name.
Read more about this topic in the following article: Troubleshooting Zoning Analysis.
Best practice
Always make sure that your screenshot date matches the date set in your Analysis Context and vice versa.
Contentsquare will automatically detect if the date of the screenshot doesn't match the date of the Analysis Context.
If dates are mismatching, you will see a small colored dot next to the date of the screenshot, clicking on the screenshot will reveal the following message:
If this message shows up, it is recommended to change either:
- The date(s) of your analysis,
- The screenshot(s) concerned by the Zoning Analysis.
How to use Live Capture with Zoning
With the Live Capture option, you are able to add a screenshot capturing dynamic elements in different stages into an existing zoning. This allows you to, for example, capture a menu in an open state to analyze its entries:
- Select your Zoning: choose an existing zoning, or create a new zoning, containing the dynamic element you want to analyze,
-
Add a screenshot: add a new screenshot, by using the screenshot button located in the top right corner of your Zoning. Then select 'Add a new screenshot'.
- Take new screenshot: click on 'Take new screenshot' in the new window that will open with different screenshots from your website.
- Use Live Capture: from the live capture tool you can now take a new screenshot from your website – open or activate the dynamic element(s) of your choice (search bar, menu...) and capture a new screenshot by clicking on the button or use keyboard shortcut. Don't forget to click on 'Save to Contentsquare'.
- Using your new screenshot: the new screenshot you took is automatically applied your Zoning. You can now create new zones and analyze the content located inside the dynamic element.
The screenshots are located in the gallery of all the screenshots, you can easily navigate between them, rename them or even delete them if they don't match your needs.
What are retroactive screenshots and how to use them
Retroactive screenshots are previous versions of your site that can be used in Zoning Analysis based on Session Replay data. The retroactive screenshots allow you to analyze older versions of your site up to the number of days that have been set for the Session Replay retention.
When to use a retroactive screenshot?
Retroactive screenshots are useful when comparing new and old design versions of your site, pages or page elements. It is an effective tool when also performing A/B tests.
How to create a Zoning using retroactive screenshot?
To analyze an older version of your page, create a new Zoning using a retroactive screenshot of the page:
- From the main menu, click on 'New Zoning' and on 'Select a page or page group',
- Select which page you want to create a Zoning of, select the date range you want to analyze and click 'Apply',
- The next screen will show you the screenshots from your website, click on 'View more screenshots' which opens the screenshot library.
- When inside the library, select the screenshot(s) you want to analyze by hovering over the thumbnail and clicking 'Select'. It's also possible to preview the screenshot by clicking on the 'Preview' button.
- Once you've selected the screenshot(s) you want, click on 'Start Analysis and add to library'.
Filter your screenshots in the library
You can also filter your screenshots inside the library:
- Searching for a screenshot of a specific page using the page's URL,
- Specifying or changing your Analysis Context,
- Or specifying your scroll level to see pages containing lazy loaded content.
If you can't find any retroactive screenshot(s)
One of the reason might be because you have 'Full page scrolled' selected as your page scroll level.
Go to the page scroll level drop-down menu and select 'Any scroll level' to populate more screenshots.
Using retroactive screenshots in the comparison mode
- Open the Zoning Analysis and select a zoning,
- Toggle on the Comparison mode
- Click on ‘My Snapshots’
- Once the library opens, select the snapshot you want.
How to create a zoning with a dynamic page state?
Using a dynamic page state means that you can analyze a zone’s state after it has been clicked or hovered. For example: an open menu or an active search field.
To analyze a dynamic page state, you need to edit a current screenshot:
- Hover the screenshot on which you want to change the page state. Click the ‘Modify snapshot’ pen icon that appears in the top-right corner.
- Click on the zone you want to change the page state in the screenshot
- In the screenshot selector (side panel) that opens, select the dynamic state you want to analyze
- Click ‘Start analysis and add to library’.
Note
You can change the screenshot you are analyzing directly from the Zoning interface, see the steps described above.
How to capture a screenshot from Session Replay
From a replay you can capture a screenshot and save it, either as a new Zoning or as a new screenshot to add to an existing one:
- In Session Replay, select the replay you want watch,
- Hover over the timeline of the replay and click the ‘Snapshot’ button
- Select ‘Save Snapshot’ in the side-in panel that opens
- Save your screenshot to a new or existing zoning:
- ‘New Zoning’: name your Zoning and click ‘Save’,
- ‘Existing Zoning’: select the existing zoning you want to add the screenshot to in the drop-down menu and click ‘Save’.
- A new tab will open with the screenshot you saved to an existing Zoning or a new one.