Why are my zonings/replays not working?

Troubleshooting checklist:

1. First, clear your browser's cache and cookies. In many cases, the root cause can be related to cache. Please check if the issue is resolved after clearing the cache and cookies before moving forward.

2. Make sure the web page finishes loading before taking a snapshot in the Zoning analysis.  

3. Check the chosen time period in the analysis context:

• Was the Contentsquare tag active at that time?
• Or has the page undergone changes between the date of the zoning creation and the selected period of time? (e.g. your page changed on January 8th. You created the zoning on January 19: Choose a time period starting after January 8 for your analysis).
  
  

How do Zoning and Replays collect 'Static resources' to automatically recreate my site?

Read this article to learn more about how Contentsquare collects your site's Static resources using the CS Scrapers. 

How do Zoning and Replays use 'Live resources' when static resources are unavailable?

Live resources use the live URLs of a page's resources (CSS, images, fonts) to render that page inside Contentsquare's Zoning analysis and Session replay features if the CS Scrapers are unable to download and store all of your static resources. 

• In Zoning analysis, if static resources are not available, Contentsquare fetches content from your live site for you to analyze. 
• In Session replay, if static resources are not available, you can temporarily select the 'Use live resources' option in the player to analyze data from your live site.

Why is my zoning/replay not displaying correctly? 

There are several reasons Contentsquare would be unable to download your site's static resources:

How to make zonings and replays work with your website

Listed below are the different methods available to configure your site to work with Contentsquare.

Create a custom header (Preferred method)

Creating a custom “X-CONTENTSQUARE-SIGNATURE” header to validate our requests is typically completed during your Contentsquare implementation, if you do not already have custom headers implemented and would like to, please contact your CSM for further assistance.

Reasons the custom header is preferred

• It is future-proof, i.e. if our IPs change, it will not affect zoning/ session replay functionality, as you won’t be using an IP whitelisting method.
• Provides the ability to monitor every incoming request from the proxy by filtering using our custom header.
• It is more secure than using a static custom header. 

How it works

When you create your Contenstquare project, a unique signature is generated. Contentsquare uses that unique signature in the header of all our HTTP requests. To allow requests to be made server-side you'll need to validate requests with the "X-CONTENTSQUARE-SIGNATURE" header value.

These are the three main elements that generate your unique signature:

1. A timestamp

2. Resource domain ex: https://www.cstore.com/other/microsoftteams-image-219_23938923.png

3. Your project's secret (each CS project has a secret generated during project creation which Contentsquare stores):

Here is an example of how it is generated -

Contentsquare generates a timestamp with 

Date.now() 

, hash the project’s secret that we got from proxy setting (cf. point 3 above) . Use the resource’s domain (cf. point 2) with the timestamp and update the hash with that. Then we build a new string with the timestamp, and concatenate the digest in “base64” to it. Result: "timestamp-hash"

Header request example -

How to decode the signature

1. Parse the string to extract the timestamp (equal 1674119100708 in the example above).
2. Use the domain of the resource.
3. Contentsquare has your secretSignature, and you will need to request it from your CSM. 

Once you have all three pillars used to generate the signature, verify it against Contentsquare's, and validate it.

How to validate the signature

1. Take the secret and use the “sha256” cryptographic function on it.
2. Then update the hash with the timestamp and domain.
3. Compose a string with the timestamp and the digest in base64 encoding : "{timestamp}-{digestBase64/hash}".
4. Depending on your backend, you will need to figure out a process to dynamically generate the signature and validate the requests with the X-CONTENTSQUARE-SIGNATURE .

For further security, it is possible to verify that the timestamp is within a certain time range from now. In the following code example, we check that it is no more than 5 minutes old – if it is older; the code rejects the signature.

Implementation with Code Example

NodeJS:

const crypto = require('crypto');

const secret = 'secretKey'; // Given by someone from CS
receivedHeaderExample = '1617243555555-D9gh1234G56789HijklMnopQrstuvWxYz=';

// Extract the timestamp and digest from the received header
const [timestamp, receivedDigest] = receivedHeaderExample.split('-');

// Example of extra security step to make sure timestamp is not too old
const currentTimestamp = Date.now();
if(currentTimestamp - timestamp > 5 * 60 * 1000) {
  throw new Error("Validation failed. Timestamp signature is
  older than 5 minutes");
}

// Recreate the string that was used to generate the digest
const dataToSign = `${resourceDomain}-${timestamp}`;

// Create a new digest using the same secret and algorithm
const hmac = crypto.createHmac('sha256', secret);
hmac.update(dataToSign);
const generatedDigest = hmac.digest('base64');

// Compare the newly generated digest with the one received in the header
if (receivedDigest === generatedDigest) {
  console.log('Header is valid');
  // Code to validate request
}

Whitelist Contentsquare IPs 

Note: Allow ports 80 (HTTP) and 443 (HTTPS) and the following IP addresses to prevent your proxy, firewall, or server configuration from blocking the scraper.

52.18.162.157
20.75.90.236
100.24.76.90
34.192.98.148
20.67.250.109
54.247.44.196
52.51.9.12
35.72.153.38
35.73.99.41

DOMAINS TO WHITELIST:

*.contentsquare.net

*.contentsquare.com

Use a proxy 

Contentsquare can help you bypass geographic restrictions using a proxy for a different location. A proxy has its own IP address and can operate in a specific region of the world.