How to use CS Live

What you are analyzing and why it's important

CS Live helps you understand how users interact with specific elements on your pages—buttons, images, links, navigation menus, promotional banners, forms, and more. By viewing engagement metrics directly on your website, you can quickly identify what's working and what needs improvement.

How to use CS Live 

Step 1: Launch CS Live 

1. Make sure you are logged into the Contentsquare platform.
    
2. Open a new browser window and navigate to the page on your website you want to analyze.

3. Click the CS Live extension icon in your browser toolbar.

   

   If the CS Live extension isn't visible in your browser toolbar, click the extension icon, find CS Live in the dropdown, and click 'Pin' to add it to your toolbar.

4. Click 'Start analysis'. If you're not logged into the Contentsquare platform, you'll see 'Log in'.

5. Click on 'Settings' and then 'CS Live position' to change the position of CS Live (top or bottom of your screen).

   

 Step 2: Set your analysis settings

1. Click the 'Analysis Context' in the CS Live ribbon.

   

2. Adjust and apply your settings:
   • Date range: Select a time period with sufficient data.
   • Device: Select which device to focus on.
   • Segment: Apply a segment, to focus on specific user groups. E.g. New users, returning users, etc.
      
3. Click 'Apply'.
    

4. Click 'Change page to analyze' to choose whether to analyze this specific URL or a page group from a mapping.

   
    

Step 3: Create zones to track key elements

A zone is an element on your page that you're tracking—like a button, image, or link. CS Live uses your site’s div structure to define where zones can be created. The number displayed in each zone corresponds to the metric selected in the ribbon. 

1. Click 'Edit mode' (the pencil icon).

   

2. Choose the edit mode. You can select between:
   • 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. 
     

3. Hover over elements on your page (a coloured frame appears when a zone can be created).

   

4. Click the coloured frame to create the zone.

   

   Tip

   You can use the arrows on your keyboard to define which zones you want to create.

5. Repeat for all elements you want to track.

6. Once you have created all the zones you need you can save them. Learn more about how to save your zones in this article.

    

   Tip

   To analyze multiple pages, click the 'arrow' in the ribbon or press 'CTRL' to collapse CS Live and switch pages. The ribbon and zones will temporarily hide. Click the 'arrow' or press 'CTRL' again to reopen  them.

   

   
    

Step 4: Analyze with metrics

Click on the metrics menu located on the left inside the ribbon and select which metric you'd like to automatically apply to your analysis. (You can change the metric you are analyzing anytime during your analysis).

Recommended metrics, explained:

Learn more about metrics in Contentsquare.

Step 5: Compare performance

Compare your content’s performance metrics across two different devices, date ranges, and segments.

1. Click 'Analysis Context'.

   

2. Click 'Compare'.

   

3. Select what to compare:
   • Date ranges (E.g. last week vs. this week)
   • Segments (E.g. new vs. returning users)
   • Devices 
      
4. Click 'Apply'.
    
5. You'll see metrics with percentage changes:
   • Green (+): Performance improved
   • Red (-): Performance declined

Step 6: Monitor real time trends

CS Live Trends helps you to identify trends in how users are interacting with your content in real-time, enabling you to take quick action on your site. It works by using a “sliding window” to continuously compare zone metrics for the last hour versus the previous hour, automatically refreshing every 1 minute.

Top use cases

• Monitor and react to time sensitive campaigns. For example: You're running a big sales event, such as Black Friday, and want to further promote content that is doing well, or change course on content that isn’t.
• Test new content and reduce riskFor example: You're testing new content on a high traffic page and want to see instant results, so you can act before it has a significant impact on your KPIs

Sliding Comparison Window Overview

Commonly used in data analytics, a sliding window continuously evaluates data over a set period of time. In this case, we use the sliding window to continuously evaluate a set time period of 60 minutes (e.g. 13:00 to 14:00). With each 1 minute that passes the window of evaluation shifts and evaluates the next 60 minutes (e.g. 13:01 to 14:01), enabling us to display a regular stream of incoming data.

Enabling CS Live Trends

1. Click the ‘Live’ button from the CS Live ribbon. 

   

   The Live button will turn green and begin comparing zone performance for the last hour to the previous hour before that, for today’s date.

2. Hover over the date ranges to see the hours being compared. From here, you will also note that the times in each comparison window will update every minute.

   

Note: if you manually update your analysis context and the comparison window exceeds 24 hours, the sliding window with minute-to-minute updates is deactivated.

You will see two numbers displayed on each zone:

• Your metric of reference, according to the most recent hour that has passed
• The percentage change for that metric in comparison to the hour beforePositive fluctuations are displayed with a “+” symbol highlighted in green
• Negative fluctuations are displayed with a “-” symbol in red

In the example above, an e-commerce site enables the Live button at 14:00 to monitor a new banner on their homepage during a limited-time sale. They see from the zone metric on the banner that it had 9 clicks in the previous hour (from 12:00 to 13:00), which is an 11.1% decrease in comparison to the hour before that. With each minute that passes, the data is refreshed and they see that the numbers continue to decrease, indicating a downward trend. Therefore, they decide to take action and change the content before it continues to impact their sale.

Step 7: Switch modes

1. Click the 'Switch to' button.

   

2. Select from the available modes:
   • Zoning Mode (default)
   • Session Replay Mode (Only URL replays are available, and not full Session Replays. Please note that it's not possible to take a snapshot from any of the URL replays).
   • Page Metrics Mode: View overall page performance at a glance.
   • Merchandising Mode (only if you have the Merchandising add-on)Allows you to use the same metrics as available inside the Visual Merchandising feature.
      

FAQs

What to read next

How to analyze mobile devices with CS Live

How to troubleshoot CS Live

Take our CS Live course on Contentsquare University!