在 Google Ads 动态广告中显示价格

在 Google Ads Feed 中，一个项目可以有多个价格，例如正常价和促销价。您可以在 Google Web Designer 中向 Google Ads 动态广告中添加相应功能，用于确定针对每个 Feed 项应显示哪个价格。

详细了解如何在 Google Web Designer 中针对 Google Ads 创建动态广告。

针对每项显示单一价格

如果 Feed 只针对每项包含一个价格，请将此价格元素的文本内容绑定到您要显示的那个价格属性，例如 Retail 0 > Regular price。

显示促销价和正常价

利用代码，您可以根据某个项目是否有促销价以及促销价与正常价是否不同来决定如何显示价格。在下方示例中，促销商品的促销价显示在正常价的下方，并带有删除线。

以下 Google Ads 自适应模板已包含此功能：

  • Dynamic Remarketing Single Page with Panels and Individual CTA Buttons
  • Dynamic Remarketing with Aligned Panels and Individual CTA Buttons
  • Dynamic Remarketing with Headline and Individual CTA Buttons
  • Dynamic Remarketing with Headline and Single CTA Button
  • Dynamic Remarketing with Pagination and Single CTA
  • Dynamic Remarketing with Single CTA II

或者，如果您习惯在代码视图中使用 Google Web Designer，则可以按照以下步骤添加必要的代码。此过程适用于“零售”动态架构，但您或许能够运用不同的绑定将其进行相应调整以适用于其他 Feed 类型。

1. 为价格创建文本元素

在广告素材中针对以下价格类型创建 3 个文本元素。

  • 默认价 - 如果 Feed 中没有提供促销价，则此价格会单独显示。
  • 促销价 - 如果 Feed 中已提供此价格，则此价格会与正常价一起显示。
  • 正常价 - 如果 Feed 中提供了促销价，此价格会与促销价一起显示并且通常带有删除线，以便观看者对这两者进行比较。

2. 添加绑定

在动态面板中，将价格元素文本内容的动态绑定添加到以下数据架构对象中：

  • 默认价 - 绑定到 Retail 0 > Lowest price
  • 促销价 - 绑定到 Retail 0 > Sale price
  • 正常价 - 绑定到 Retail 0 > Regular price

对于“零售”以外的数据架构，您可能需要将默认价和正常价绑定到同一个数据架构对象。

3. 添加类

在代码视图中，添加以下类：

  • 包含价格的父元素 - 向父元素添加 js-item 类。如果您的价格是“手滑式图库”组的一部分，请将此类添加到组实例中。
  • 默认价 - 将类 js-item-price 添加到文本元素中。
  • 促销价 - 将类 js-item-saleprice 添加到文本元素中。
  • 正常价 - 将类 js-item-regularprice 添加到文本元素中。

4. 添加函数

在代码视图中，将下面的相应代码复制并粘贴到文档中的 标记内，具体取决于您的项目是否显示在手滑式图库中。

有手滑式图库时的函数

此代码假定您的手滑式图库的 ID 为 swipegallery-items。如果 ID 有误，请将突出显示的文本更改为正确的 ID。

<script>

  initItemDisplay_ = function(item) {
    gwd.myGallery = document.getElementById('swipegallery-items');
    elems = document.querySelectorAll('#' + gwd.myGallery.id + ' [data-gwd-grp-id=item-name]');
    elemsCta = document.querySelectorAll('#' + gwd.myGallery.id + ' [data-gwd-grp-id=cta-on]');

    var itemPrice = item.querySelector('.js-item-price');
    var itemSalePrice = item.querySelector('.js-item-saleprice');
    var itemRegularPrice = item.querySelector('.js-item-regularprice');
    displayCorrectPrices(itemPrice, itemSalePrice, itemRegularPrice);
    // turn off all item highlights.
    for (let i = 0; i < elems.length; i++) {
      elems[i].style.opacity = 0;
    }
  };

  displayCorrectPrices = function(defaultPrice, salePrice, regularPrice) {
    var priceValues = {
      defaultPrice: defaultPrice && defaultPrice.textContent || null,
      salePrice: salePrice && salePrice.textContent || null,
      regularPrice: regularPrice && regularPrice.textContent || null
    };
    showSalePrice(true, defaultPrice, salePrice, regularPrice);
    if (isSalePriceEnabled_(priceValues)) {
      showSalePrice(true, defaultPrice, salePrice, regularPrice);
    } else {
      showSalePrice(false, defaultPrice, salePrice, regularPrice);
    }

    function showSalePrice(state, defaultPrice, salePrice, regularPrice) {
      showElement(defaultPrice, !state);
      showElement(salePrice, state);
      showElement(regularPrice, state);

      function showElement(el, state) {
        if (!el) return;
        if (state) {
          el.style.opacity = 1;
          el.style.visibility = 'visible';
        } else {
          el.style.opacity = 0;
          el.style.visibility = 'hidden';
        }
      };
    };

    function isSalePriceEnabled_(item) {
      var isEnabled = item.salePrice && item.regularPrice &&
        !isEmptyString(item.salePrice) && !isEmptyString(item.regularPrice) &&
        stringValuesAreUnique(item.salePrice, item.regularPrice);
      return isEnabled;

      function isEmptyString(str) {
        if (!str) {
          return true;
        }
        str = str.trim();
        return !str || !str.length;
      };

      function stringValuesAreUnique(value1, value2) {
        var valuesNotEqual = value1 != value2;
        var valuesBothEmpty = isEmptyString(value1) && isEmptyString(value2);
        return valuesNotEqual && !valuesBothEmpty;
      };
    };
  };

</script>

无手滑式图库时的函数

<script>

initItemDisplay_ = function(item) {
  var itemPrice = item.querySelector('.js-item-price');
  var itemSalePrice = item.querySelector('.js-item-saleprice');
  var itemRegularPrice = item.querySelector('.js-item-regularprice');
  displayCorrectPrices(itemPrice, itemSalePrice, itemRegularPrice);
};

displayCorrectPrices = function(defaultPrice, salePrice, regularPrice) {
  var priceValues = {
    defaultPrice: defaultPrice && defaultPrice.textContent || null,
    salePrice: salePrice && salePrice.textContent || null,
    regularPrice: regularPrice && regularPrice.textContent || null
  };
  showSalePrice(true, defaultPrice, salePrice, regularPrice);
  if (isSalePriceEnabled_(priceValues)) {
    showSalePrice(true, defaultPrice, salePrice, regularPrice);
  } else {
    showSalePrice(false, defaultPrice, salePrice, regularPrice);
  }

  function showSalePrice(state, defaultPrice, salePrice, regularPrice) {
    showElement(defaultPrice, !state);
    showElement(salePrice, state);
    showElement(regularPrice, state);

    function showElement(el, state) {
      if (!el) return;
      if (state) {
        el.style.opacity = 1;
        el.style.visibility = 'visible';
      } else {
        el.style.opacity = 0;
        el.style.visibility = 'hidden';
      }
    };
  };

  function isSalePriceEnabled_(item) {
    var isEnabled = item.salePrice && item.regularPrice &&
      !isEmptyString(item.salePrice) && !isEmptyString(item.regularPrice) &&
      stringValuesAreUnique(item.salePrice, item.regularPrice);
    return isEnabled;

    function isEmptyString(str) {
      if (!str) {
        return true;
      }
      str = str.trim();
      return !str || !str.length;
    };

    function stringValuesAreUnique(value1, value2) {
      var valuesNotEqual = value1 != value2;
      var valuesBothEmpty = isEmptyString(value1) && isEmptyString(value2);
      return valuesNotEqual && !valuesBothEmpty;
    };
  };
};

</script>

5. 添加事件

在设计视图中，转到事件面板并添加新事件，以触发上一步中的代码。根据下方表格之一配置该事件，具体取决于您是否有手滑式图库：

事件（如果有手滑式图库）

如有必要，请在自定义代码中更改手滑式图库的 ID。

目标 swipegallery-items
事件 手滑式图库 > 已加载图片
操作 自定义 > 添加自定义操作
自定义代码 var gallery = document.getElementById('swipegallery-items');
var items = gallery.querySelectorAll('.js-item');
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  initItemDisplay_(item);
}

事件（如果无手滑式图库）

目标 page1
事件 页面 > 可以呈现页面了
操作 自定义 > 添加自定义操作
自定义代码 var items = document.querySelectorAll('.js-item');
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  initItemDisplay_(item);
}

该内容对您有帮助吗？

您有什么改进建议？
true
搜索
清除搜索内容
关闭搜索框
主菜单
32272348323934319
true
搜索支持中心
true
true
true
true
true
5050422
false
false