使用谷歌标签管理器实现

使用Bazaarvoice和谷歌标签管理器，您可以在产品详细信息页面和确认页面上捕获用户操作、交易和行为。在开始之前，请完成以下步骤:

• 创建帐户，如果你没有的话。
• 添加Bazaarvoice分析检查扩展到Chrome，这有助于诊断实现问题。
• 熟悉谷歌标签管理器设置和安装页面，如有需要。

要实现谷歌标签管理器，请执行以下操作之一:

• 如果BV像素在你的对话实例中实现，创建以下标签:

  • 装载机标签加载的Bazaarvoice JavaScript库并跟踪你网站上的活动。这必须添加到您打算收集事件的所有页面中。
  • 转换标记-追踪非电子商务用户的活动，不直接产生收入，但仍有价值。
  • 事务标记-当客户购买产品或服务时捕捉购买数据。

  所有其他事件都由BV Pixel自动捕获。

• 如果你的实现使用API，你必须设置这些标签来捕获所有的分析事件:

  • 装载机标签加载的Bazaarvoice JavaScript库并跟踪你网站上的活动。这必须添加到您打算收集事件的所有页面中。
  • 页面标签-用户加载页面。
  • 针对我国有关矿山截污库坝标签-表示用户生成的内容(UGC)在页面上可见。
  • ViewedUGC标签-表示UGC在显示窗口中显示了一段时间。
  • FeatureUsed标签-指示用户与UGC容器和控件的交互。

发布标签当你完成的时候。

添加BV加载器标记

BV加载器加载Bazaarvoice JavaScript库并跟踪您网站上的活动。将其添加到打算收集事件的所有页面。然后，使用谷歌tag Manager为BV加载器创建一个标记，并测试该标记以确保其正常工作。

将BV加载器添加到页面

如果你还没有这样做，添加BV加载器到您打算收集事件的所有页面。

创建标签

在您的谷歌标签管理器工作空间中，创建一个具有以下属性的新标签:

• 名称:BV装载机
• 标签配置:

  • 标签类型:自定义HTML然后指定以下代码，它添加了BV加载器，并包括一个函数，当BV加载器加载时告诉谷歌标签管理器，以防止与其他标签的竞争条件:

    < !——load BV——><脚本类型=“text / javascript”src =“https://apps.bazaarvoice.com/deployments/ < client_name > / < site_ID > / <环境> / <地区> / bv.js”> < /脚本>< >脚本函数onBvLoaded（）｛如果（typeof（BV）= = =＇对象＇）｛窗口［＇dataLayer＇]。推({＇事件＇：＇bvLoaded＇});｝其他的｛setTimeout（onBvLoaded，250）;｝｝onBvLoaded（）；> < /脚本

    指添加BV加载器参阅URL值的说明。

  • 高级设置:设置标签发射选项来每页一次．

• 触发:选择页面视图触发，然后让它开火所有页面．
  注意:如果页面视图没有显示在页面顶部，请使用搜索按钮找到它。

新标签看起来应该像下面这个例子:

测试标签

注意:测试需要使用谷歌Chrome浏览器和Bazaarvoice分析检查扩展安装。

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

添加PageView标签

PageView事件表示用户已经加载了页面。使用标签管理器添加此标签以捕获页面视图数据。

创建标签

在您的谷歌标签管理器工作空间中，创建一个具有以下属性的新标签:

• 名称:BV页面浏览人数

• 标签配置:选择自定义HTML标记类型，然后添加将从站点捕获数据的代码。中的每个参数trackPageView函数，请确保为您的网站指定值。如果您的站点更加动态，并且在页面上包含JavaScript变量，则可以使用它们来设置值。的trackPageView函数只需要一个常规的JavaScript对象。询问您的网站开发人员如何使用页面上存在的变量动态填充此页面视图对象。

  这里有一个例子:

  < >脚本BV．像素．trackPageView({bvProduct：＇RatingsAndReviews＇，productId：＇lx＇，品牌：＇“肯＇，类型：＇产品＇，被标记：22，rootCategoryId：＇电子产品＇，numReviews：30.，numQuestions：12，numAnswers：4，avgRating：4.4，percentRecommended：One hundred.});> < /脚本

• 触发:添加一个新的窗口加载触发和指定窗口加载作为触发器的名称。
  注意:当页面在浏览器中加载时，谷歌标签管理器将触发PageView事件、DOM就绪事件和窗口加载事件(按此顺序)。PageView发生在浏览器开始解析页面时，DOM Ready发生在浏览器完成构造DOM时，Window Loaded发生在页面完全加载(包括图像和脚本)时。PageView标记使用窗口加载触发器，因为谷歌标记管理器异步加载BV加载器，但该事件必须在调用trackPageView函数在PageView标签。如果将触发器设置为Page View, BV加载器可能无法完全加载并且不会跟踪页面视图。

新标签看起来应该像下面这个例子:

测试标签

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

添加InView标签

InView事件表示UGC在页面上可见。在浏览器中可以看到250像素的评论容器后，该事件触发。询问你的网站开发人员页面的哪些部分将被跟踪。您想要跟踪的每个页面元素都需要一个唯一的ID。然后，使用标签管理器添加该标签以捕获视图内数据。

创建标签

在您的谷歌标签管理器工作空间中，创建一个具有以下属性的新标签:

• 名称:BV针对我国有关矿山截污库坝
• 标签配置:

  • 标签类型:自定义HTML然后添加从站点捕获数据的代码。中的每个参数trackInView函数，请确保为您的网站指定值。这里有一个例子:

    < >脚本BV．像素．trackInView({productId：＇lx＇，bvProduct：＇RatingsAndReviews＇，品牌：＇“肯＇，被标记：22，rootCategoryId：＇电子产品＇}，｛minPixels：250，containerId：＇bvUGC＇//div评论容器的ID});> < /脚本

  • 高级设置:设置标签发射选项来每页一次．

• 触发:选择自定义事件类型,指定bvLoaded作为触发器名称(BV加载器标记中定义的函数)，然后选择一些自定义事件选择。
  注意:使用这些指令，触发器允许在一个页面上触发标记。你可以使用所有页面，但这可能会导致许多InView标签，它可能会减慢页面加载时间。Bazaarvoice建议您为包含要为其创建标记的容器ID的特定页面或页面组创建一个触发器。

  下面是一个触发器配置的例子:

  

新标签看起来应该像下面这个例子:

测试标签

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

添加ViewedUGC标签

ViewedUGC事件表示UGC在显示窗口中是否可见。事件触发后5秒针对我国有关矿山截污库坝标签，这意味着审阅容器在视图中的时间超过了5秒。询问你的网站开发人员页面的哪些部分将被跟踪。您想要跟踪的每个页面元素都需要一个唯一的ID。然后，使用标签管理器添加该标签以捕获已查看的UGC数据。

创建标签

在您的谷歌标签管理器工作空间中，用以下代码创建一个新标签:

• 名称:BV ViewedUGC

• 标签配置:选择自定义HTML然后添加从站点捕获数据的代码。中的每个参数trackViewedUGC函数，请确保为您的网站指定值。这里有一个例子:

  <脚本>BV．像素．trackViewedUGC({productId：＇lx＇，bvProduct：＇RatingsAndReviews＇，品牌：＇“肯＇，被标记：22，rootCategoryId：＇电子产品＇}，｛minPixels：250，minTime：2500，containerId：＇bvUGC＇//div评论容器的ID</脚本>

• 触发:选择bvLoaded触发器，它是在添加InView标签．
  注意:使用这些指令，触发器允许在一个页面上触发标记。您可以使用所有页面，但这可能会导致许多ViewedUGC标记，并可能会减慢页面加载时间。Bazaarvoice建议您为包含要为其创建标记的容器ID的特定页面或页面组创建一个触发器。

  下面是一个触发器配置的例子:

  

新标签看起来应该像下面这个例子:

测试标签

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

添加FeatureUsed标签

FeatureUsed事件记录用户与UGC容器和控件的交互。例如，您可以跟踪用户何时单击按钮或观看视频。询问你的网站开发人员页面的哪些部分将被跟踪。您想要跟踪的每个东西都需要一个唯一的ID。使用标签管理器添加这个标签。

实现分析

确保执行如下所列的所需分析这个页面．

创建一个变量

完成这些步骤，在谷歌标签管理器工作空间中创建用户定义变量。变量使谷歌标签管理器能够在标签之间共享数据。

1. 创建具有以下属性的变量:

   • 名称:元素ID
   • 类型:Auto-Event变量在页面元素下面
   • 变量类型:元素ID

   变量配置应该是这样的:

   

2. 确定要跟踪的元素所使用的ID。通常，HTML元素包含一个ID属性，但如果没有，您可能需要开发人员修改网站为您添加一个。打开一个新的浏览器窗口或选项卡，找到要跟踪的按钮或元素。右键单击元素并选择检查．在HTML代码中找到ID。

   这里有一个例子:

   在本例中，ID为helpfulness-btn-yes：

   <按钮类型=“按钮”类=“btn btn-vote js-btn-vote-yes”bveventtype =“votingHelpfulness”数据值=“是的”id =“helpfulness-btn-yes”>…< /按钮>

3. 在您的谷歌标签管理器工作空间中，创建一个新的触发器，FeatureUsed标签将使用它来记录用户何时单击您网站上的元素。例如，它可以记录用户何时单击“这篇评论有帮助吗?”旁边的“是”按钮。指定这些触发器属性:

   • 名称:指定描述操作的名称，例如点击“是”
   • 类型:所有的元素点击下
   • 触发配置:
     • 该触发器触发:一些点击．

     • 当事件发生且所有这些条件为真时触发此触发器:选择元素ID(上面定义的变量)，选择包含，然后指定元素ID。你的配置应该是这样的:

       

创建一个标签

创建一个具有以下属性的新标签:

• 名称:指定描述操作的名称，例如发现回顾有帮助．

• 标签配置:选择自定义HTML然后添加从站点捕获数据的代码。中的每个参数trackEvent函数，请确保为您的网站指定值。这里有一个例子:

  < >脚本BV．像素．trackEvent（＇功能＇，｛类型：＇使用＇，名字：＇Feature_Button＇，品牌：＇测试的品牌＇，productId：＇1234567——bunnyhat＇，bvProduct：＇RatingsAndReviews＇，被标记：＇帽子＇，detail1：＇review_helpful＇，detail2：＇是的＇});> < /脚本

• 触发:选择上面创建的触发器。

新标签看起来应该像下面这个例子:

测试标签

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

添加Conversion标签

转换事件跟踪非电子商务用户的活动，这些活动不能直接产生收入，但仍有价值，例如用户何时点击商店定位器或在哪里购买。使用标签管理器添加这个标签。

创建一个变量

完成这些步骤，在谷歌标签管理器工作空间中创建用户定义变量。变量使谷歌标签管理器能够在标签之间共享数据。

1. 创建具有以下属性的变量:

   • 名称:元素ID
   • 类型:Auto-Event变量在页面元素下面
   • 变量类型:元素ID

   变量配置应该是这样的:

   

2. 确定用于要跟踪的元素的ID。通常，HTML元素包含一个ID属性，但如果没有，您可能需要开发人员修改网站为您添加一个。打开一个新的浏览器窗口或选项卡，找到要跟踪的按钮或元素。右键单击元素并选择检查．在HTML代码中找到ID。

   在本例中，ID为findStore：

   <按钮数据目标=“#覆盖”data-behavior =“模态”data-tcin =“15060404”id =“findStore”类=“btn btn-sm”>…< /按钮>

3. 在谷歌标记管理器工作空间中，创建标记将使用的新触发器来记录事件。例如，您可以记录用户何时单击Store Locator按钮。指定这些触发器属性:

   • 名称:指定描述操作的名称，例如店定位器．
   • 类型:所有的元素在点击。
   • 触发配置:
     • 该触发器触发:一些点击．

     • 当事件发生且所有这些条件为真时触发此触发器:选择元素ID(上面定义的变量)，选择包含，然后指定元素ID。你的配置应该是这样的:

       

创建一个标签

创建一个具有以下属性的新标签:

• 名称:指定描述操作的名称，例如店定位器．

• 标签配置:选择自定义HTML然后添加从站点捕获数据的代码。中的每个参数trackConversion函数，请确保为您的网站指定值。这里有一个例子:

  < >脚本BV．像素．trackConversion({标签：＇店定位器＇，价值：1，类型：＇TestConversion＇});> < /脚本

• 触发:选择上面创建的触发器。

新标签看起来应该像下面这个例子:

测试标签

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

添加事务标记

当客户购买产品时，事务事件捕获购买数据。采购包括订单和订单中购买的物品。使用标签管理器添加这个标签。

向页面添加订单数据

向包含订单数据的页面添加代码，例如付款确认页面或感谢页面。这段代码将事务数据复制到谷歌标签管理器数据层，该数据层将数据对象发送到谷歌标签管理器，以便标签、触发器和变量可以使用它们。

在添加订单数据时，需要注意以下限制:

• 如果指定的参数不带值，则将值设置为“0”或＂＂．确保这些值不会默认为“零”．

• 如果从数据层传递项目参数，请确保将对象指定为数组，而不是字符串。如果对象作为字符串传递，参数名和值包含在引号中，然后转义，如本例所示，Bazaarvoice无法解析数组元素:

  “项目”：“[{\”名字\”：\”Product_Name\”，\”价格\”: 2899.99,\”sku\”: 2935,\”数量\”2}):“

  相反，按照下面的示例格式化参数。

有关必需和可选参数的列表，请参见添加事务事件．

下面是要在页面上执行的代码示例:

vartransactionData＝｛//主持人:"bazaarvoice.com"，货币：”，orderId：＇4601555774216＇，总计：＇9.27＇，城市：＇斯普林菲尔德＇，状态：＇哎＇，国家：”，邮政编码：＇55555＇，用户标识：”，电子邮件：＇homer@simpson.com＇，昵称：”，税：＇0.72＇，航运：＇4.97＇，项目：［｛价格：＇3.58＇数量：＇1＇，sku：＇1234567 - 2＇，类别：＇啤酒＇，名字：＇一罐普通啤酒＇，imageUrl：＇http://tag-manager.bazaarvoice.cimages/beer.jpg＇，｝］}；//如果谷歌标签管理器，确保dataLayer作为数组存在//仍然在异步加载。窗口［＇dataLayer＇］＝窗口［＇dataLayer＇］||[];//将交易数据发送到谷歌标签管理器。窗口［＇dataLayer＇]。推({＇transactionData＇：transactionData});//告诉谷歌标签管理器发送Bazaarvoice转换跟踪窗口［＇dataLayer＇]。推({＇事件＇：＇bv_conversion_transaction＇});

创建一个变量

完成这些步骤，在谷歌标签管理器工作空间中创建用户定义变量。变量使谷歌标签管理器能够在标签之间共享数据。

1. 创建一个具有以下属性的变量，以便与数据层共享事务数据:

   • 名称:交易数据
   • 类型:数据层变量在页面变量下面
   • 变量类型:transactionData，这是在步骤1中添加到页面的代码中配置的

   变量配置应该是这样的:

   

2. 在谷歌标签管理器工作空间中，创建一个新的触发器，当转换事务发生并且事务数据准备就绪时，页面将使用该触发器通知谷歌标签管理器。指定这些触发器属性:

   • 名称:BV的事务
   • 类型:自定义事件在其他
   • 触发配置:指定bv_conversion_transaction作为事件名称，该名称与步骤1中指定的代码匹配

   

创建一个标签

创建一个具有以下属性的新标签:

• 名称:指定BV的事务．

• 标签配置:选择自定义HTML然后添加从站点捕获数据的代码。中的每个参数trackTransaction函数，请确保为您的网站指定值。这里有一个例子:

  <脚本>函数waitForBV（）｛如果（typeof（BV）= = =＇对象＇）｛BV．像素．trackTransaction({{事务数据}});｝其他的｛setTimeout（waitForBV，250）;｝｝waitForBV（）；</脚本>

  注意:谷歌标签管理器异步加载BV加载器，这可能导致竞争条件。这是因为数据层可能包含一个事件，该事件指示标签管理器在BV加载器完全加载之前触发转换事务。标签管理器的标签排序功能不知道什么时候Bazaarvoice是可用的JavaScript。因此，该函数将每250ms检查一次，在跟踪事务之前查看BV加载器是否已加载。
  
  另外，请注意，Transaction Data变量被添加在双花括号中。虽然这不是标准JavaScript，但标签管理器会将其解释为对第2步中设置的自定义变量的引用。当执行这段代码时，标签管理器将变量替换为对象。
  
  最后，标签管理器变量中的前导和尾随空白也很重要。不要在变量名周围包含空格，例如{{Transaction Data}}。
  
• 触发:选择上面创建的触发器。

新标签看起来应该像下面这个例子:

测试标签

完成以下步骤来测试标签:

1. 在工作区的右上角，单击下拉菜单并选择预览．这将启用预览模式，以便您可以测试标记。

   

2. 在Chrome中加载你的网页。

3. 验证是否为该页触发了标记。在谷歌标签管理器预览窗格中，BV装载机应列于在此页上触发的标签．

   如果标记没有触发，请验证触发器是否正确设置。例如，如果您在过滤器中拼写错误，触发器将不会按预期触发。

4. 点击在浏览器菜单中显示分析检查器，并验证类似于这些细节显示:

   

发布标签

当你准备在你的网站上进行实时更改时，你必须发布谷歌标签管理器容器。

1. 在工作区的右上角，单击发布．
2. 为此版本的容器添加名称和描述，然后单击发布．