How to analyze mobile devices in CS Live

This article shows you how to use Chrome's Developer Tool with CS Live to analyze your mobile website. By viewing your site in mobile format alongside CS Live metrics, you can see exactly how mobile users interact with your content. 

Before you begin

What you need:

• Google Chrome browser (Developer Tool doesn't work with Microsoft Edge for CS Live)
• CS Live extension already installed (see How to set up CS Live if you haven't installed it yet)
• A website with the Contentsquare tracking tag installed
• At least 30 days of mobile traffic data for reliable metrics

Step-by-step instructions

Step 1: Open Developer Tools

Developer Tools (also called DevTools) is a built-in feature in Chrome that lets you inspect and test websites.

There are two options to open Developer Tools:

The Right click-method

1. Right click on your page.

2. Select 'Inspect' from the menu that appears.

   

3. Developer tools will open at the bottom or side of your browser .

The Keyboard shortcut

• Mac: Command + Option + J
• Windows/Linus: Control + Shift + J

Step 2: Position Developer tools to the right side

1. Click the 'three vertical dots (⋮)' in the top-right corner of the Developer Tools panel.

   

2. Click the right-side dock icon (rectangle with bar on the right).

   

3. Developer Tools now appears on the right side of your screen.

Step 3: Find and open the CS Live tab

1. Look at the top menu inside Developer Tools (you'll see tabs like "Elements," "Console," "Sources").

   

2. Look for the 'Contentsquare - CS Live tab'.
3. Click on it to activate CS Live.

If you don't see 'Contentsquare - CS Live' in the menu:

1. Click the '>>' arrows on the right side of the tab menu.

   

2. Select Contentsquare - CS Live from the drop down.

    

Step 4: Open and start CS Live

1. Make sure you are logged into the Contentsquare platform.

2. Click on the 'CS Live' icon.

   

   If you don't see the CS Live icon, click on the 'Extensions' (puzzle icon and find CS Live from the drop down list).

3. Click 'Start analysis'. 
    

Step 5: Switch to mobile view

1. Click on the device in the top-left corner of Developer tools.

   

2. Your website now appears in mobile format on the left side.

3. The CS Live panel appears on the right side.

   

Step 6: Select a mobile device

1. Click the Device dropdown at the top of your website view (may say 'Responsive' or show a device name).

   

2. Select a specific device.
3. Your site resizes to match that device's screen size.

Step 7: Set up your analysis

1. Click on the 'calendar' icon and set your date range. E.g. Last 30 days.

   

2. Click 'Apply'.
3. The Device is automatically set to Mobile (you can change to Tablet if needed).

4. Select a metric you'd like to apply to your analysis.

   

Step 8: Analyze your content

1. Click on 'Edit zones'.

   

2. Choose the edit mode:
   • Single-zones: Create one single zone or a group of unrelated zones. 
   • Multi-zones: Create a group of zones that are at the same level in the HTML. Click on the elements to visualize the date.
3. Click on the element to create the zone (a coloured frame appears when a zone can be created).
4. Repeat for all elements you want to analyze.

Step 9: Save your zones

Once you have created your zones you can save them.

1. Click on 'More actions'.

   

2. Click 'Save to Contentsquare'.
3. Choose create a new Zoning and name it.
4. Click 'Save'.