在 Google Ads 動態廣告中顯示價格

Google Ads 動態饋給可包含某項商品的多種價格，例如原價和特價。使用 Google Web Designer 時，您可以在 Google Ads 動態廣告中加入用來確定個別動態饋給項目所顯示價格的函式。

進一步瞭解如何在 Google Web Designer 中建立 Google Ads 動態廣告。

每項商品只顯示單一價格

如果您的動態饋給只為每項商品提供單一價格，請將價格元素的文字內容繫結至要顯示的價格屬性 (例如 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 的程式碼檢視模式，也可以按照下列步驟加入必要程式碼。儘管以下介紹的是「零售」動態架構的處理流程，但是您或許可以藉由使用不同繫結，按照類似流程來處理其他類型的動態饋給。

1. 建立價格的文字元素

在廣告素材中建立下列三個價格類型的文字元素。

  • 預設價格：沒有特價時會顯示這個價格。
  • 特價：如果動態饋給提供此價格，此價格就會和原價並列顯示。
  • 原價：如果動態饋給提供此價格，此價格就會和特價並列顯示。原價上通常有刪除線，方便檢視者比較與特價的價差。

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。

<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
搜尋
清除搜尋內容
關閉搜尋
主選單
6622896831017246824
true
搜尋說明中心
true
true
true
true
true
5050422
false
false