Pour permettre à votre site Web de communiquer avec l'application Bazaarvoice afin de récupérer du contenu généré par les utilisateurs (CGU) et de l'afficher, vous devez ajouter le code Bazaarvoice à votre site Web.

Cette rubrique indique les étapes que votre équipe technique doit suivre pour :

  • Intégrer le CGU Bazaarvoice à vos pages produits
  • Intégrer les balises schema.org (SEO) à vos pages produits
Aide détailléeDémarrage rapideVérifier votre travail

Ajouter du code aux pages de produits

Pour afficher le contenu de Questions & Answers ou de Ratings & Reviews sur les pages produits, vous devez ajouter du code Bazaarvoice au code HTML de la page. Le contenu publié par Bazaarvoice sur vos pages tire parti des capacités d’indexation de JavaScript de Google.

Attention : Ces instructions ne sont pas compatibles avec le script de chargement BV (bv.js) ; veuillez suivre ces instructions si votre implémentation utilise le fichier scout (bvapi.js). Si votre application utilise bv.js, reportez-vous à la documentation concernant l’intégration de l’affichage.

Suivez les étapes ci-après pour intégrer le code Bazaarvoice.

Étape 1 : ajouter l'API JavaScript

Pour intégrer l'API JavaScript, procédez comme suit sur chaque page qui affiche le contenu de Bazaarvoice :

  1. Ajoutez le code JavaScript approprié dans la balise <Head>.

    • Utilisez le code suivant pour l’environnement de pré-production (l’environnement de pré-production sert aux tests et au développement et est généralement visible uniquement en interne. Assurez-vous que chaque URL de Bazaarvoice référencée dans le code contienne «/bvstaging» dans le domaine.)

      <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>

    • Utilisez le code suivant pour l’environnement de production (l’environnement de production est visible extérieurement. Le contenu de cet environnement de production est visible sur votre site internet en direct)

      <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
  2. Remplacez <client_name> par la valeur fournie par l'équipe d'implémentation de Bazaarvoice. Cette valeur est sensible à la casse.
  3. Veuillez remplacer <site_ID> par l'identifiant de la zone de déploiement que vous voulez utiliser. Cette valeur est définie dans la plateforme de configuration accessible à partir du Workbench de Bazaarvoice. La zone de déploiement par défaut se nomme « main_site » (site principal). Contactez votre représentant Bazaarvoice pour vous assurer que l'identifiant est correct ou connectez-vous à la plateforme de configuration pour le vérifier.
  4. Remplacez <locale> si la langue de votre site Web n'est pas l'anglais américain.

Sachez que bvapi.js Ne peut pas être chargé de façon asynchrone. Toutefois, ce fichier n'a aucun impact perceptible sur les performances dans la plupart des conditions, et toutes les ressources restantes sont chargées de façon asynchrone.

Étape 2 : insérer l'appel de configuration Bazaarvoice

Suivez les étapes ci-dessous pour appeler le fichier de configuration Bazaarvoice :

  1. Insérez le code JavaScript suivant dans la balise <head> après l'appel du fichier bvapi.js et avant tous les appels $BV.ui.
    <script type="text/javascript"> 
	$BV.configure('global', { productId : 'ProductID123' });
</script>
  2. Remplacez ProductID123 par l'identifiant correct du produit. Les identifiants de produit sont sensibles à la casse. Évitez les erreurs en veillant à ce que l'identifiant corresponde parfaitement à l'attribut ExternalID de votre catalogue produits.

Étape 3 : placer le conteneur du résumé

Insérez le conteneur de résumé (le conteneur de résumé affiche un résumé des données de Ratings & Reviews ou de Questions & Answers sur la page du produit. Bazaarvoice injecte les données les plus récentes dans <div id=”BVRRSummaryContainer”>, dont l’apparence est définie par les paramètres d’affichage que vous avez spécifiés dans la plateforme de configuration) là où vous voulez voir apparaître le résumé des Ratings & Reviews ou Questions & Answers. Chaque page produit doit contenir le code de conteneur suivant.

<div id="BVRRSummaryContainer"></div>
Remarque : Ce code ne doit apparaître qu'une seule fois sur la page, même si vous implémentez Ratings and Reviews et Questions and Answers. Ajoutez ce code à proximité du haut de la page de votre produit et du nom ou de l'image du produit comme illustré ci-dessous.

Étape 4 : ajouter le code de Ratings & Reviews

Insérez le code suivant sous la description du produit pour afficher le contenu de Ratings & Reviews.

Remarque : si ce contenu apparaît derrière un onglet ou un autre élément de l'interface utilisateur qui n'est visible que dans certaines conditions, Bazaarvoice ne pourra pas rendre ce contenu visible à moins que vous ne fournissiez le code permettant de l'afficher. Vous devez utiliser doShowContent pour afficher le contenu, tel qu'indiqué dans le pseudo code suivant.
<div id="BVRRContainer"></div>
<script type="text/javascript">
   $BV.ui( 'rr', 'show_reviews', {
      doShowContent : function () { 
         // If the container is hidden (such as behind a tab), put code here to make it visible 
         //(open the tab).
      }
   });
</script>

Étape 5 : ajouter le code de Questions & Answers

Insérez le code suivant sous la description du produit pour afficher le contenu de Questions & Answers.

Remarque : si ce contenu apparaît derrière un onglet ou un autre élément de l'interface utilisateur qui n'est visible que dans certaines conditions, Bazaarvoice ne pourra pas rendre ce contenu visible à moins que vous ne fournissiez le code permettant de l'afficher. Vous devez utiliser doShowContent pour afficher le contenu, tel qu'indiqué dans le pseudo code suivant.
<div id="BVQAContainer"></div>
<script type="text/javascript">
   $BV.ui( 'qa', 'show_questions', {
      doShowContent : function () { 
         // If the container is hidden (such as behind a tab), put code here to make it visible 
         //(open the tab).
      }
   });
</script>

Pourquoi ajouter des balises schema.org ?

Ajouter des balises schema.org à vos pages produits permet aux principaux moteurs de recherche d'explorer et d'indexer vos avis. Les moteurs de recherche peuvent également extraire et afficher des informations utiles (comme les notes par étoiles des produits ou les extraits des avis clients) dans les résultats de recherche.

C'est particulièrement utile lorsqu'on tient compte du fait que 95 % des consommateurs lisent les avis avant d'effectuer un achat.

Vous devez ajouter des balises schema.org à chacune de vos pages produits (PDP).

Remarque : Google extrait et affiche les données des rich snippets à partir d'un balisage structuré (comme schema.org ) dans le HTML de votre site Web.

Voici un exemple de rich snippet :

Exemple de rich snippet

Les rich snippets sont également connus sous le nom de résultats enrichis. Ce sont des informations utiles comme les notes par étoiles et les extraits des avis clients.

Formats schema.org (JSON-LD vs microdonnées)

Google a officiellement annoncé qu'il privilégie le format de données structurées JSON-LD. Il s'agit d'un format plus simple à mettre en œuvre par rapport aux balises au format microdonnées pour plusieurs raisons :

  • Vous pouvez rassembler toutes vos balises JSON-LD au sein d'un bloc de code JavaScript distinct qui va dans une section « en-tête » de votre page HTML.
  • Vous devez intégrer les balises de microdonnées à des éléments HTML incorporés.

Bazaarvoice prend en charge les données structurées dans les deux formats suivants :

  • JSON-LD : consultez la rubrique sur les balises schema.org JSON-LD pour en savoir plus.
  • Microdonnées : le kit SDK BVSEO côté serveur ne prend en charge que les balises au format microdonnées.
Format Description et emplacement
JSON-LD (recommandé) JSON-LD signifie JavaScript Object Notation for Linked Data (notation objet issue de JavaScript pour données liées). JSON est un format d'échange de données léger, à la fois facile à lire et écrire pour les humains, et simple à analyser et générer pour les machines. Au lieu d'ajouter des attributs schema.org aux éléments individuels d'une page (au format microdonnées), JSON-LD vous permet de distinguer les rich snippets que vous voulez présenter dans un bloc de code JavaScript distinct. Cela facilite l'ajout, la mise à jour ou la suppression des données structurées JSON-LD.
Remarque : intégrez votre code structuré JSON-LD à une balise <script> dans la section « en-tête » de votre page HTML.
Microdonnées Les microdonnées ont recours à des attributs de balise HTML pour marquer le contenu que vous souhaitez présenter en tant que données structurées. Les données structurées de type microdonnées communiquent les mêmes informations que celles de JSON-LD. Toutefois, utiliser le format microdonnées peut s'avérer plus chaotique, car les données structurées sont incorporées avec le contenu HTML.
Remarque : les microdonnées sont intégrées à des balises <div> et typiquement positionnées avec les éléments incorporés dans le DOM (Document Object Model) de votre page.
Remarque : cette rubrique explique la marche à suivre pour ajouter des balises structurées schema.org au format microdonnées à vos pages produits. Le kit SDK BVSEO côté serveur ne prend en charge que les balises au format microdonnées. Le format JSON-LD n'est pas non plus pris en charge par notre ancien produit Product Ratings & Reviews (PRR).

Ajouter des balises schema.org au format microdonnées

Suivez les étapes ci-après pour ajouter des balises structurées schema.org au format microdonnées à une page produit.

  1. Ajoutez le type schema.org suivant à votre code PDP : 
    <div itemscope itemtype="http://schema.org/Product">
    Remarque : les pages ne peuvent contenir qu'un type schema.org.
  2. Marquez votre nom de produit avec des balises Schema.org. Utilisez l'une des lignes de code suivantes, en remplaçant ProductName par le nom de produit utilisé dans votre flux de produits. 
    <!-- Ajoutez la classe de produits schema.org à la balise h1-->
	<h1 itemprop="name">ProductName</h1> 
<!-- Ou ajoutez ka classe dans les méta-balises--> 	
	<meta itemprop="name" content="ProductName">

  3. La balise div doit contenir à la fois les conteneurs BVRRSummaryContainer et BVRRContainer, comme indiqué dans l'exemple de code suivant. Si vous avez implémenté la fonction Questions & Answers, assurez-vous d'inclure également le conteneur BVQAContainer.

    • L' id renseigne le script de chargement quant à l'affichage du résumé des notes. Le product-id dans l'appel de configuration renseigne le script de chargement quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.
    • L' id renseigne le script de chargement quant à l'affichage des avis. Le product-id dans l'appel de configuration renseigne le script de chargement quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.
    • L' id renseigne le script de chargement quant à l'affichage de Questions & Answers. Le product-id dans l'appel de configuration renseigne le script de chargement quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.
    4. Remarque : Assurez-vous que chaque nom de produit est identique ou très similaire au nom dans votre flux de produits. Avec Google, il est nécessaire d'avoir des noms de produits similaires pour les balises schema.

Cet exemple illustre ce à quoi vos données structurées au format microdonnées doivent ressembler. Référez-vous à la rubrique Ajouter des balises schema.org JSON-LD pour en savoir plus sur le format JSON-LD.

<!DOCTYPE html> <html lang="en"> <head> <!-- JavaScript API- Staging; replace in <client_name>, <site_ID>, and <locale>, and remove /bvstaging FOR PRODUCTION --> <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script> <!-- Bazaarvoice Configuration Call --> <script type="text/javascript"> $BV.configure('global', { productId: 'ProductID123' // Use relevant ExternalId from product feed }); </script> </head> <body> <!-- schema.org Markup --> <div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">ProductName</h1> <!--product name must be identified with itemprop=name attribute--> <!-- Summary Container goes above the fold near product name or image --> <div id="BVRRSummaryContainer"></div> <!-- Ratings & Reviews Container goes below product description --> <div id="BVRRContainer"></div> <script type="text/javascript"> $BV.ui('rr', 'show_reviews', { doShowContent: function() { // If the container is hidden (such as behind a tab), put code here to make it visible //(open the tab). } }); </script> <!-- Q&A code --> <div id="BVQAContainer"></div> <script type="text/javascript"> $BV.ui('qa', 'show_questions', { doShowContent: function() { // If the container is hidden (such as behind a tab), put code here to make it visible //(open the tab). } }); </script> </div> </body> </html>
Remarque : c'est à vous que revient la tâche de valider les balises schema.org sur chaque PDP.

Valider les balises schema.org

Bazaarvoice vous recommande d'utiliser l'outil de test des résultats enrichis afin de valider vos balises et d'identifier toute erreur.

Remarque : les étapes suivantes concernent l'utilisation de l'outil de test des résultats enrichis et s'appliquent que vous validiez le JSON-LD ou le format microdonnées.

Pour tester votre intégration des balises schema.org :

Ces étapes de validation supposent que vous utilisiez Chrome, Safari ou Firefox.

  1. Rendez-vous sur votre PDP afin de vérifier que vos conteneurs « Summary » et « Reviews » apparaissent bien sur la page.
  2. Copiez le code HTML publié de votre page produit à partir de votre navigateur et envoyez-le en tant qu'extrait de code à l'un des outils de test des données structurées que nous recommandons. Utilisez l'inspecteur situé dans les outils pour développeurs de votre navigateur.
    1. Pour ouvrir l'inspecteur, effectuez un clic droit sur la PDP pour ouvrir le menu contextuel. Sélectionnez Inspect (Inspecter) pour ouvrir les outils pour développeurs.
      Remarque : ces outils de test reposent sur le HTML actif dans le navigateur. Vous avez peut-être l'habitude d'inspecter en utilisant View (Afficher) > Developer (Développeur) > View Source (Afficher la source) (ou cmd + opt + U sous OS X), mais cela affichera seulement le HTML transmis par le serveur. Utiliser Inspect (Inspecter) permettra d'accéder au balisage injecté de façon dynamique par Ratings & Reviews.
    2. Dans l'onglet Elements (Éléments) ou Inspector (Inspecteur) des Outils pour développeurs, repérez l'élément schema.org < html code... >. Faites un clic droit et sélectionnez Copy (Copier) > Copy outer HTML (Copier le HTML externe). Veillez à copier le DOM intégral pour obtenir des résultats valides.
      3. Exemple de rich snippet
  3. Dans un nouvel onglet, ouvrez l'outil de test des résultats enrichis .
  4. Sélectionnez l'onglet CODE et collez le HTML copié à l'aide de l'outil pour développeurs Inspect (Inspecter). L'outil de test des résultats enrichis vous montrera ensuite comment il interprète les données structurées qu'il trouve.
  5. Vérifiez que les points suivants sont bien respectés pour les balises schema.org :
    • Le produit est un élément de niveau supérieur
    • Les avis sont bien intégrés au produit
  6. L'outil de test des résultats enrichis détectera les ERRORS (ERREURS) et/ou les WARNINGS (AVERTISSEMENTS). Les balises au format microdonnées ne devraient pas renvoyer d'erreurs ou d'avertissements.
    • Si des erreurs sont détectées, sélectionnez le rapport Errors pour trouver la source du code posant problème.
    • Consultez les avertissements et vérifiez que votre code existant en est la cause. Les balises microdonnées non liées à du code Bazaarvoice ne sont pas prises en charge.

Pourquoi devrais-je opter pour JSON-LD ?

Remarque : Bazaarvoice recommande aux clients existants (qui utilisent les balises au format microdonnées) de migrer vers le balisage JSON-LD pour garantir la durabilité du contenu. Cela ne s'applique pas si vous utilisez le kit SDK BVSEO côté serveur, puisque BVSEO prend uniquement en charge les balises au format microdonnées.

Google a officiellement annoncé qu'il privilégie le format de données structurées JSON-LD. Si vous ne fournissez pas votre CGU dans ce format, votre site Web est moins susceptible d'apparaître dans les premiers résultats de recherche des acheteurs. Cela peut se traduire par des opportunités manquées d'acquérir naturellement de nouveaux clients.

Passer du format microdonnées au JSON-LD

Si vous effectuez une transition depuis les données structurées au format microdonnées :

  1. Supprimez toute microdonnée existante de vos pages HTML.
  2. Référez-vous aux instructions Ajouter des balises schema.org JSON-LD.
Remarque : JSON-LD est activé par défaut pour les nouveaux clients Ratings & Reviews.

Exemple de code complet

L'exemple suivant contient la plupart du code à ajouter à chaque page de détails du produit (PDP). Utilisez ce code seulement comme référence. Ne copiez-collez pas ce code sans ajouter les informations relatives à votre entreprise. Vous devez modifier ce code pour que votre implémentation soit prise en charge et placer chaque extrait de code à l'emplacement approprié dans le code HTML de chaque page.

<!DOCTYPE html> <html lang="en"> <head> <!-- JavaScript API- Staging; replace in <client_name>, <site_ID>, and <locale>, and remove /bvstaging FOR PRODUCTION --> <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script> <!-- Bazaarvoice Configuration Call --> <script type="text/javascript"> $BV.configure('global', { productId: 'ProductID123' // Use relevant ExternalId from product feed }); </script> </head> <body> <!-- schema.org Markup --> <div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">ProductName</h1> <!--product name must be identified with itemprop=name attribute--> <!-- Summary Container goes above the fold near product name or image --> <div id="BVRRSummaryContainer"></div> <!-- Ratings & Reviews Container goes below product description --> <div id="BVRRContainer"></div> <script type="text/javascript"> $BV.ui('rr', 'show_reviews', { doShowContent: function() { // If the container is hidden (such as behind a tab), put code here to make it visible //(open the tab). } }); </script> <!-- Q&A code --> <div id="BVQAContainer"></div> <script type="text/javascript"> $BV.ui('qa', 'show_questions', { doShowContent: function() { // If the container is hidden (such as behind a tab), put code here to make it visible //(open the tab). } }); </script> </div> </body> </html>

Ajouter le nombre d'avis ou de questions aux pages de produits

Vous pouvez ajouter du code pour personnaliser une page de détails du produit (PDP) à partir du nombre d'avis ou de questions sur le produit. Votre code appelle $BV.ui pour renvoyer le nombre total d'avis ou de questions sur le produit, puis exécute une action en utilisant cette valeur.

Pour inclure le nombre d'avis, utilisez l'exemple de code suivant :

var rrPromise = $BV.ui('rr', 'show_reviews');
rrPromise.then(function (data) { 
  // Do something meaningful with the data
});

Pour inclure le nombre de questions, utilisez l'exemple de code suivant :

var qaPromise = $BV.ui('qa', 'show_questions');
qaPromise.then(function (data) { 
  // Do something meaningful with the data
});

L'argument des données est un objet qui possède les propriétés suivantes :

  • Id : l'identifiant du produit
  • TotalReviewCount : le nombre total d'avis pour l'Id
  • TotalQuestionCount : le nombre total de questions pour l'Id
  • TotalAnswerCount : le nombre total de réponses pour l'Id
  • TotalContentCount : la somme de TotalReviewCount, TotalQuestionCount et TotalAnswerCount pour l'Id

Intégrer les fonctions de retour sur événement

Les fonctions de retour JavaScript permettent à votre site Web de répondre aux événements qui se produisent dans l'application Bazaarvoice, comme l'ouverture d'un formulaire de soumission d'avis par un client. L'application Bazaarvoice fonctionne avec un ensemble d'événements JavaScript que vous pouvez utiliser pour répondre à des événements donnés. Lorsqu'un client déclenche un événement, le code de Bazaarvoice exécute la fonction de retour que vous y avez associée, et transmet un objet contenant des données au sujet de l'événement.

Vous pouvez utiliser les fonctions de retour JavaScript pour enregistrer les interactions des consommateurs et y répondre avec l'application Bazaarvoice. Ainsi, vous pouvez par exemple :

  • Enregistrer lorsqu'un client accède à une page qui exécute l'application Bazaarvoice.
  • Enregistrer des informations au sujet d'un client, comme son nom, son numéro de téléphone et son adresse e-mail.
  • Mesurer l'impact de certains événements sur les statistiques essentielles de conversion, comme le nombre de fois où un client a ouvert le formulaire de soumission d'avis mais ne l'a pas envoyé.
  • Afficher du contenu en réponse à l'interaction d'un client avec l'application Bazaarvoice, par exemple afficher un coupon de réduction après qu'un client ait envoyé un avis.

Suivez les étapes ci-après pour intégrer les fonctions de retour JavaScript :

  1. Sélectionnez un événement que vous souhaitez surveiller.

    Lorsque vous spécifiez un retour pour un événement, la fonction de retour s'exécute lorsque l'événement survient. Vous pouvez spécifier des retours pour les événements suivants :

    • bvRender — Déclenchement lors de l'exécution initiale de l'application sur le site.
    • submissionLoad — Déclenchement lors de l'ouverture par un consommateur du formulaire de soumission pour donner un avis, laisser un commentaire ou répondre à une question.
    • submissionClose — Déclenchement lors de la fermeture par un consommateur du formulaire de soumission sans l'avoir envoyé.
    • submissionSubmitted — Déclenchement lors de l'envoi par un consommateur du formulaire de soumission.

    Lorsque vous paramétrez une fonction de retour pour l'un de ces événements, la fonction peut recevoir un objet comme seul argument. Cet objet contient certaines informations au sujet de l'événement. Vous pouvez sélectionner l'une des propriétés suivantes de l'objet :

    • Id — Identifiant de produit
    • TotalAnswerCount — Nombre de réponses associées au produit
    • TotalQuestionCount — Nombre de questions associées au produit
    • TotalReviewCount — Nombre d'avis associés au produit
    • TotalContentCount — Nombre total d'éléments de contenu pour le produit, si cette information est pertinente

    En plus des propriétés ci-dessus, les événements submissionLoad, submissionClose et submissionSubmitted reçoivent un objet avec une propriété contentType, qui indique le type de contenu associé à l'envoi. Les valeurs envoyées peuvent être : Review, Comment, Question ou Answer.

  2. Ajoutez une fonction de retour à la configuration globale $BV.configure .

    Repérez le script $BV.configure dans votre code, et ajoutez la fonction de retour avec le code JavaScript que vous souhaitez exécuter lorsque l'événement se produit.

    Le code suivant associe une fonction de retour à l'événement bvRender.

    <script>
$BV.configure('global', {
  events : {
    bvRender : function (data) {
      // JavaScript code that executes when the Bazaarvoice application renders.
    }
  }
});
</script>

Mise en place d'une stratégie de sécurité du contenu

Si vous prévoyez de mettre en place une stratégie de sécurité du contenu (CSP) sur votre site, Bazaarvoice vous recommande d'utiliser le mode HTTP Content-Security-Policy-Report-Only, qui est implémenté avec bvapi.js. Bazaarvoice recommande également d'utiliser des attributs nonce dans le cadre d'une politique CSP stricte.

Consultez cet article pour en savoir plus sur les avantages de l'adoption de la CSP.

CSP niveau 2 et niveau 3 (en utilisant l'attribut nonce)

Remarque : Le niveau 3 de la CSP n'est pas pris en charge par tous les navigateurs.

Les étapes suivantes sont valables pour les méthodes CSP utilisant des balises méta ou un en-tête de réponse HTTP :

  1. Placez l'attribut nonce-∗ dans les scripts avec bvapi.js, $BV.configure et $BV.UI.
  2. Si vous utilisez la fonction de téléchargement de vidéos, vous devez également autoriser l'accès depuis les domaines suivants sur frame-src et image-src : ∗ youtube.com ∗ bazaarvoice.com

CSP niveau 1 (pas d'attribut nonce)

Suivez ces étapes de configuration minimale :

  1. Autorisez l'accès aux domaines suivants dans votre directive CSP 'default-src' :
    • ∗.bazaarvoice.com
    • uk.cdn-net.com
    • six.cdn-net.com
    • mpsnare.iesnare.com
  2. Assurez-vous que la directive « font-src » comprend la valeur « data » : pour data-URI que Bazaarvoice utilise pour charger les polices personnalisées.
  3. Si vous utilisez la fonction de téléchargement de vidéos, vous devez également autoriser l'accès depuis les domaines suivants sur frame-src et image-src : ∗ youtube.com ∗ bazaarvoice.com
  4. Placez $BV.configure et $BV.ui dans des fichiers séparés. (Les paramètres $BV.ui tels que productID, peuvent être extrait de l'espace de noms global.)

Contactez l'assistance client Bazaarvoice si vous avez d'autres questions concernant la CSP dans votre intégration Bazaarvoice.

Performance et temps de chargement

Le contenu Bazaarvoice ne devrait pas ralentir votre site car la majeure partie des fichiers Bazaarvoice sont non bloquants ou asynchrones. Le fichier scout (bvapi.js) est le seul code synchrone de Bazaarvoice sur votre page. Il se charge en même temps que le reste du contenu de la page. L'emplacement de ce fichier scout et de l'appel $BV.ui a un impact sur le temps de chargement du contenu asynchrone car le contenu ne se chargera pas tant que le fichier scout n'aura pas été lui-même chargé.

Procédez comme suit pour optimiser le temps de chargement :

  1. Placez le fichier scout (bvapi.js) le plus haut possible dans la balise <head> de la page, idéalement juste après les composants clés du site.
  2. Placez l'appel $BV.ui le plus haut possible dans la balise <body>.
  3. Réalisez des tests de vitesse sur votre site pour vous assurer que votre contenu Bazaarvoice se charge aussi efficacement que possible.

Effectuer un test de vitesse

Pour analyser comment Bazaarvoice s’intègre à votre site, utilisez WebPagetest pour exécuter des tests de performance. Effectuez chaque test dans un nouvel onglet afin de pouvoir les comparer. Vous pouvez utiliser n'importe quels paramètres de configuration, du moment que vous conservez les mêmes paramètres pour tous les tests. À l'issue des tests, comparez les résultats afin de déterminer ce qui pourrait ralentir votre site.

  1. Testez Bazaarvoice séparément. Bazaarvoice fournit une page de conteneur hébergée permettant de charger l'implémentation de Ratings & Reviews que vous avez configurée. Collez l'URL suivante dans le champ Enter a Website URL (Saisir une URL de site Web) de la page d'accueil de WebPagetest, en remplaçant les variables suivantes par vos propres valeurs.
    http://display.ugc.bazaarvoice.com/common/util/clientTestPage.html?client=<client_name>&site=<site_name>&locale=<locale>&productId=<product_ID>

    où

    • <client_name> : nom de client que vous utilisez pour vous connecter au workbench. Cette valeur est sensible à la casse.
    • <site_name> : zone de déploiement. Par exemple, le site principal serait écrit site_principal. Le nom du site se trouve également dans la zone de déploiement de la Plateforme de configuration, sous Identifiant de site (Site ID).
    • <locale> : langue utilisée dans l’implémentation. Par exemple, en_US pour l’anglais. Cette valeur est sensible à la casse.
    • <product_ID> : identifiant de produit (external ID) listé dans le flux de produits et correspondant au produit dont vous souhaitez utiliser le contenu Bazaarvoice dans le test.
  2. Testez votre page de produits hébergée en activant Ratings & Reviews et en saisissant l'URL de la page dans le champ Enter a Website URL (Saisir une URL de site Web). Pour des résultats précis de test, choisissez une page produit qui charge toujours le même contenu.
  3. Testez votre page produit hébergée en bloquant Ratings & Reviews. Développez les options des Advanced Settings (paramètres avancés) de la page d'accueil de WebPagetest. Dans l'onglet Block (Bloquer), saisissez bvapi dans le champ Block Requests Containing (Bloquer les demandes contenant). Commencez le test en utilisant la même URL qu'à l'étape 2. Le fait de bloquer toute requête contenant bvapi.js va permettre de bloquer toute requête de Bazaarvoice et vous donne le temps de chargement de la page sans le contenu Bazaarvoice.

Remarque : Les résultats des tests peuvent considérablement varier, malgré un environnement de test constant, en raison de fluctuations de la machine et du réseau.

Analyser le test de vitesse

Les principaux indicateurs se trouvent dans les onglets Summary (Résumé) et Details (Détails) de WebPagetest. Selon les applications Bazaarvoice que vous chargez sur la page que vous testez, les noms des conteneurs peuvent légèrement varier. Pour les étapes d'analyse suivantes, les principaux indicateurs concernent une page qui héberge Ratings & Reviews.

Remarque : Ces indicateurs peuvent ne pas correspondre à ceux de votre test.

Évaluer Ratings & Reviews séparément

Pour obtenir la durée de rendu de ce premier test, allez dans l'onglet Details et soustrayez la valeur de scoutStart de la valeur de reviewContentList1-render-end. Le résultat correspond au temps nécessaire au lancement du fichier scout bvapi.js et au chargement de Ratings & Reviews sur la page.

Évaluer votre page produit hébergée avec Ratings & Reviews implémenté

Rassemblez les indicateurs suivants dans l’onglet Details :

  • Durée de la requête bvapi.js (regardez dans la section Request Details)
  • Durée de la marque de performance rr_show_reviews-call
  • Durée de la marque de performance reviewContentList1-render-end

Utilisez les indicateurs précédents pour réaliser les mesures suivantes :

  • Si la durée de la requête bvapi.js est supérieure à 1 000 ms, déplacez l'appel $BV.ui plus haut dans la page.
  • Si la différence de temps pour demander rr_show_reviews-call et bvapi.js est supérieure à 500 ms, Ratings & Reviews est sur la page mais son rendu n'a pas encore été demandé. Déplacez l'appel $BV.ui immédiatement après la référence à bvapi.js.
  • Si la différence de temps pour demander reviewContentList1-render-end et rr_show_reviews-call est supérieure à trois secondes et que des problèmes de performance apparaissent quand vous analysez votre page de produits hébergée avec Ratings & Reviews bloqué, il est possible que le code Bazaarvoice soit en concurrence pour l'obtention de bande passante réseau et de puissance de traitement dans le navigateur Web. Contactez votre représentant Bazaarvoice pour obtenir de l'aide.

Évaluer votre page produit hébergée en bloquant Ratings & Reviews

Si les indicateurs Document Complete ou Fully Loaded sont supérieurs à 3 000 ms lorsque vous effectuez les tests avec bvapi bloqué, votre page tente probablement de charger trop de contenu au démarrage. Si Start Render est supérieur à 1 000 ms, cela indique également qu'une quantité trop élevée de contenu essaie de se charger lors du démarrage. Contactez votre représentant Bazaarvoice pour obtenir de l'aide.

Si aucun problème de performance n'est survenu lorsque vous avez testé votre page de produits en bloquant Ratings & Reviews, mais que vous avez rencontré des problèmes lorsque Ratings & Reviews est activé, il est possible qu'un conflit se produise entre votre code et le code de Bazaarvoice. Contactez votre représentant Bazaarvoice pour obtenir de l'aide.

Problèmes courants de performance

Voici les raisons courantes qui expliquent un temps de chargement lent.

Trop de JavaScript

Faites attention aux temps d'exécution de JavaScript, tiers ou autre, qui se charge sur votre page. Un script qui présente des temps d'exécution trop longs peut ajouter une surcharge superflue au temps de chargement global de votre page.

Trop de fichiers JavaScript

Si le nombre de requêtes de fichiers JavaScript est anormalement élevé, votre page peut rencontrer un encombrement supplémentaire du réseau lors de l'accès à ce contenu. Si vous observez au moins 20 requêtes de fichiers .js en provenance du même domaine, envisagez de concaténer ces fichiers.

Utilisation inefficace des réseaux de diffusion de contenu (CDN) ou de la mise en cache

L'onglet Performance Review contient des indicateurs sur votre utilisation des réseaux CDN et de la mise en cache. Si votre page est riche en contenus sans mise en cache, cela peut avoir un impact sur le temps de chargement des premières visites et des visites répétées.

Trop d’images

Si votre page contient beaucoup d'images, assurez-vous d'optimiser et de compresser ces images, et de charger dynamiquement les images supplémentaires des diaporamas ou des galeries après le rendu initial de la page.

Ajoutez ce code là où vous souhaitez afficher le contenu de Bazaarvoice sur vos pages produits :

<!DOCTYPE html> <html lang="en"> <head> <!-- JavaScript API- Staging; replace in <client_name>, <site_ID>, and <locale>, and remove /bvstaging FOR PRODUCTION --> <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script> <!-- Bazaarvoice Configuration Call --> <script type="text/javascript"> $BV.configure('global', { productId: 'ProductID123' // Use relevant ExternalId from product feed }); </script> </head> <body> <!-- schema.org Markup --> <div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">ProductName</h1> <!--product name must be identified with itemprop=name attribute--> <!-- Summary Container goes above the fold near product name or image --> <div id="BVRRSummaryContainer"></div> <!-- Ratings & Reviews Container goes below product description --> <div id="BVRRContainer"></div> <script type="text/javascript"> $BV.ui('rr', 'show_reviews', { doShowContent: function() { // If the container is hidden (such as behind a tab), put code here to make it visible //(open the tab). } }); </script> <!-- Q&A code --> <div id="BVQAContainer"></div> <script type="text/javascript"> $BV.ui('qa', 'show_questions', { doShowContent: function() { // If the container is hidden (such as behind a tab), put code here to make it visible //(open the tab). } }); </script> </div> </body> </html>

Vérifiez les points suivants :