Pour afficher le contenu généré par les utilisateurs (CGU) recueilli par Bazaarvoice sur votre site, vous devez ajouter le code Bazaarvoice à votre site. De cette manière, votre site peut communiquer avec l'application Bazaarvoice et récupérer du CGU afin de l'afficher.

Après avoir ajouté le code d'affichage à votre site, personnalisez l'apparence de vos pages, comme décrit dans la rubrique Configuration de l'affichage hébergé.

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

  • Intégrer le CGU Bazaarvoice (Ratings & Reviews ou Questions & Answers) à vos pages produits, et afficher le contenu masqué
  • Intégrer schema.org (SEO) à vos pages produits
Remarque : ajouter des balises schema.org à vos pages produits permet aux principaux moteurs de recherche d'extraire et afficher dans leur page de résultats (SERP) des informations utiles, telles que les notes par étoiles des produits ou les extraits des avis clients. Cette option est particulièrement importante dans le processus de prise de décision des consommateurs, car 95 % d'entre eux lisent les avis avant d'effectuer un achat.

Aperçu de l'affichage

La plupart des enseignes et des distributeurs ajoutent le code de l'affichage de Bazaarvoice aux pages de détails de leurs produits (PDP), mais vous pouvez également l'ajouter sur toutes vos pages si celles-ci utilisent un modèle partagé. En général, les affirmations listées ci-dessous s'appliquent à toutes les pages. Les exceptions sont présentées dans les sections ci-après.

  • Le contenu de l'affichage est continuellement mis à jour puisque l'équipe de modération approuve le contenu envoyé.
  • Les avis natifs et syndiqués qui valident les critères de modération sont inclus dans l'affichage.
  • Tous les pays sont pris en charge.
  • Les familles de produits sont prises en charge.

Résumé des notes

Le résumé des notes affiche les informations suivantes sur l'identifiant de produit spécifié :

  • Image de cinq étoiles indiquant la note moyenne du produit
  • Nombre total d'avis sur le produit
  • v1 uniquementPourcentage (%) de clients qui recommandent le produit
Remarque : v1 uniquement Pour afficher le pourcentage (%) de clients, vous devez installer le bvapi.js
  • Histogramme interactif qui présente une répartition des notes
  • Nombre de questions et réponses pour le produit

Il propose également les liens Donner un avis et Poser une question.

Le résumé des notes est généralement placé tout en haut de la PDP, près de l'image du produit. Voici un exemple :

Résumé des notes

Vous pouvez afficher le résumé des notes 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. Vous pouvez aussi choisir de masquer les notes 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. Voici un exemple :

Résumé des notes

Suivez ces étapes pour implémenter le résumé des notes :

Remarque : nous vous recommandons vivement d'implémenter un résumé des notes avec avis sur vos PDP.

Avis

Reviews affiche une liste des notes et avis de chaque consommateur qui a envoyé un avis. Si les commentaires sont activés et qu'un consommateur ajoute un commentaire à un avis, celui-ci sera affiché ici. Les avis sont généralement placés sous l'image du produit et sa description.

Voici un exemple :

Conteneur d'avis

Lors de la publication d'avis syndiqués, la déclaration d'avis comprend le produit pour lequel l'avis a été initialement rédigé sur un site Web particulier.

Voici un exemple :

Conteneur d'avis

Suivez les étapes ci-après pour implémenter les avis :

Remarque : nous vous recommandons vivement d’implémenter les avis avec le résumé des notes.

Points clés de l'avis

Implémentez Review Highlights sur vos pages produit (PDP) pour afficher :

  • Une synthèse détaillée des évaluations positives, neutres et négatives du produit.
  • Une compilation d'extraits d'avis qui reflètent le ressenti actuel des consommateurs à l'égard du produit.

Pour générer et afficher les Review Highlights d'un produit, Bazaarvoice analyse les données des notes et avis relatives à ce dernier. Les acheteurs peuvent alors profiter d'un aperçu immédiat des différents ressentis des consommateurs, sans avoir à lire chaque avis. Ils peuvent toutefois développer les Highlights pour lire les avis complets.

Voici un exemple :

Points clés de l'avis

Avant d'implémenter Review Highlights, sachez que :

  • L'affichage des Review Highlights est distinct de l'affichage des avis.
  • Review Highlights n'est disponible que pour les configurations anglophones.
  • Les avis natifs et les avis réseau sont inclus (y compris les avis partagés entre variantes de produit).
  • Les avis récompensés sont exclus.
Remarque : les Review Highlights d'un produit sont automatiquement générés et présentés lorsqu'il comporte environ 10 avis consultables, à condition que ces avis partagent des opinions similaires sur le produit.

Implémentation de Review Highlights :

Remarque : une fois que vous avez activé la fonctionnalité et ajouté le code requis, l'affichage des Review Highlights sur vos PDP peut prendre jusqu'à 72 heures.
Astuce : Les données Review Highlights sont également disponibles pour l'API. Pour en savoir plus, consultez la page dédiée à l'API d'analyse de sentiments produit (en anglais) sur le portail des développeurs de Bazaarvoice.

Questions & Answers

Lorsque Questions & Answers est implémenté sur vos pages produits, vous pouvez afficher les questions des consommateurs sur les produits, ainsi que les réponses fournies par les marques et les consommateurs. Les questions sur un produit apparaissent généralement sous l'image et la description du produit.

Remarque : V2 uniquement L'interface de Questions & Answers inclut une recherche prédictive, qui répertorie les questions ou réponses existantes liées aux mots clés saisis dans le champ de recherche. Pour chaque question répertoriée, le consommateur peut sélectionner Answer the question (Répondre à la question) ou See answers (Voir les réponses).

Voici un exemple :

Conteneur de questions

Suivez les étapes ci-après pour implémenter la fonction Questions & Answers :

Ajouter le code Bazaarvoice à votre site

Pour afficher le contenu généré par les utilisateurs (CGU), tel que les avis et les notes, vous devez ajouter le code Bazaarvoice à vos pages Web.

Attention : si votre implémentation existante utilise le fichier scout (bvapi.js), reportez-vous à la documentation v1 d’intégration de l'affichage. Cependant, nous vous conseillons vivement d'implémenter le fichier du script de chargement BV (bv.js) et les balises <div> figurant ci-dessous afin d'optimiser les performances et en vue d'innovations futures.

Si vous choisissez d'utiliser bv.js et de suivre ces instructions pour l'intégration de l'affichage, vous devez contacter l'assistance client Bazaarvoice afin d'activer les fonctionnalités Rating Summary (Résumé des notes) et Review Highlights Si l'assistance client n'active pas ces fonctionnalités, leur code ne fonctionnera pas.

Étape 1 : Ajoutez le script de chargement BV

Le script de chargement BV est une application JavaScript peu volumineuse et asynchrone qui permet de gérer et d'afficher les fonctions configurées et le CGU sur vos pages Web. Ce script téléchargera uniquement les applications requises pour la page en question.

Pour ajouter le script BV, ajoutez le code HTML suivant dans la balise <head> de la page :

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

où

  • async — télécharge le script de chargement BV de manière asynchrone. Cet attribut est facultatif, mais recommandé.

  • src — spécifie le chemin d’accès vers le script de chargement BV. Remplacez les éléments suivants dans votre code HTML :

    • <client_name> : 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. Cette valeur est définie dans la configuration accessible dans la configuration 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 cliquez sur à droite de la zone de déploiement, sur la page Gestionnaire du site de la configuration.
    • <environment> : environnement de déploiement où vous souhaitez implémenter les fonctionnalités 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. Par exemple, en_US pour l’anglais.
Attention : Si vous avez déjà ajouté le script de chargement BV pendant la mise en œuvre de BV Pixel ou de la CDDC, ne l'ajoutez pas une nouvelle fois. N'ajoutez le script de chargement BV qu'une seule fois par page.

Étape 2 : Ajoutez des pages d'affichage pour les fonctionnalités du CGU

Ajoutez du code dans le <body> (corps) de la page où les fonctionnalités du CGU doivent apparaître.

Si vous ne maîtrisez pas bien les attributs de données, consultez la page Using Data Attributes (Utiliser les attributs de données) .

Remarque : Après avoir ajouté du code à votre site, personnalisez la présentation du contenu sur vos pages comme décrit dans la rubrique configuration de l'affichage hébergé.

Si vous avez implémenté un DOM (Document Object Model) sur votre page Web, vous pouvez y intégrer les applications v2 (Ratings & Reviews et Questions & Answers). Pour intégrer ces applications lorsque vous configurez l'affichage PDP :

  1. Connectez-vous au portail Bazaarvoice .
  2. Dans le menu du portail , sélectionnez Configuration.
  3. Sélectionnez une instance.
  4. Sélectionnez 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.
  5. Dans la liste Implementations (Implémentations), sélectionnez Modifier à côté de l'implémentation que vous souhaitez configurer.
  6. Dans la section Expérience utilisateur, sélectionnez Options d'affichage.
  7. Pour configurer les paramètres communs à Ratings & Reviews et Questions & Answers, sélectionnez l'onglet Configuration globale.
  8. Sélectionnez Activé sous Exécuter les applications V2 dans le shadow DOM.
Remarque : l'activation du shadow DOM vous empêche d'appliquer des remplacements personnalisés aux fichiers CSS.

Pages produits

Vous pouvez ajouter du code pour les fonctionnalités suivantes sur les pages produits (PDP) :

Rating summary. Résumé des notes, affiche un résumé des informations sur l'identifiant de produit spécifié.

  • Emplacement : nous vous conseillons de disposer Résumé des notes au-dessus de la ligne de flottaison, au plus près du nom de produit et de son image.

  • Code HTML requis pour cette fonctionnalité :

    <div data-bv-show="rating_summary" data-bv-product-id="ExternalId"></div>

    L'attribut de données data-bv-show renseigne le script de chargement BV quant à l'affichage du résumé des notes. L'attribut data-bv-product-id renseigne le script de chargement BV quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.

    Si vous souhaitez afficher plusieurs résumés de notes pour le même produit sur une PDP, ajoutez l'attribut de données data-bv-seo=”false” aux balises <div> qui suivent. De cette manière, les métadonnées schema.org sont restituées pour le premier résumé de notes uniquement. Si les métadonnées schema.org sont restituées pour plusieurs résumés de notes d'une même page, elles interfèrent avec l'optimisation SEO de la page. Voici un exemple :

    <div data-bv-show="rating_summary" data-bv-product-id="ExternalId"></div> ... <div data-bv-show="rating_summary" data-bv-product-id="ExternalId" data-bv-seo="false"></div>
    Attention : n'utilisez le résumé des notes que pour un produit par page. Vous pouvez avoir plus d'un résumé de notes par page, mais ils doivent tous être pour le même produit. Pour afficher plusieurs résumés de notes pour plusieurs produits sur une seule page, comme sur une page de liste catégorie, utiliser les notes récapitulatives à la place.

Avis—Avis affiche une liste des notes et avis de chaque consommateur qui a envoyé un avis.

  • Emplacement : nous vous conseillons de positionner les avis sous la ligne de flottaison, en bas de la page produit.

    Attention : nous vous déconseillons de rassembler les avis dans un onglet. S'il est prévu que vos avis soient regroupés dans un onglet, reportez-vous à l'article Afficher le contenu masqué.

  • Code HTML requis pour cette fonctionnalité (recommandé) :

    <div data-bv-show="reviews" data-bv-product-id="ExternalId"></div>

    L'attribut de données data-bv-show renseigne le script de chargement BV quant à l'affichage des avis. L'attribut data-bv-product-id renseigne le script de chargement BV quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.

    Si vous avez déjà utilisé $BV.ui et que vous passez à BV.ui, utilisez le code HTML suivant :

      BV.ui("show_reviews", { productID: "productID", contentContainerDiv: 'id or reference of the element to render reviews in'});

    L'exemple suivant montre les trois paramètres requis pour déclencher cet événement :

      $BV.ui("rr", "show_reviews", { productId: "XXXXX" });

Paramètres requis

Le tableau suivant identifie les paramètres/champs requis :

Paramètre Description
rr Paramètre obligatoire sous forme de chaîne.
show_reviews Paramètre obligatoire sous forme de chaîne.
productId Identifiant ou élément DOM (Document Object Model) associé à l'application Ratings & Reviews v2.
contentContainerDiv Identifiant ou élément DOM qui identifie l'élément div associé à l'application Ratings & Reviews v2.

Paramètres facultatifs

Paramètre Description
doShowContent Fonction appelée pour empêcher le contenu masqué derrière un onglet ou d'autres éléments de l'interface utilisateur.
summaryContainerDiv Pour activer le SEO pour Ratings & Reviews v2 ou ajouter un attribut data-bv-seo. Par défaut, ce paramètre est défini sur false.

Questions & Answers—Questions & Answers affiche les questions et réponses fournies par les consommateurs pour l'identifiant produit spécifié.

  • Emplacement : nous vous conseillons de positionner le module Questions & Answers sous les avis principaux, en bas de la page produit.

  • Code HTML requis pour cette fonctionnalité :

    <div data-bv-show="questions" data-bv-product-id="ExternalId"></div>

    L'attribut de données data-bv-show renseigne le script de chargement BV quant à l'affichage de Questions & Answers. L'attribut data-bv-product-id renseigne le script de chargement BV quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.

Review Highlights—Review Highlights affiche un condensé des notes et avis positifs, négatifs et neutres.

  • Emplacement : nous vous conseillons de positionner Review Highlights sous l'image du produit (au-dessus de la ligne de flottaison, si possible, ou juste en dessous) afin que les consommateurs puissent voir le module quand ils font défiler la page vers le bas à la recherche d'informations sur le produit.

  • Code HTML requis pour cette fonctionnalité (recommandé) :

    <div data-bv-show="review_highlights" data-bv-product-id="ExternalId"></div>

    L'attribut de données data-bv-show renseigne le script de chargement BV quant à l'affichage de Review Highlights. L'attribut data-bv-product-id renseigne le script de chargement BV quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.

    Si vous avez déjà utilisé $BV.ui et que vous passez à BV.ui, utilisez le code HTML suivant :

      BV.ui("show_questions", { productID: "productID", contentContainerDiv: 'id or reference of the element to render reviews in' });

Fiche produit ou page catégorie

Vous pouvez ajouter du code pour les fonctionnalités suivantes sur les fiches produit ou les pages catégories :

Notes récapitulatives : vous pouvez afficher les notes récapitulatives sur une fiche produit ou une page catégorie, un carrousel de recommandations de produits ou une page de résultats de recherche afin d'offrir un récapitulatif des notes pour des produits ou des services. Le code des notes récapitulatives est exécuté une seule fois par page, quel que soit le nombre de pages que vous affichez.

  • Emplacement : nous vous conseillons de positionner les notes récapitulatives sous le nom du produit.

  • Code HTML requis pour cette fonctionnalité :

    <div data-bv-show="inline_rating" data-bv-product-id="ExternalId-1"></div> <div data-bv-show="inline_rating" data-bv-product-id="ExternalId-2"></div>

    L'attribut de données data-bv-show renseigne le script de chargement BV quant à l'affichage des notes récapitulatives. L'attribut data-bv-product-id renseigne le script de chargement BV quant à l'affichage de la fonctionnalité pour un identifiant produit particulier, lequel doit correspondre à l'identifiant ExternalId fourni dans le catalogue produits.

    Si vous souhaitez ajouter un lien hypertexte à une note récapitulative, ajoutez l'attribut data-bv-redirect-url="<http://mycompany.com/product1>" à la balise <div> de la note correspondante.

Page d'accueil

Seller Ratings—Seller Ratings affiche jusqu'à 12 avis 4 et 5 étoiles, actualisés quotidiennement, sur votre page d'accueil. Il permet également de présenter les avis vous concernant dans les résultats de recherche en ligne.

  • Emplacement : nous vous conseillons de positionner les Seller Ratings sous la ligne de flottaison de votre page d'accueil.

  • Code HTML requis pour cette fonctionnalité :

    <div data-bv-show="seller_ratings"></div>

    Les données de l'attribut data-bv-show indiquent au script de chargement BV d'afficher Seller Ratings pour les clients qui correspondent à la valeur <client_name> fournie dans la balise d'en-tête <script>. Remarque : la fonction Google Seller Ratings doit avoir été activée pendant au moins 24 heures avant d'apparaître sur votre site.

Exemple de code complet

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

<!DOCTYPE html> <html lang="en"> <head> <!-- Commencez par télécharger le fichier du script de chargement BV. Il remplacera bvapi.js dans les implémentations Ratings & Reviews v1. Remplacez <client_name>, <site_ID> et <locale> avec vos valeurs ; remplacez <environment> avec « pré-production » ou « production » --> <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script> </head> <body> <!-- Résumé des notes – s'affiche généralement au-dessus de la ligne de flottaison près du nom ou de l'image du produit --> <div data-bv-show="rating_summary" data-bv-product-id="ProductID123"></div> <!-- Review Highlights – s'affiche généralement sous la description ou l'image du produit --> <div data-bv-show="review_highlights" data-bv-product-id="ProductID123"></div> <!-- Avis de productID123 ici --> <div data-bv-show="reviews" data-bv-product-id="productID123"></div> <!-- Questions de productID123 ici --> <div data-bv-show="questions" data-bv-product-id="productID123"></div> </body> </html>

Afficher le contenu masqué

Certaines actions de l'utilisateur entraînent l'activation de fonctionnalités Bazaarvoice. Par exemple, cliquer sur l'icône ★★★★★ du résumé des notes permet d'accéder aux notes et aux avis. La navigation par onglets est devenue très courante ces dernières années.

Les moteurs de recherche sont capables d'indexer efficacement le contenu qui se trouve derrière un onglet, pour autant que les deux conditions suivantes soient remplies :

  1. Le contenu SEO est présent dans le format HTML initial de la page et n'est pas chargé via des scripts de votre côté.
  2. Le contenu SEO est visible sur la page même après avoir désactivé JavaScript dans votre navigateur et rafraîchi la page.
Remarque : si l'état par défaut du conteneur qui comporte le contenu SEO est défini sur « visibility: hidden » ou « display: none », alors :
  • Utilisez JavaScript pour réinitialiser cette propriété. Ne déclarez pas cette propriété dans une feuille de style ou en ligne avec l'élément.
  • Appliquez à tous les onglets afin que tout le contenu soit visible lorsque la page est affichée avec JavaScript désactivé.

code d'exemple.

Voici un exemple du code JavaScript qui peut être utilisé pour masquer le contenu de l'onglet :

<script type="text/javascript"> document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; </script>

Vous pouvez également ajouter un style directement dans la balise div si ce contenu est dissimulé derrière un onglet. Toutefois, vous devez ajouter un code personnalisé et propre à la page qui invite la fonction bvCallback à afficher le bon onglet ou conteneur.

Ajoutez la fonction bvCallbackà la page pour que le script de chargement BV puisse la télécharger et l'exécuter après son propre téléchargement (de façon asynchrone). Puis, incluez le code dans la fonction bvCallback pour exécuter une fonction personnalisée.

Exemple de code pour les implémentations v1

Vous pouvez inclure une fonction de retour pour l'événement show en utilisant la méthode BV.reviews.on lorsque les avis s'affichent. (La méthode BV.questions.on est également disponible.) Cet exemple utilise le composant d'onglet Bootstrap :

<!DOCTYPE html> <html lang="en"> <head> <!-- Téléchargez le fichier du script de chargement BV. Il remplacera bvapi.js dans les implémentations Ratings & Reviews v1. Dans l'URL, remplacez <client_name>, <site_ID> et <locale> et remplacez <environment> par « pré-production » ou « production ». --> <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script> </head> <body> <!-- Le Résumé des notes se place au-dessus de la ligne de flottaison, près du nom de produit ou de son image --> <div data-bv-show="rating_summary" data-bv-product-id="ProductID123"></div> <!-- Onglets de contenu --> <div id="review_tab" style="display: none;"> <!-- Indiquez au script de chargement BV d'afficher la fonctionnalité R&R pour le productID123 ici --> <div data-bv-show="reviews" data-bv-product-id="productID123"></div> </div> <div id="questions_tab" style="display: none;"> <!-- Indiquez au script de chargement BV d'afficher la fonctionnalité Q&A pour le productID123 ici --> <div data-bv-show="questions" data-bv-product-id="productID123"></div> </div> <script> // bvCallback doit être utilisé lors de l'interaction avec BV via JavaScript et l'utilisation de l'attribut « async ». window.bvCallback = fonction (BV) { // Enregistrez une fonction à appeler lorsqu'une fonctionnalité BV doit afficher l'élément R&R, tel que les étoiles du Résumé des notes BV.reviews.on('show', fonction () { // Si le conteneur R&R est masqué (derrière un onglet, par exemple), placez le code ici pour le rendre visible (ouvrez l'onglet) $('#review_tab').show() ; }) ; // Enregistrez une fonction à appeler lorsqu'une fonctionnalité BV doit // afficher l'élément Q&A, par exemple lors de la sélection du lien du nombre de questions BV.questions.on('show', fonction () { // Si le conteneur est masqué (derrière un onglet, par exemple), placez le code ici pour le rendre visible (ouvrez l'onglet) $('#questions_tab').show(); }); }; </script> </body> </html>

Exemple de code pour les implémentations v2

Vous pouvez inclure une fonction de retour pour l'événement show en utilisant la méthode BV.swat_reviews.on lorsque les avis s'affichent. L'exemple suivant utilise le composant d'onglet Bootstrap :

<!DOCTYPE html> <html lang="en"> <head> <!-- Téléchargez le fichier du script de chargement BV. Il remplacera bvapi.js dans les implémentations Ratings & Reviews v1. Dans l'URL, remplacez <client_name>, <site_ID> et <locale> et remplacez <environment> par « pré-production » ou « production ». --> <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script> </head> <body> <!-- Le Résumé des notes se place au-dessus de la ligne de flottaison, près du nom de produit ou de son image --> <div data-bv-show="rating_summary" data-bv-product-id="ProductID123"></div> <!-- Onglets de contenu --> <div id="review_tab" style="display: none;"> <!-- Indiquez au script de chargement BV d'afficher la fonctionnalité R&R pour le productID123 ici --> <div data-bv-show="reviews" data-bv-product-id="productID123"></div> </div> <script> // bvCallback doit être utilisé lors de l'interaction avec BV via JavaScript et l'utilisation de l'attribut « async ». window.bvCallback = fonction (BV) { // Enregistrez une fonction à appeler lorsqu'une fonctionnalité BV doit afficher l'élément R&R, tel que les étoiles du Résumé des notes BV.swat_reviews.on('show', fonction () { // Si le conteneur R&R est masqué (derrière un onglet, par exemple), placez le code ici pour le rendre visible (ouvrez l'onglet) $('#review_tab').show() ; }); }; </script> </body> </html>

Ajouter des balises Schema.org (SEO)

Consultez les sections suivantes pour en savoir plus sur les balises schema.org :

Qu'est-ce qu'un rich snippet ?

Les clients trouvent souvent les produits via les moteurs de recherche. Ajouter des balises schema.org aux pages de détails de vos produits (PDP) permet aux moteurs de recherche d'afficher facilement les extraits des avis clients dans leur page de résultats (SERP). C'est particulièrement utile lorsqu'on tient compte du fait que 95 % des consommateurs lisent les avis avant d'effectuer un achat.

Les rich snippets, tels que la notation par étoiles ou les extraits d'avis d'un produit, améliorent les résultats de recherche et peuvent accroître les taux de clics naturels.

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

Voici un exemple de rich snippet :

Exemple de rich snippet

Les rich snippets sont également connus sous le nom de « résultats enrichis ».

Pourquoi ajouter des balises schema.org ?

Les balises schema.org permettent aux moteurs de recherche comme Google, Yahoo et Bing de comprendre le contenu de votre site et d'afficher des résultats de recherche enrichis.

Grâce aux balises schema.org :

  • Votre contenu se démarque sur les pages de résultats de recherche.
  • Vous pouvez marquer des rich snippets pour augmenter votre taux de clics.
  • Votre classement dans les résultats de recherche est (indirectement) optimisé : le taux de clics influence effectivement ce classement.
  • Vous respectez les normes de l'industrie.
Remarque : c'est à vous que revient la tâche de veiller à ce que vos objets JSON-LD soient compatibles avec les balises JSON-LD de Bazaarvoice.

Il existe des dizaines de types de rich snippets, mais seulement quelques-uns sont utilisés sur les sites de marque et de vente au détail. AggregateRating et Review sont deux des types de balises les plus utiles à ajouter au contenu généré par les utilisateurs (CGU) de Ratings & Reviews par Bazaarvoice.

  • AggregateRating  : ce type de snippet communique aux moteurs de recherche le nombre d'avis et de notes par étoiles (sur 5) pour un produit.

  • Review  : ce type de snippet communique aux moteurs de recherche des informations spécifiques en lien avec les avis concernant un produit.

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

Nous prenons en charge les données structurées dans deux formats :

  • JSON-LD
  • Microdonnées

Google a officiellement annoncé que le format de données structurées qu'il privilégie est JSON-LD. JSON-LD est plus simple et intuitif à mettre en œuvre :

  • Vous pouvez intégrer les balises JSON-LD à vos pages HTML dans un bloc distinct.
  • Vous devez intégrer les balises de microdonnées à des éléments HTML incorporés.
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 HTML.

Pourquoi devrais-je opter pour JSON-LD ?

Remarque : pour les clients existants qui utilisent actuellement le balisage au format microdonnées, nous vous conseillons de migrer vers JSON-LD. Google prend en charge les deux formats mais conseille l'utilisation de JSON-LD.

Si vous ne fournissez pas votre contenu généré par les utilisateurs dans ce format, votre site 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.

Grâce à JSON-LD, toutes vos données structurées sont rassemblées dans un bloc distinct de code JavaScript qui va dans une section « en-tête » de votre page HTML.

Passer des microdonnées au JSON-LD

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

Remarque : JSON-LD est activé par défaut pour les nouveaux clients Ratings & Reviews.

Ajouter des balises schema.org JSON-LD

Suivez ces étapes pour ajouter des balises schema.org JSON-LD.

Remarque : cette rubrique explique la marche à suivre pour ajouter des balises structurées schema.org JSON-LD à vos pages produits. Le kit SDK BVSEO côté serveur ne prend en charge que les balises au format microdonnées. Reportez-vous à la section balisage structuré au format microdonnées pour en savoir plus sur la marche à suivre pour ajouter des balises de ce format.

Étape 1 : activez JSON-LD

Remarque : cette étape est déjà réalisée par défaut pour les nouveaux clients. Elle ne s'applique que si vous passez du format microdonnées à JSON-LD.
  1. Connectez-vous au portail Bazaarvoice .
  2. Dans le menu du portail , sélectionnez Configuration.
  3. Sélectionnez l'instance et 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 liste Implementations (Implémentations), localisez l'implémentation de Ratings & Reviews pour laquelle vous souhaitez configurer les réglages SEO. Cliquez sur Edit (Modifier) à côté de l'implémentation pour lancer la configuration.
  5. Sélectionnez SEO à gauche de la page sous Settings (Paramètres). La page SEO s'ouvre.

  6. Choisissez des valeurs pour chacune des options SEO suivantes de votre implémentation :

    • Emplacement de la balise AggregateRating : Google n'affichera les étoiles dans le rich snippet que pour les pages comportant une balise schema.org AggregateRating. Pour insérer cette balise, choisissez un emplacement parmi les options suivantes :

      • Résumé des notes principales (par défaut) : insère la balise AggregateRating dans la page de résumé des notes principales. Nous recommandons cette option.
      • Espace Avis : insère la balise AggregateRating en haut de l'espace des avis.
      • Supprimer la balise AggregateRating : supprime la balise AggregateRating.

    • Type de balise SEO : sélectionnez SEO JSON-LD Markup (balise SEO JSON-LD) dans la liste déroulante.

  7. Déployez à nouveau votre implémentation.

Étape 2 : mettez à jour la balise JSON-LD Product (Produit) sur vos PDP

Assurez-vous de disposer d'un balisage JSON-LD valide sur votre page produit et mettez à jour les éléments suivants :

  1. Ajoutez ou actualisez la propriété @id avec l'URL de votre page produit.

    Remarque : si une canonical URL est spécifiée sur la page, utilisez-la.

  2. Supprimez toute référence aux définitions schema.org (rating, review, aggregaterating, etc.) de votre objet JSON-LD de type Product (Produit) existant. Celles-ci seront fournies via le balisage JSON-LD de Bazaarvoice.

    Cet exemple illustre ce à quoi vos données structurées JSON-LD doivent ressembler :

    <html> <head> <title>Product Page</title> <!--Client injected code--> <script type="application/ld+json"> { "@context" : "https://schema.org", "@type" : "Product", "@id" : "https://yourdomain.com/product-url", "name" : "Name of Product", "image" : "image url", "description" : "this is the product description", "sku" : "Product1", "brand" : "PopularBrand"} </script> <!--BV injected code--> <script id="bv-jsonld-aggregate-rating-data" type="application/ld+json"> { "@context": "http://schema.org", "@id": "https://yourdomain.com/product-url", "aggregateRating": { "@type": "AggregateRating", "bestRating":5, "ratingValue":3.8, "reviewCount":1070 } } </script>
    Remarque : la valeur @id dans la balise Product (Produit) doit correspondre à la valeur URL @id du balisage JSON-LD injecté par Bazaarvoice. Les éléments JSON-LD de Bazaarvoice, tels que AggregateRating et Review, doivent être inclus dans le même @type (très probablement « Product »). Reportez-vous à la rubrique Utiliser le JSON-LD pour en savoir plus sur les éléments JSON-LD.

  3. Validez les balises schema.org sur chaque PDP.

    Remarque : c'est à vous que revient la tâche de valider les balises schema.org sur chaque PDP.

Étape 3 : validez les balises schema.org JSON-LD

Nous vous recommandons d'utiliser l'outil de test des résultats enrichis pour valider vos balises et identifier toute erreur.

Remarque : ces étapes de validation supposent que vous utilisiez Chrome, Safari ou Firefox. Les étapes suivantes s'appliquent que vous validiez le JSON-LD ou le format de balisage des microdonnées.

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

  1. Rendez-vous sur votre page produit. Veillez à ce que les conteneurs « Summary » ET « Reviews » s'affichent tous les deux sur la page. Par défaut, la balise schema.org AggregateRating de Bazaarvoice est injectée uniquement si le conteneur Summary est sur la page. Il en va de même pour la balise Review de schema.org et le conteneur Reviews.

  2. Vérifiez que les blocs JSON-LD corrects sont injectés dans la page produit en utilisant l'inspecteur d'éléments inclus dans les outils pour développeur de votre navigateur.

    • Pour ouvrir l'inspecteur, effectuez un clic droit sur la page de détail produit pour ouvrir le menu contextuel. Sélectionnez Inspect pour ouvrir les outils pour développeur.

      Remarque : ces outils de test reposent sur le HTML actif dans le navigateur. Inspecter en utilisant View (Afficher) > Developer (Développeur) > View Source (Afficher la source) (ou cmd + opt + U sous OS X) n'affichera que le HTML transmis par le serveur. Utiliser Inspect (Inspecter) permettra d'accéder au balisage injecté de façon dynamique par Ratings & Reviews.

    • Ouvrez la fonction de recherche en appuyant sur Ctrl+F (Command-F sous OS X) et saisissez ld+json pour localiser tous les blocs JSON-LD de la page. Appuyez sur la touche Entrée ou cliquez sur la flèche vers le bas pour poursuivre la recherche.

      Assurez-vous de la présence de deux blocs fournissant respectivement la clé aggregateRating et avis. Ensuite, vérifiez que l'attribut @id de l'URL de la page du produit correspond aux blocs injectés. L'exemple ci-dessous utilise @id”:”https://votredomaine.com/url-produit dans les blocs de la clé aggregateRating et de la clé avis. Si vous disposez d'éléments d'affichage supplémentaires, comme des rangées d'avis, vous verrez peut-être des blocs JSON-LD injectés supplémentaires.

      Exemple de rich snippet

  3. Sélectionnez l'onglet Elements (Éléments) des outils pour développeur et repérez le balisage schema.org (par exemple, l'élément < html ... >). 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.

    Exemple de rich snippet

  4. Dans un nouvel onglet, ouvrez l'outil de test des résultats enrichis .

  5. Sélectionnez l'onglet < > CODE et collez le code HTML que vous avez copié.

    Exemple de rich snippet

  6. Sélectionnez TEST CODE (TESTER LE CODE). L'outil de test des résultats enrichis vous montrera ensuite comment il interprète les données structurées qu'il trouve. Vérifiez les deux points suivants au niveau des balises schema.org :

    • « Product » (Produit) est-il un élément de niveau supérieur ?
    • Les balises Reviews (Avis) sont-elles correctement intégrées à l'élément « Product » (Produit) ?

    L'outil de test des résultats enrichis détecte les erreurs et/ou les avertissements.

    Exemple de rich snippet
    • Si des erreurs sont détectées, sélectionnez le rapport d'erreurs 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 JSON-LD non liées à du code Bazaarvoice ne sont pas prises en charge.

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

Les fonctions de retour sur événement 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 consommateur. 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 consommateur 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 : se déclenche lors de l'exécution initiale de l'application sur le site. Dans l'implémentation V2, un événement spécifique sera déclenché deux fois, d'abord pour Ratings & Reviews, puis de nouveau pour Question & Answers.
    • submissionLoad : se déclenche lors de l'ouverture par un consommateur du formulaire de soumission pour des activités telles que rédiger un avis, poser une question ou répondre à une question.
    • submissionClose : se déclenche lors de la fermeture par un consommateur du formulaire de soumission.
    • submissionSubmitted : se déclenche 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 :

    Élément Valeur Événements applicables
    ID ID du produit Tous les événements
    TotalAnswerCount Nombre total de réponses pour le produit Tous les événements de Questions & Answers V2
    TotalQuestionCount Nombre total de questions pour le produit Tous les événements de Questions & Answers V2
    TotalReviewCount Nombre total d'avis sur le produit Tous les événements de Ratings & Reviews V2
    TotalContentCount Nombre total de types de contenu pour le produit, le cas échéant Tous les événements
    bvProduct Nom de l'application d'affichage à partir de laquelle l'événement est déclenché. Les valeurs possibles sont swat_reviews, swat_questions et inpage_submission Tous les événements
    Content type Type de contenu associé à la soumission. Parmi les valeurs possibles : Reviews, Questions ou Answers. submissionLoad, submissionClose, and submissionSubmitted.
    SubmittedStep Indique l'étape du formulaire qui a été soumise. Parmi les valeurs possibles : mandatory, photoVideo, personalInformation, productRating et brandDetails. Événement submissionSubmitted pour la soumission d'un avis dans Ratings & Reviews V2 .

  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> // Make sure that BV.configure is defined before running this script BV.configure('global', { events : { bvRender : function (data) { // JavaScript code that executes when the Bazaarvoice application renders. } } });</script>

Questions fréquentes

Oui. JSON-LD fonctionnera, que vous utilisiez bv.js ou bvapi.js.

schema.org est une initiative collaborative (créée sous l'impulsion de Google, Bing et Yahoo en 2011) visant à promouvoir les normes du secteur afin d'optimiser le Web. Les balises schema.org utilisent une forme de métadonnées structurées que vous ajoutez à vos PDP pour aider les moteurs de recherche à renvoyer des pages de résultats enrichis aux clients. Pas besoin d'apprendre de nouveau code. Les balises schema.org utilisent la syntaxe JavaScript (JSON).

Les microdonnées constituent les balises schema.org incorporées au DOM d'une page Web. Les microdonnées imbriquées tirent souvent leur signification et leurs connexions de la structure du contenu d'une page.

Non. Le format JSON-LD n'est pas pris en charge par notre ancien produit Product Ratings & Reviews (PRR).

Nettoyer les implémentations existantes de Ratings & Reviews

Si le code Bazaarvoice est actuellement intégré à votre site Web, suivez les étapes suivantes pour assurer le bon fonctionnement du nouveau script de chargement BV :

  1. Assurez-vous qu'aucune balise <script> et aucun script dynamique ne fasse référence à bvapi.js.

  2. Supprimez les attributs suivants :

    • id=”BVRRSummaryContainer”
    • id=”BVRRContainer”
    • id=”BVQAContainer”

  3. Retirez tout code qui utilise la mention $BV, tel que les appels vers $BV.configure ou $BV.ui.

  4. Si la technologie de SEO de Bazaarvoice fait partie de votre configuration, mettez à jour votre implémentation pour supprimer toute référence à BVRRSummaryContainer, BVRRContainer, BVQAContainer et aux appels $BV. Votre implémentation SEO doit désormais utiliser les balises <div> décrites dans la section Ajouter le code Bazaarvoice à votre site.

Remarque : d'autres fonctionnalités de Ratings & Reviews ne prennent pas encore en charge la mise à jour de la syntaxe du code d'intégration pour l'affichage utilisant data-bv-show. Pour ces fonctionnalités, nous vous recommandons de suivre les instructions de la rubrique Show hidden content (Afficher le contenu masqué) pour créer la fonction bvCallback, puis d'ajouter un appel $BV.configure ou $BV.ui spécifique aux fonctionnalités de cette fonction.

Assistance application page unique

Si votre site est une application à page unique (SPA), le script de chargement BV est entièrement pris en charge.

Notre MutationObserver surveille les conteneurs HTML de votre site avec l'attribut bv-data-show. Une fois qu'un conteneur Bazaarvoice est ajouté sur la page et est enregistré, et si l'un de vos scripts met à jour data-bv-product-id, data-bv-subject-id ou toute autre propriété de données reconnue par notre API, le script de chargement BV se charge du reste en :

  • réinitialisant les espaces de noms ;
  • récupérant les données API à partir du cache du navigateur ou du web ;
  • redessinant toutes les applications au sein de la nouvelle configuration de page.

Par exemple, appelez les méthodes suivantes pour définir dynamiquement les attributs avec bv-data-show :

document.querySelector('[data-bv-show="reviews"]').setAttribute('data-bv-product-id', 'product2'); document.querySelector('[data-bv-show="rating_summary"]').setAttribute('data-bv-product-id', 'product2');