Use the developer tool on your site to analyze a mobile device with CS Live. The developer tool will ensure that all zones appear on the screen as they appear for a user on their mobile device.
Step-by-step instructions
1. Open the developer tool by either right-clicking on your page and selecting 'Inspect' in the menu that opens, or by using the keyboard command shown below.
Or by using the following commands on your computer:
Need help setting your dock to the right?
Right-click on your page and select inspect. Click on the 'more menu' located to the right inside the top menu of the developer tool. In the menu that opens, navigate to 'Dock side' and select the right-side icon. |
2. Access CS Live inside the dev tool by using the top menu.
I don't see CS Live inside the menu
If you don't see the tab, use the arrows in the menu to see more options. When you find the CS Live tab, you can 'drag and drop' it to front of your developer menu: 1. Left-click on the tab and hold 2. Drag it to the front of the menu 3. Release the button |
The interface should now be visible inside the developer tool. In case you are not already logged into your account, a pop-up will appear prompting you to log in. Once logged in, the interface will appear.
3. Set your analysis context at the top of the developer tool. Select your time period and segment— the device will be set to Mobile by default.
- Remember to click on the device icon in the top left corner of your developer tool to adjust the interface size to mobile.
Read more about defining your Analysis Context
Defining your segment
1. Click on the people icon inside the Analysis Context, located at the top of the developer tool 2. Set "segment" as the condition in the first drop-down menu 3. Select "Match" or "Doesn’t match" in the second drop-down 4. Set the condition for your segment in the third drop-down, e.g. "Bounce users" 5. Choose if you want to add more conditions, then click 'Apply' or 'Save as new segment'. 6. All segments that are saved can be found inside the application
Setting your time period
1. Click on the calendar icon inside the Analysis Context 2. Select a start date and a finish date, or use the date CTAs on the right side of the calendar 3. Click 'Apply'
Selecting your deviceThe device will be set to mobile by default. In the Analysis Context, you can choose between analyzing a mobile device or a tablet. |
4. Select a metric inside the metric drop-down. You can switch the metric as many times as you like during your analysis.
5. Visualize the data by creating zones. Zones are colorful boxes in which the metric result for each piece of content is displayed.
Creating and deleting zones
To create or edit zones, you need to enable edit mode. You can either create one zone or several zones at the same time using the multi-zone capability.
Creating one zone
1. Click on the 'Zone' icon and select the 'Single zones' option.
2. Hover the content over which you want to create a zone—a colored frame appears over the item if a zone can be created.
3. Click inside the frame on the content you want to analyze
4. A colored box will appear over the content
Creating multiple zones
1. Click on the 'Zone' icon and select the 'Multi-zones' option.
2. Hover over the content on which you want to create zones
3. Several frames will appear over the content where zones will be created
4. Click inside one of the frames
5. Colored boxes will appear over the different content.
While in edit mode, you can also use the arrows on your keyboard to define which zones you want to create.
Deleting one zone
1. Navigate to the zone you want to delete
2. Click the cross/ eye icon inside the zone's top-right corner
Deleting all zones
1. Navigate to the zone you want to delete
2. Click the cross/ eye icon inside the zone's top-right corner
How to use different modes
Go further in your analysis by switching to a different mode. Choose between Zoning mode, Merchandising mode (for Merchandising users only), Page Metrics mode, and Session Replay mode.
Access the different modes by clicking the 'Mode' icon and selecting a mode from the drop-down inside the Developer tool:
Zoning Mode
- This is the default mode—in this mode, you have the same metrics available as when inside the Zoning Analysis inside the app.
Page Metrics Mode
The Page Metrics mode gives you an overview of page-specific metrics, such as Bounce rate and Conversion rate.
Merchandising Mode
- Allows you to use the same metrics as available inside the Visual Merchandising feature.
Session Replay Mode
- Lets you view URL replays directly from Session Replay. The replays shown match your Analysis Context.