Pourquoi mes zonings/replays ne fonctionnent-ils pas ?

Checklist de dépannage :

1. Tout d'abord, effacez le cache et les cookies de votre navigateur. Dans de nombreux cas, la cause profonde peut être liée au cache. Veuillez vérifier si le problème est résolu après avoir effacé le cache et les cookies avant de continuer.

2. Assurez-vous que la page web a fini de se charger avant de prendre une capture dans l'analyse de zoning.  

3. Vérifiez la période choisie dans le contexte d'analyse :

• Le tag de Contentsquare était-il actif à ce moment-là ?
• Ou la page a-t-elle subi des modifications entre la date de création du zoning et la période sélectionnée ? (par ex. votre page a changé le 8 janvier. Vous avez créé le zoning le 19 janvier : choisissez une période commençant après le 8 janvier pour votre analyse).
  
  

Comment le Zoning et les Replays collectent-ils des 'Ressources statiques' pour recréer automatiquement mon site ?

Lisez cet article pour en savoir plus sur la façon dont Contentsquare collecte les ressources statiques de votre site à l'aide des CS Scrapers. 

Comment le Zoning et les Replays utilisent-ils des 'Ressources réelles' lorsque les ressources statiques ne sont pas disponibles ?

Les ressources réelles utilisent les URL en direct des ressources d'une page (CSS, images, polices) pour rendre cette page dans les fonctionnalités d'analyse de Zoning et de replay de session de Contentsquare si les CS Scrapers ne peuvent pas télécharger et stocker toutes vos ressources statiques. 

• Dans l'analyse de Zoning, si les ressources statiques ne sont pas disponibles, Contentsquare récupère le contenu de votre site en direct pour que vous puissiez l'analyser. 
• Dans le replay de session, si les ressources statiques ne sont pas disponibles, vous pouvez temporairement sélectionner l'option 'Utiliser les ressources réelles' dans le lecteur pour analyser les données de votre site en direct.

Pourquoi mon zoning/replay ne s'affiche-t-il pas correctement ? 

Il existe plusieurs raisons pour lesquelles Contentsquare ne pourrait pas télécharger les ressources statiques de votre site :

Comment faire fonctionner les zonings et les replays avec votre site web

Ci-dessous, vous trouverez les différentes méthodes disponibles pour configurer votre site afin de fonctionner avec Contentsquare.

Créer un en-tête personnalisé (Méthode préférée)

Créer un en-tête personnalisé “X-CONTENTSQUARE-SIGNATURE” pour valider nos demandes est généralement complété lors de votre implémentation de Contentsquare, si vous n'avez pas déjà d'en-têtes personnalisés mis en œuvre et que vous souhaitez le faire, veuillez contacter votre CSM pour obtenir de l'aide supplémentaire.

Raisons pour lesquelles l'en-tête personnalisé est préféré

• Il est à l'épreuve du futur, c'est-à-dire que si nos adresses IP changent, cela n'affectera pas la fonctionnalité de zoning / session replay, car vous n'utiliserez pas une méthode de liste blanche d'adresses IP.
• Fournit la possibilité de monitorer chaque demande entrante depuis le proxy en filtrant à l'aide de notre en-tête personnalisé.
• Il est plus sûr que d'utiliser un en-tête personnalisé statique.

Comment cela fonctionne

Lorsque vous créez votre projet Contentsquare, une signature unique est générée. Contentsquare utilise cette signature unique dans l'en-tête de toutes nos requêtes HTTP. Pour permettre aux requêtes d'être effectuées côté serveur, vous devrez valider les requêtes avec la valeur de l'en-tête "X-CONTENTSQUARE-SIGNATURE" .

Voici les trois principaux éléments qui génèrent votre signature unique :

1. Un horodatage

2. Domaine de la ressource ex : https://www.cstore.com/other/microsoftteams-image-219_23938923.png

3. Le secret de votre projet (chaque projet CS a un secret généré lors de la création du projet que Contentsquare stocke) :

Voici un exemple de la façon dont il est généré -

Contentsquare génère un horodatage avec 

Date.now() 

, hache le secret du projet que nous avons obtenu des paramètres du proxy (cf. point 3 ci-dessus). Utilisez le domaine de la ressource (cf. point 2) avec l'horodatage et mettez à jour le hachage avec cela. Ensuite, nous construisons une nouvelle chaîne avec l'horodatage et concaténons le digest en “base64” à cela. Résultat : "timestamp-hash"

Exemple de requête d'en-tête -

Comment décoder la signature

1. Analysez la chaîne pour extraire l'horodatage (égal à 1674119100708 dans l'exemple ci-dessus).
2. Utilisez le domaine de la ressource.
3. Contentsquare a votre secretSignature, et vous devrez le demander à votre CSM. 

Une fois que vous avez les trois piliers utilisés pour générer la signature, vérifiez-la par rapport à celle de Contentsquare et validez-la.

Comment valider la signature

1. Prenez le secret et utilisez la fonction cryptographique “sha256” dessus.
2. Ensuite, mettez à jour le hachage avec l'horodatage et le domaine.
3. Composez une chaîne avec l'horodatage et le digest en encodage base64 : "{timestamp}-{digestBase64/hash}".
4. Selon votre backend, vous devrez trouver un processus pour générer dynamiquement la signature et valider les requêtes avec le X-CONTENTSQUARE-SIGNATURE .

Pour plus de sécurité, il est possible de vérifier que l'horodatage est dans une certaine plage horaire par rapport à maintenant. Dans l'exemple de code suivant, nous vérifions qu'il n'est pas plus vieux de 5 minutes – s'il est plus vieux, le code rejette la signature.

Implémentation avec exemple de code

NodeJS :

const crypto = require('crypto');

const secret = 'secretKey'; // Donné par quelqu'un de CS
receivedHeaderExample = '1617243555555-D9gh1234G56789HijklMnopQrstuvWxYz=';

// Extraire l'horodatage et le digest de l'en-tête reçu
const [timestamp, receivedDigest] = receivedHeaderExample.split('-');

// Exemple d'étape de sécurité supplémentaire pour s'assurer que l'horodatage n'est pas trop vieux
const currentTimestamp = Date.now();
if(currentTimestamp - timestamp > 5 * 60 * 1000) {
  throw new Error("Échec de la validation. La signature de l'horodatage est
  plus vieille que 5 minutes");
}

// Recréer la chaîne qui a été utilisée pour générer le digest
const dataToSign = `${resourceDomain}-${timestamp}`;

// Créer un nouveau digest en utilisant le même secret et algorithme
const hmac = crypto.createHmac('sha256', secret);
hmac.update(dataToSign);
const generatedDigest = hmac.digest('base64');

// Comparer le nouveau digest généré avec celui reçu dans l'en-tête
if (receivedDigest === generatedDigest) {
  console.log('L\'en-tête est valide');
  // Code pour valider la requête
}

Mettre en liste blanche les adresses IP de Contentsquare 

Il peut être nécessaire de mettre en liste blanche les adresses IP de Contentsquare, auquel cas vous devriez consulter notre guide sur Adresses IP et domaines à mettre en liste blanche.

Utiliser un proxy 

Contentsquare peut vous aider à contourner les restrictions géographiques en utilisant un proxy pour un emplacement différent. Un proxy a sa propre adresse IP et peut fonctionner dans une région spécifique du monde.