对话

首页

学习

实现

实现概述

收集的内容

显示内容

API分析

分析集成

显示集成

若要在您的网站上显示Bazaarvoice收集的用户生成内容(UGC)，您必须将Bazaarvoice代码添加到您的网站。这使您的网站能够与Bazaarvoice应用程序通信并检索UGC以供显示。

向站点添加显示代码后，请按照中所述自定义页面上的每个外观托管显示配置。

本主题描述了技术团队应该采取的步骤:

将Bazaarvoice UGC(评分和评论，问题和答案)整合到您的产品展示页面，以及显示隐藏内容的步骤
将schema.org (SEO)集成到您的产品显示页面中

注意:向产品页面添加schema.org标记有助于主要搜索引擎在搜索引擎结果页面(serp)中提取和显示有用的信息，例如产品星级评级或产品评论片段。当你考虑到95%的消费者在购买前会阅读评论时，这是非常强大的。

显示概述

大多数品牌和零售商将Bazaarvoice显示代码添加到其产品显示页面(pdp)，但如果他们使用共享模板，则可以将该代码添加到所有页面。通常，以下语句适用于所有页面。例外情况将在以下部分中进行说明。

显示内容不断更新适度批准提交的内容。
通过审核的本地评审和联合评审包括在显示中。
支持所有区域设置。
支持产品系列。

评价总结

“等级汇总”显示指定产品ID的如下信息:

五星图片表示产品的平均评级
该产品的评论总数
V1只推荐该产品的客户百分比(%)

注意: V1只要显示客户的百分比(%)，必须安装bvapi.js

交互式直方图，提供评级细分
产品的问题和答案的数量

它还提供了“写一篇评论”和“问一个问题”链接。

评级摘要通常放置在PDP的顶部，紧挨着产品图像，以提供评级摘要。这里有一个例子:

完成以下步骤来实现评级摘要:

联系Bazaarvoice客户服务在对话实现中启用此功能。
向PDP中添加评级摘要。
如果评论被隐藏在一个界面组件后面，比如一个标签，添加自定义代码以显示内容。
自定义字体和图标用于评级摘要。
自定义用于标题、链接和其他元素的文本展示的。

Bazaarvoice强烈建议您在评论中实现这一点，下面将对此进行描述。

Reviews显示来自每个提交评论的消费者的评分和评论列表。如果启用了注释，并且使用者向评审提交了注释，注释也会显示在这里。评论通常放在产品图片和描述的下面。

这里有一个例子:

完成以下步骤来实施评审:

向PDP中添加代码。
如果评论是隐藏的，添加代码以显示正确的制表符或容器。
自定义字体和图标用于评论。
自定义用于标题、链接和其他元素的文本展示的。
设置选项用于在您的网站上显示评论。

Bazaarvoice强烈建议您使用评分摘要实现评论，这在前一节中有描述。

报告强调

在您的产品展示页面(pdp)上实施回顾重点，以显示:

对产品的正面、中性和负面评级的高级总结。
收集消费者对产品普遍看法的评论节选。

为了生成和显示某个产品的“评论重点”，Bazaarvoice会分析属于该产品的所有评级和评论数据。购物者可以立即了解不同的消费者情绪，而无需阅读单个评论，尽管他们可以展开重点内容以查看完整的评论。

这里有一个例子:

在实施回顾重点之前，请注意:

“回顾重点”显示与评论显示。
回顾亮点可以实现仅对英语地区。
包括本地评审和网络评审(包括产品变体之间共享的评审)。
奖励性评论是不包括在内。

注意:当一个产品有大约10个可显示的评论时，这些评论就会自动生成并显示出来，前提是这些评论对该产品有一些相似的看法。

实施评审要点:

联系Bazaarvoice客户服务在对话实现中启用此功能。
向PDP中添加代码。
打开显示并自定义样式由Review Highlights使用。这些不是从评论显示继承的。
自定义用于标题、链接和其他元素的文本展示的。

注意:在您启用了该功能并添加了所需的代码后，可能需要72小时才能在pdp上显示“审查重点显示”。

提示:API也可以使用Review Highlights数据。欲了解更多，请访问产品情绪洞察API页面

在Bazaarvoice开发者门户网站。

问题与答案

问题和答案页面显示了消费者为指定的产品ID提供的问题和答案。问题和答案通常放在产品图片和描述下面。

这里有一个例子:

完成以下步骤以实现问题和答案:

向PDP中添加代码。
如果评论将被隐藏，添加代码以显示正确的制表符或容器。
打开显示并自定义字体和图标问答使用。
自定义用于标题、链接和其他元素的文本的显示。
设置选项用于在您的网站上显示问题和答案。

添加Bazaarvoice代码到您的网站

要显示UGC，如评分和评论，您必须将Bazaarvoice代码添加到您的网页。

警告:如果现有的实现使用侦察文件(bvapi.js)，请参阅显示集成v1文档。但是，Bazaarvoice鼓励您实现BV加载器文件(bv.js)及< div >下面记录的标签用于性能改进和未来的创新。

如果你选择使用bv.js与这些说明显示器集成，您必须联系Bazaarvoice客户服务以启用评级摘要和审查突出显示功能。如果Support不启用这些功能，这些功能的代码将无法工作。

步骤1:添加BV加载器

BV加载器是一个小型的异步JavaScript应用程序，用于管理和显示web页面上配置的功能和UGC。BV加载器将只下载特定页面上请求的所需应用程序。

要集成BV加载器，请在HTML中添加以下内容< >头页面标签:

    
  
 < div data-bv-show=" Reviews " data-bv-product-id="productID123">

< div data-bv-show=" Questions " data-bv-product-id="productID123">

显示隐藏内容

用户的一些操作会使Bazaarvoice的功能显示在屏幕上，比如选择评分摘要中的★★★★★图标，它会滚动到评分和评论。近年来，标签式导航变得非常普遍。

搜索引擎能够有效地索引位于标签后面的内容，前提是满足以下两个条件:

SEO内容以页面的初始HTML格式呈现，而不是通过您这边的脚本加载。
即使在浏览器中关闭JavaScript并刷新页面后，SEO内容仍在页面上可见。

注意:如果保存SEO内容的容器的默认状态设置为“可见性:隐藏”或“显示:没有”,那么:

使用JavaScript重置此属性。不要在样式表中或内联到元素中声明此属性。
应用于所有选项卡，这样当页面关闭JavaScript显示时，所有内容都是可见的。

示例代码

下面是一个可以用来隐藏标签内容的JavaScript代码示例:

          <脚本类型=“text / javascript”>文档。getElementById（＇tab1＇）.风格。显示=＇没有一个＇；文档。getElementById（＇tab2＇）.风格。显示=＇没有一个＇；文档。getElementById（＇tab3＇）.风格。显示=＇没有一个＇；文档。getElementById（＇tab4＇）.风格。显示=＇没有一个＇；> < /脚本
         

如果该内容隐藏在选项卡后面，您也可以直接在div中设置样式。方法的自定义、特定于页的代码bvCallback函数显示正确的选项卡或容器。

添加bvCallback函数传递给页面，以便BV加载器可以下载并在下载BV加载器时执行它(异步)。中包含代码bvCallback函数运行自定义函数。

v1实现的示例代码

属性的回调显示事件，使用BV.reviews.on当评审进入视图时，方法。(BV.questions.on方法也可用。)下面的例子使用了bootstrap选项卡组件:

<！DOCTYPE html>   ， ，和，用'staging'或'production'替换。——>    < div data-bv-show="rating_summary" data-bv-product-id="ProductID123">

v2实现的示例代码

属性的回调显示事件，使用BV.swat_reviews.on当评审进入视图时，方法。使用bootstrap选项卡组件的示例如下:

<！DOCTYPE html>   ， ，和，用'staging'或'production'替换。——>    < div data-bv-show="rating_summary" data-bv-product-id="ProductID123">   < !——指示BV加载器显示productID123的R&R功能在这里——>< div data-bv-show="reviews" data-bv-product-id="productID123">

添加schema.org标记

阅读以下章节了解schema.org标记:

什么是富代码片段?

客户经常通过搜索引擎找到产品。必威手机版本将schema.org标记添加到产品详细信息页面(pdp)可以使搜索引擎更容易在搜索引擎结果页面(serp)中显示消费者评论的片段。当你考虑到这一点时，这是很强大的95%的消费者在购买前会阅读评论。

丰富的内容片段，如星级评级或评论摘要，可以增强搜索结果，提高有机点击率。

注意:谷歌从结构化标记(例如schema.org

)。

下面是一个富代码片段的例子:

丰富的片段也被称为“丰富的结果”。

为什么要添加schema.org标记?

Schema.org标记可以帮助谷歌、Yahoo和Bing等搜索引擎了解您站点的内容并显示丰富的搜索结果。

添加schema.org标记有以下好处:

帮助你的内容在搜索结果页面上脱颖而出
允许您标记丰富的片段，以提高点击率(CTR)
提高搜索引擎排名(间接);因为提高点击率是排名影响因素
符合行业标准

注意:您负责确保您的JSON-LD对象与Bazaarvoice的JSON-LD兼容。

有几十种丰富的代码片段类型可用，但只有少数适用于零售和品牌网站。AggregateRating而且审查是两种最有价值的标记类型，你可以添加到Bazaarvoice评级和评论UGC。

AggregateRating:此代码段类型为搜索引擎提供产品的聚合评论和星级评级(满分5分)。
审查:此snippet类型为搜索引擎提供关于产品的特定评论相关信息。

org格式(JSON-LD vs微数据)

Bazaarvoice支持两种格式的结构化数据:

JSON-LD
微数据

谷歌正式宣布JSON-LD是结构化数据的首选格式。JSON-LD实现起来更简单、更清晰:

您可以将JSON-LD标记以独立块的形式打包到HTML页面中。
您必须在内联HTML元素周围包装Microdata标记。

格式描述和放置

JSON-LD(推荐)

格式	描述和放置
JSON-LD(推荐)	JSON-LD代表链接数据的JavaScript对象符号。JSON是一种轻量级的数据交换格式，它便于人类读写，也便于机器解析和生成。JSON-LD不需要将schema.org属性添加到页面上的单个元素(Microdata格式)，而是允许您标记希望在独立JavaScript代码块中公开的丰富代码片段。这使得JSON-LD结构化数据易于添加、更新或删除。注意:将JSON-LD结构化代码嵌入到`< >脚本`标签在你的HTML页面的头部分。
微数据	微数据使用HTML标记属性来标记希望作为结构化数据公开的内容。微数据结构化数据与JSON-LD传递相同的信息。但是，使用微数据格式可能会很混乱，因为结构化数据内联嵌套在HTML内容中。注意:微数据被嵌入`< div >`标签，通常放置在HTML页面的文档对象模型(DOM)的元素内。

JSON-LD代表链接数据的JavaScript对象符号。JSON是一种轻量级的数据交换格式，它便于人类读写，也便于机器解析和生成。JSON-LD不需要将schema.org属性添加到页面上的单个元素(Microdata格式)，而是允许您标记希望在独立JavaScript代码块中公开的丰富代码片段。这使得JSON-LD结构化数据易于添加、更新或删除。

注意:将JSON-LD结构化代码嵌入到< >脚本标签在你的HTML页面的头部分。

微数据

微数据使用HTML标记属性来标记希望作为结构化数据公开的内容。微数据结构化数据与JSON-LD传递相同的信息。但是，使用微数据格式可能会很混乱，因为结构化数据内联嵌套在HTML内容中。

注意:微数据被嵌入< div >标签，通常放置在HTML页面的文档对象模型(DOM)的元素内。

为什么我要改用JSON-LD?

注意:Bazaarvoice建议现有的客户端(使用microdata格式标记的客户端)迁移到JSON-LD标记。谷歌并不需要一种格式。但是，建议将JSON-LD标记迁移到面向未来的内容。

如果你的用户生成的内容不是以首选的格式发布，你的网站就不太可能出现在购物者搜索结果的高排名位置。这可能意味着错失有机获取新客户的机会。

使用JSON-LD，所有结构化数据都打包成一个独立的JavaScript代码块，该代码块进入HTML页面的标题部分。

从微数据迁移到JSON-LD?

如果从Microdata切换到结构化数据格式:

从HTML页面中删除任何先前存在的微数据。
请参阅添加JSON-LD schema.org标记指令。

注意:JSON-LD在默认情况下为新会话客户端启用。

添加JSON-LD schema.org标记

完成这些步骤，添加JSON-LD schema.org标记。

注意:本主题描述如何将schema.org JSON-LD结构化标记添加到产品显示页面。服务器端BVSEO SDK只支持微数据格式的标记。指微数据结构化标记获取有关如何添加微数据格式标记的信息。

步骤1:启用JSON-LD

注意:默认情况下，新客户端已完成此步骤。这一步只适用于从微数据转换到JSON-LD格式的情况。

登录到Bazaarvoice门户。
来自传送门菜单中,选择配置。
选择实例并进入配置。Site Manager将出现，列出可用的部署区域和实现。
从“实现”列表中，找到要配置SEO设置的“对话”实现。选择编辑旁边的实现打开配置。
选择搜索引擎优化在这一页的左边下面设置。进入SEO页面。
为您的实现选择以下每个SEO选项:
- 聚合标记位置google只会在只有一个schema.org的页面上显示丰富的代码片段星号AggregateRating标签。从以下选项中选择一个位置来插入该标记:
  - 主要评级汇总(默认)-在主评级汇总页面插入AggregateRating标签。Bazaarvoice推荐这个选项。
  - 检查集装箱-在评论容器的顶部插入AggregateRating标签。
  - 删除聚合评级标签-不包含AggregateRating标签。
- SEO标记类型选择SEO JSON-LD标记从下拉列表中。
重新部署您的实现。

步骤2:更新pdp上的产品JSON-LD标记

确保你的简历有效JSON-LD标记在您的产品页面上更新以下内容:

添加或更新@ id属性与您的产品页面URL。

注意:如果一个规范的URL ，请使用此URL代替。

从现有的JSON-LD Product对象中删除对评级、评审、聚合和其他schema.org定义的任何引用。这些将通过Bazaarvoice JSON-LD标记提供。

这个例子说明了JSON-LD结构化数据应该是什么样的:

  产品页面
     .

注意:的@ id的值应匹配@ id由Bazaarvoice注入的JSON-LD标记中的URL值。Bazaarvoice JSON-LD元素等AggregateRating而且审查，应该包括在同样的@type(很可能是“产品”)。指使用JSON-LD

有关JSON-LD元素的更多信息。

在每个PDP上验证schema.org标记。

注意:您负责验证每个PDP上的schema.org标记。

步骤3:验证JSON-LD schema.org标记

Bazaarvoice建议您使用富结果测试工具来验证标记并识别任何错误。

注意:这些验证步骤假设您使用的是Chrome、Safari或Firefox。无论验证JSON-LD还是Microdata标记格式，以下步骤都适用。

要测试您的schema.org标记集成:

导航到您的产品显示页面(PDP)，以确保Summary和Reviews容器都显示在页面上。默认情况下，Bazaarvoice 'sAggregateRating只有当Summary容器在页面上时，才会注入schema.org标记。这同样适用于审查org标记和Reviews容器。
通过使用浏览器的Developer Tools中的Elements检查器，验证将正确的JSON-LD块注入到产品显示页面中。
- 要打开Elements检查器，右键单击产品显示页面以打开上下文菜单。选择检查打开开发人员工具。
  
  注意:这些测试工具依赖于活跃的HTML在浏览器中。使用查看>开发人员>查看源代码(OS X上的Option-Command-U)将只显示服务器渲染的HTML。使用检查将动态地访问conversation注入的标记。
- 通过按Ctrl+F(在OS X上是Command-F)打开搜索并键入ld + json来找到页面上的所有JSON-LD块。按“Enter”或选择向下箭头继续搜索。
  确保有一个块提供aggregateRating键和另一个提供审查关键。然后，验证@ id属性与产品页面URL匹配注入的块。下面的示例使用@ id”:“https://yourdomain.com/product-url在街区里aggregateRating键和审查关键。如果您有额外的显示元素，比如正面评论，您可能会看到额外注入的JSON-LD块。
选择元素选项卡，找到schema.org标记。例如，< HTML…>元素。右键单击并选择复制>复制外层HTML。确保复制了有效结果的整个DOM。
在新选项卡中，打开富结果测试工具。
选择< >代码标签并粘贴您复制的HTML。
选择测试代码。然后，Rich Results将向您展示它如何解释它找到的任何结构化数据。检查schema.org标记的两件事:
- Product是顶级元素吗?
- 评论是否正确地嵌套在产品下面?
富结果测试工具将检测错误和/或警告。
- 如果检测到错误，则选择错误报告以查找问题代码的来源。
- 检查警告并确认它们是由现有代码引起的。与Bazaarvoice代码无关的JSON-LD标记不在支持范围之内。

常见问题

是的。如果您使用其中任何一种，JSON-LD都可以工作bv.js或bvapi.js。

Schema.org是一项合作标准倡议(由谷歌、必应和雅虎于2011年建立)，旨在促进改善网络的行业标准。org标记使用一种形式的结构化元数据，可以将其添加到pdp中，以帮助搜索引擎向客户返回更丰富的搜索结果页面。你不需要学习任何新的编码技能。org标记使用Javascript (JSON)语法。

微数据是内联添加到网页DOM中的schema.org标记。嵌套微数据通常根据页面上的内容结构派生其含义和连接。

不。JSON-LD格式在我们的传统产品评级和评论(PRR)产品中不受支持。

清理现有的对话实现

如果Bazaarvoice代码目前集成在您的网站上，请按照以下步骤确保新的BV加载器框架正常工作:

确保没有< >脚本标记或动态脚本引用bvapi.js。
删除以下任何属性:
- id = " BVRRSummaryContainer "
- id = " BVRRContainer "
- id = " BVQAContainer "
删除依赖于的任何代码BV美元，如呼叫BV.configure美元或BV.ui美元。
如果Bazaarvoice SEO更新实现以删除对BVRRSummaryContainer、BVRRContainer、BVQAContainer和BV美元调用。SEO实现现在必须引用< div >中描述的标签添加Bazaarvoice代码到您的网站。

注意:对话的其他特性还不支持所使用的显示集成代码的更新语法data-bv-show。对于这些功能，Bazaarvoice建议您按照步骤1操作集成选项卡或其他动态内容要创建bvCallback函数，然后添加任意BV.configure美元或BV.ui美元特定于该函数中那些特性的调用。

单页应用程序支持

如果站点是单页应用程序(SPA)，则完全支持BV加载器。

我们的MutationObserver控件监视站点的HTML容器bv-data-show属性。一旦Bazaarvoice容器在页面上并注册，如果您的任何脚本更新data-bv-product-id，data-bv-subject-id，或任何其他被我们的API识别的数据属性，BV加载器将通过以下方式处理其余的:

重新初始化任何名称空间
从浏览器缓存或web中获取API数据
在新页面设置中重新绘制任何应用程序

例如，调用以下方法来动态设置容器中的属性bv-data-show：

document.querySelector ([data-bv-show = "评论"])。setAttribute(“data-bv-product-id”、“product2”);document.querySelector ([data-bv-show = " rating_summary "])。setAttribute(“data-bv-product-id”、“product2”);

选择你的语言:

弹出

对话

学习

实现

收集的内容

显示内容

分析数据

报告

的见解

指示板

API分析

分析集成

显示概述

评价总结

评论

报告强调

问题与答案

添加Bazaarvoice代码到您的网站

步骤1:添加BV加载器

显示隐藏内容

示例代码

v1实现的示例代码

v2实现的示例代码

添加schema.org标记

什么是富代码片段?

为什么要添加schema.org标记?

org格式(JSON-LD vs微数据)

为什么我要改用JSON-LD?

从微数据迁移到JSON-LD?

添加JSON-LD schema.org标记

步骤1:启用JSON-LD

步骤2:更新pdp上的产品JSON-LD标记

步骤3:验证JSON-LD schema.org标记

常见问题

清理现有的对话实现

单页应用程序支持

支持

反馈

语言

打印

切换下拉

删除亮点