使用 Google 跟踪代码管理器跟踪特定产品的购买情况答案

【问题标题】：Track specific products purchase with Google Tag Manager使用 Google 跟踪代码管理器跟踪特定产品的购买情况
【发布时间】：2019-08-19 05:36:49
【问题描述】：

我在使用 Google 跟踪代码管理器和 Wordpress/WooCommerce 时遇到问题（我无法访问后端）。

我需要跟踪购买特定类型的产品，主要产品的样品（大多数产品都有其样品）。

样品可以与其他产品一起购买，也可以单独购买。

我在每次购买样品时显示的源代码中都有一个共同元素（见下文）。购买样品时，元素 colour-card-a5 会出现在两个不同区域的结帐页面上：

区域 #1

dataLayer.push({
  "pagePostType":"page",
  "pagePostType2":"single-page",
  "pagePostAuthor":"root",
  "ecommerce":{
    "currencyCode":"EUR",
    "purchase":{
      "actionField":{
        "id":"22481",
        "affiliation":"",
        "revenue":"1.70",
        "tax":"0",
        "shipping":"0.00",
        "coupon":""
      },
      "products": [
        {
          "id":13487,
          "name":"Genert",
          "sku":"AQA021",
          "category":"Contemporary",
          "price":1.7,
          "currency":"EUR",
          "stocklevel":null,
          "quantity":1,
          "variant":"colour-card-a5,interior-design"
        }
      ]
    }
  },
  "event":"gtm4wp.orderCompletedEEC"
});//]]>

区域 #2

<td class="woocommerce-table__product-name product-name">
    <a href="https://www.example.com/product/genert/?attribute_pa_size=colour-card-a5&attribute_pa_finish=interior-design">
      Genert - Colour Card (A5), Interior Design
    </a> 
    <strong class="product-quantity">&times; 1</strong> 
</td>

由于结帐页面是 example.com/checkout/order-received，我实现了一个触发器： 触发器类型： 元素可见性

方法： CSS选择器

元素选择器： color-card-a5

何时触发此触发器： 每页一次

最小可见百分比： 1

此触发器触发： 一些可见性事件

当事件发生并且所有这些条件都为真时触发此触发器： 页面网址 |包含 |收到订单

但是一旦我购买了样品，标签就不会被触发。我确定我错过了什么，但不知道是什么。

有人可以帮忙吗？

提前致谢

【问题讨论】：

标签： wordpress triggers css-selectors google-tag-manager

【解决方案1】：

您提供的 CSS 选择器 (colour-card-a5) 与您提供的 HTML 中的任何元素都不匹配。您应该使用a[href*="colour-card-a5"]，它将选择任何具有 href 属性的锚点，其中包含 colour-card-a5 字符串。

您还应该检查该元素是否在页面加载期间存在于 DOM 中，或者稍后由脚本添加。在后一种情况下，您应该在触发器设置中启用 DOM 检查，以允许触发任何添加的元素。

【讨论】：