Les Inline ratings ou notes récapitulatives indiquent immédiatement à vos clients que votre site comporte des notes et des avis. Ces résumés aident les consommateurs à décider des produits qu'ils ont envie de consulter, rendant ainsi les pages de catégorie plus utiles et plus faciles à naviguer. Les données des notes récapitulatives sont extraites directement des serveurs de Bazaarvoice et les récapitulatifs sont donc actualisés en temps réel.

Vous pouvez afficher les notes récapitulatives dans un carrousel de recommandation de produits, une page de catégorie ou une page de résultats de recherche afin d'offrir un récapitulatif des notes pour des produits ou des services. Si vous utilisez Ratings & Reviews pour les magasins, vous pouvez afficher les notes récapitulatives des boutiques de votre entreprise. Pour proposer des notes récapitulatives sur votre site Internet, vous devez ajouter ces notes à vos pages de catégories, puis les personnaliser en sélectionnant les composants que vous voulez afficher sur vos pages et leur apparence. Vous pouvez obtenir les données sur les notes à partir du flux de notes seules.

Vous pouvez aussi configurer Inline Ratings (Notes récapitulatives) de façon à ce que chaque résumé soit également un lien qui renvoie vers la page du produit. Lorsque vos clients sélectionnent une note récapitulative, ils peuvent alors consulter toutes les notes et tous les avis publiés au sujet de ce produit.

Sans notes récapitulatives Avec notes récapitulatives

Sans les notes récapitulatives, les clients consultant une page de catégorie n'ont aucune information sur la qualité ou la popularité d'un produit.

Grâce aux notes récapitulatives, ils peuvent voir la note moyenne et le nombre d'avis sur un produit avant d'ouvrir la page du produit.

Ajouter des notes récapitulatives à vos pages

Si vous souhaitez ajouter du contenu de Ratings and Reviews dans un diaporama de recommandations de produits, une page de catégorie ou une page de résultats de recherche, il vous faudra ajouter du code de notes récapitulatives au contenu HTML de la page. Ce code peut injecter les informations suivantes :

  • Note en étoiles
  • Valeur décimale de la note moyenne globale
  • Nombre d'avis

Vous pouvez également lier les notes récapitulatives aux pages de produits. Si vous utilisez Ratings & Reviews pour les magasins, vous pouvez également les lier aux pages de boutiques.

En quoi les notes récapitulatives sont-elles importantes ?

Les notes récapitulatives fournissent aux clients des informations sur les notes et les avis avant qu'ils n'accèdent à la page du produit. Lorsque vous ajoutez des notes récapitulatives sur les pages de catégorie ou de recherche, vous donnez des informations utiles aux clients qui recherchent ou comparent des produits, et vous les aidez à faire leur choix.

Les exemples suivants montrent la différence entre des pages de catégories pourvues de notes récapitulatives, et d'autres qui en sont dépourvues.

Grâce aux notes récapitulatives, les consommateurs peuvent voir la note moyenne et le nombre d'avis sur un produit avant d'ouvrir la PDP. Vous pouvez afficher les notes récapitulatives avec la note moyenne exprimée en étoiles et le nombre d'avis, ou opter pour les étoiles non sélectionnées lorsqu'il n'y a pas de note et d'avis.

Produit affichant la note moyenne exprimée en étoiles et le nombre d'avis, et produit optant pour les étoiles non sélectionnées, sans notes et avis moyens.

Sans les notes récapitulatives, les consommateurs qui consultent une page de catégorie n'ont aucune information sur la qualité ou la popularité d'un produit. Vous pouvez choisir de masquer les notes récapitulatives exprimées en étoiles ou d'afficher le texte « Aucun avis pour l'instant » sur la PDP lorsqu'aucun consommateur n'a encore donné son avis sur le produit.

Étape 1 : contacter l'assistance client concernant l'activation des notes récapitulatives

Contactez l'assistance Bazaarvoice pour activer cette fonctionnalité dans votre implémentation de Conversations.

Étape 2 : activer la fonction Inline Ratings.

Avant d'implémenter le code d'affichage des notes récapitulatives, vous devez activer la fonctionnalité comme suit :

  1. Connectez-vous au portail Bazaarvoice .
  2. Dans le portail du menu, sélectionnez Configuration.
  3. Sélectionnez l'instance puis cliquez sur Go to Configuration (Aller à Configuration). Le Site Manager (gestionnaire de site) apparaît et liste les zones de déploiement et les implémentations disponibles.
  4. Dans la section Implementations (Implémentations), sélectionnez Edit (Modifier) à côté de l'implémentation que vous souhaitez configurer.
  5. Dans la section User Experience (Expérience utilisateur), sélectionnez Style Editor (Éditeur de style).
  6. Faites défiler jusqu'à Inline Ratings (Notes récapitulatives) et placez le curseur sur On pour activer la fonctionnalité.
  7. Sélectionnez ensuite Edit (Modifier) pour choisir les informations à afficher dans le cadre des notes récapitulatives. Dans les notes récapitulatives, vous pouvez ajouter la note moyenne et le nombre d'avis.

Étape 3 : ajouter le script de chargement BV

Ajoutez dès que possible le code d'intégration JavaScript suivant dans l'élément <head> :

<head> <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script> ... </head>

L'attribut src contenu dans l'élément <script> fait référence au chemin d'accès complet vers le script de chargement bv.js de Bazaarvoice.

Dans <script>, remplacez les éléments suivants par vos valeurs :

  • <client_name> —fait référence au nom de client fourni par Bazaarvoice. Veillez à utiliser des lettres minuscules pour la valeur.
  • <site_ID>—Identifiant de la zone de déploiement que vous voulez utiliser. 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.
  • <environment> — fait référence à l’environnement de déploiement où vous souhaitez implémenter Bazaarvoice. Pour un environnement de production, incluez production dans le chemin d’accès. Si vous utilisez un environnement de pré-production, incluez staging dans le chemin d’accès.
  • <locale> fait référence à la langue utilisée dans l’implémentation. Si vous n'utilisez pas l'anglais, remplacez en_US par le code de votre langue.

Étape 4 : afficher les notes récapitulatives

Ajoutez une balise <div> avec un attribut de notes récapitulatives data-bv-show="inline_rating" à l'endroit où vous souhaitez qu'elles apparaissent :

<div> <div data-bv-show="inline_rating" data-bv-product-id="product1" data-bv-redirect-url="http://mycompany.com/product1"></div> </div> <div> <div data-bv-show="inline_rating" data-bv-product-id="product2" data-bv-redirect-url="http://mycompany.com/product2"></div> </div> <div> <div data-bv-show="inline_rating" data-bv-product-id="product3" data-bv-redirect-url="http://mycompany.com/product3"></div> </div>

Les attributs suivants vous permettront de configurer les notes récapitulatives :

  • data-bv-product-id—L'identifiant du produit que vous souhaitez afficher.
  • data-bv-redirect-url—L'URL de cet attribut nous informe sur la page vers laquelle l'utilisateur doit être redirigé lorsqu'il clique sur le lien.

    Lorsque vous intégrez un lien à une note récapitulative, vous pouvez rediriger les clients vers la page produit ou plus spécifiquement vers le contenu Ratings & Reviews correspondant.

    Quand une note récapitulative ne comporte pas de lien, les clients doivent ouvrir la page du produit en sélectionnant un élément qui comporte un lien, comme le nom ou l'image du produit. En l'absence de l'attribut data-bv-redirect-url, aucun écouteur de clics ne sera joint.

    Avec liens hypertexte Sans liens hypertexte

Étape 5: Implémentez avec SEO (facultatif)

Si la page sur laquelle vous implémentez les notes récapitulatives est doté d’un balisage SEO, vous devez encapsuler des instances de notes récapitulatives dans des balises de produit individualisé ou ajouter l’attribut data-bv-seo de vos div notes récapitulatives, selon votre cas d’utilisation.

data-bv-seo—Defaults to true. Si data-bv-seo="false", Bazaarvoice ne rendra pas les balisages SEO au sein de ces div notes récapitulatives Cela permet de vous assurer que les métadonnées schema.org n’interfèrent pas avec la page de SEO.

Selon les lignes directrices des données structurées de Google , sur les pages de catégories répertoriant plusieurs produits différents:

  • Chaque entité devrait être balisée à l’aide du type schema.org pertinent.
  • Si un élément est marqué, tous les éléments doivent être marqués. Appliquer data-bv-seo="false"à tous les nœuds inline ratings ou à aucun
  • Sauf s’il s’agit d’une page carousel, les éléments marqués ne devraient pas renvoyer vers des pages de détails séparées. N’incluez pas data-bv-redirect-url pour les inline ratings avec SEO sauf s’il est dans un carrousel.

Si vous n’incluez pas data-bv-seo="false", vous devez toujours encapsuler les inline ratings avec un produit itemscope. Les sections suivantes décrivent comment implémenter correctement les inline ratings avec SEO dans différents scénarios.

Mettre en place des notes récapitulatives avec SEO en dehors d’un carrousel

Si votre page a SEO et vous ajoutez pas des inline ratings dans un carrousel:

  • Enveloppez chaque note récapitulative div dans un produit itemscope.
  • N’incluez pas l’attribut data-bv-redirect-url.

Par exemple :

<div itemscope itemtype="http://schema.org/Product"> <div data-bv-show="inline_rating" data-bv-product-id="product1"></div> </div> <div itemscope itemtype="http://schema.org/Product"> <div data-bv-show="inline_rating" data-bv-product-id="product2"></div> </div> <div itemscope itemtype="http://schema.org/Product"> <div data-bv-show="inline_rating" data-bv-product-id="product3"></div> </div>

Implémenter des notes récapitulatives avec SEO dans un carrousel

Si votre page a SEO et vous ajoutez des notes récapitulatives dans un carrousel:

  • Enveloppez chaque note récapitulative div dans un produit itemscope.
  • Inclure l'attribut data-bv-redirect-url si vous le désirez.

Par exemple :

<div itemscope itemtype="http://schema.org/Product"> <div data-bv-show="inline_rating" data-bv-product-id="product1" data-bv-redirect-url="http://mycompany.com/product1"></div> </div> <div itemscope itemtype="http://schema.org/Product"> <div data-bv-show="inline_rating" data-bv-product-id="product2" data-bv-redirect-url="http://mycompany.com/product2"></div> </div> <div itemscope itemtype="http://schema.org/Product"> <div data-bv-show="inline_rating" data-bv-product-id="product3" data-bv-redirect-url="http://mycompany.com/product3"></div> </div>

Implémenter des notes récapitulatives sans SEO

Si votre page n'a pas SEO et vous ajoutez des notes récapitulatives n'importe où sur la page:

  • N'enveloppez paschaque note récapitulative div dans un produit itemscope.
  • Ajoutezdata-bv-seo="false" à chaque note récapitulative div.
  • Inclure l'attribut data-bv-redirect-url si vous le désirez.

Par exemple :

<div> <div data-bv-show="inline_rating" data-bv-product-id="product1" data-bv-redirect-url="http://mycompany.com/product1" data-bv-seo="false"></div> </div> <div> <div data-bv-show="inline_rating" data-bv-product-id="product2" data-bv-redirect-url="http://mycompany.com/product2" data-bv-seo="false"></div> </div> <div> <div data-bv-show="inline_rating" data-bv-product-id="product3" data-bv-redirect-url="http://mycompany.com/product3" data-bv-seo="false"></div> </div>

Exemple d'implémentation

L'exemple suivant présente une page de catégorie pourvue de notes récapitulatives :

<!DOCTYPE html> <html lang="en"> <head> <!--First, download the BV Loader file. Replace client_name, site_ID, environment, and locale. --> <script async type="text/javascript" src="https://apps.bazaarvoice.com/prod/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script> </head> <body> <section class="product category"> <div class="product_tile"> <img src="cool_product_1.png" /> <div class="product_name">Cool Product 1</div> <div class="product_price">$42.00</div> <div data-bv-show="inline_rating" data-bv-product-id="coolproduct1" data-bv-redirect-url="http://mycompany.com/coolproduct1"></div> </div> <div class="product_tile"> <img src="cool_product_2.png" /> <div class="product_name">Cool Product 2</div> <div class="product_price">$42.00</div> <div data-bv-show="inline_rating" data-bv-product-id="coolproduct2" data-bv-redirect-url="http://mycompany.com/coolproduct2"></div> </div> <div class="product_tile"> <img src="cool_product_3.png" /> <div class="product_name">Cool Product 3</div> <div class="product_price">$42.00</div> <div data-bv-show="inline_rating" data-bv-product-id="coolproduct3" data-bv-redirect-url="http://mycompany.com/coolproduct3"></div> </div> </section> </body> </html>

Remarque:Si votre implémentation existante utilise le fichier scout (bvapi.js), développez la section suivante, puis complétez les étapes ci-dessous après avoir activé les notes récapitulatives dans Workbench .

Étape 1: ajouter l'API JavaScript de Bazaarvoice

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. Remplacez <site_ID> par l'identifiant de la zone de déploiement que vous voulez utiliser. La zone de déploiement par défaut se nomme « main_site » (site principal). Contactez votre représentant Bazaarvoice pour vous assurer que le nom 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 : afficher les notes récapitulatives et les résumés

Vous devez déterminer si vous souhaitez que vos notes récapitulatives comportent des liens hypertexte ou non.

Consultez les exemples suivants pour plus d'informations sur les étapes d'implémentation.

Lorsque vous intégrez un lien à une note récapitulative, vous pouvez rediriger les clients vers la page produit ou plus spécifiquement vers le contenu Ratings & Reviews correspondant.

Installation de notes récapitulatives avec des liens hypertexte

Si vous souhaitez que vos notes récapitulatives comportent des liens, insérez le code JavaScript suivant dans les pages de catégorie ou de recherche qui comportent les notes récapitulatives.

Remarque : c'est pour cette raison qu'il est essentiel d'inclure tous vos ID de produits pertinents dans le code suivant.
$BV.ui( 'rr', 'inline_ratings', {
 productIds : {
  'productId1' : {
     url : 'http://www.client.com/product/path1'
   },
  'productId2' : {
     url : 'http://www.client.com/product/path2'
   },
  'productId3' : {
     url : 'http://www.client.com/product/path3'
   },
  'productId4' : { 
     url : 'http://www.client.com/product/path4'
  }, 
 …
},
containerPrefix : 'BVRRInlineRating'
});
Remarque :Vous devez remplacer les URL http://www.client.com/product/path... du code ci-dessus par les URL complètes de chaque page de produit. Si vous utilisez Ratings & Reviews for Stores, vous devez inclure les URL des pages de chaque boutique. Si une chaîne vide est insérée dans le champ des URL, les liens hypertexte ne fonctionneront pas.

Quand une note récapitulative ne comporte pas de lien, les clients doivent ouvrir la page du produit en sélectionnant un élément qui comporte un lien, comme le nom ou l'image du produit.

Installation sans liens hypertexte

Si vous ne souhaitez pas que vos notes récapitulatives comportent des liens, insérez le code JavaScript suivant dans les pages de catégorie ou de recherche qui comporteront les notes récapitulatives.

Remarque : c'est pour cette raison qu'il est essentiel d'inclure tous vos ID de produits pertinents dans le code suivant.
$BV.ui( 'rr', 'inline_ratings', {
productIds : ['productId1', 'productId2', 'productId3', 'productId4', …],
containerPrefix : 'BVRRInlineRating'
});

Étape 3 : placer les notes récapitulatives sur la page

Insérez le code suivant pour afficher les notes récapitulatives. Vous devrez créer une balise div pour chaque injection de note sur la page :

<div id="BVRRInlineRating-productId123">
</div>
Remarque : Remplacez productId123 par l'identifiant de produit de votre entreprise, tel que défini dans le tableau productIds. Les identifiants de produits sont sensibles à la casse. Pour éviter toute erreur, assurez-vous que l'identifiant de produit correspond exactement à l'identifiant de produit de votre entreprise dans la base de données de Bazaarvoice. Si vous utilisez Ratings & Reviews pour les magasins, utilisez l'identifiant de produit que vous avez associé à la boutique.

Étape 4 : adapter les identifiants de produits pour les caractères non-alphanumériques

Si vos ID de produit comportent des espaces ou d'autres caractères non-alphanumériques, hormis les tirets et les tirets bas, vous devrez spécifier l'identifiant de balise div injecté par chaque note récapitulative. Insérez un ID de conteneur après l'URL pour chaque ID de produit, comme indiqué dans l'exemple suivant.

$BV.ui('rr', 'inline_ratings', { productIds: { 'productId1.2': { url: 'http://www.client.com/product/path1', containerId: 'BVRRInlineRating-product-Id1' }, ... }, });
Remarque : Assurez-vous que l'identifiant <div id> de l'étape 3 correspond à la valeur containerId définie pour chaque produit.

Personnaliser les notes récapitulatives

Suivez les étapes ci-après pour personnaliser la façon dont les notes récapitulatives s'affichent sur vos pages :

  1. Connectez-vous au portail Bazaarvoice .
  2. Dans le portail du menu, sélectionnez Configuration.
  3. Sélectionnez l'instance puis cliquez sur Go to Configuration (Aller à Configuration). Le Site Manager (gestionnaire de site) apparaît et liste les zones de déploiement et les implémentations disponibles.
  4. Dans la section Implementations (Implémentations), sélectionnez Edit (Modifier) à côté de l'implémentation que vous souhaitez configurer.
  5. Accédez à la section User Experience (Expérience utilisateur) et sélectionnez Style Editor (Éditeur de style).
  6. Descendez jusqu'à la section Inline Rating (note récapitulative) et survolez le côté droit de la section pour afficher Edit (Modifier). Sélectionnez Edit.
  7. Dans la boîte de dialogue Modifier les notes récapitulatives, sélectionnez les éléments des notes que vous souhaitez afficher sur vos pages de catégories, comme illustré ci-dessous.
  8. Une fois que vous avez terminé, sélectionnez Close (Fermer).
  9. Développez la section Icons (Icônes) à droite de la page Style Editor.
  10. Sélectionnez Category Rating Stars (Étoiles par catégorie) dans le menu déroulant. Vous pouvez régler la taille (en pixels) des étoiles ainsi que leur couleur quand elles sont vides ou pleines. Les modifications sont enregistrées automatiquement.
  11. Sélectionnez pour avoir un aperçu de vos modifications.

Pour procéder à l'activation et à l'intégration à partir de l'interface hébergée :

  1. Depuis la plateforme de configuration, sélectionnez Style Editor (Éditeur de style) sous User Experience (Expérience utilisateur). Faites défiler jusqu'à Inline Ratings (Notes récapitulatives) et placez le curseur sur On pour activer la fonctionnalité. Sélectionnez ensuite Edit (Modifier) pour choisir les informations à afficher dans le cadre des notes récapitulatives. Dans les notes récapitulatives, vous pouvez ajouter la note moyenne et le nombre d'avis.
  2. Ajoutez dès que possible le code d'intégration JavaScript suivant dans l'élément <head> :

    <head> <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script> ... </head>

    Remplacez <client_name>, <site_ID>, <environment> et <locale> par les valeurs adéquates.

  3. Ajoutez une balise <div> dans la page <body> avec un attribut de notes récapitulatives data-bv-show="inline_rating" à l'endroit où vous souhaitez qu'elles apparaissent :

    <div> <div data-bv-show="inline_rating" data-bv-product-id="product1" data-bv-redirect-url="http://mycompany.com/product1"></div> </div> <div> <div data-bv-show="inline_rating" data-bv-product-id="product2" data-bv-redirect-url="http://mycompany.com/product2"></div> </div> <div> <div data-bv-show="inline_rating" data-bv-product-id="product3" data-bv-redirect-url="http://mycompany.com/product3"></div> </div>

Remarque : Si votre implémentation existante utilise le fichier scout (bvapi.js), complétez les étapes suivantes au lieu d'ajouter des notes récapitulatives à votre page :

  1. Ajoutez le code JavaScript approprié dans la balise <Head> :
    <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>

    Remplacez <client_name>, <site_ID> et <locale> par vos valeurs et supprimez /bvstaging de l'URL si vous procédez à l'implémentation des notes récapitulatives dans un environnement de production.

  2. Définissez tous les ID de produit et les URL de page produit dans l’élément <body> d’une page :

    <script type="text/javascript"> $BV.ui( 'rr', 'inline_ratings', { productIds : { 'productIdX' : { url : 'http://path_to_productX' }, 'productIdY' : { url : 'http://path_to_productY' }, … }, containerPrefix : 'BVRRInlineRating' }); </script>

  3. Créez une balise <div> dans l’élément <body> d’une page pour chaque produit :

    <div id="BVRRInlineRating-productIdX"></div> <div id="BVRRInlineRating-productIdY"></div> ...

Assurez-vous de tester les produits qui ont des avis. Puis vérifiez que :