Google 広告のダイナミック広告で価格を表示する

Google 広告フィードには、アイテムの複数の価格（通常価格やセール価格など）を含めることができます。Google Web Designer では Google 広告のダイナミック広告に機能を追加して、各フィード アイテムに表示する価格を決定できます。

Google Web Designer で Google 広告のダイナミック広告を作成する方法について詳しくは、こちらをご覧ください。

各アイテムに単一の価格を表示する

フィードの各アイテムに単一の価格のみが設定されている場合は、価格要素のテキスト コンテンツを表示したい価格属性（[小売 0] > [通常価格] など）にバインドします

セール価格を通常価格とともに表示する

コードを使用して、アイテムにセール価格が設定されているかどうか、またセール価格が通常価格と異なるかどうかに基づいて、価格の表示方法を決定できます。下記の例では、セール中のアイテムの通常価格の下にセール価格が表示され、通常価格に取り消し線が引かれています。

Google 広告の次のレスポンシブ テンプレートには、この機能がすでに組み込まれています。

  • 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. 価格のテキスト要素を作成する

クリエイティブで次の価格タイプに 3 つのテキスト要素を作成します。

  • デフォルトの価格 - セール価格が設定されていない場合に、この価格が単独で表示されます。
  • セール価格 - この価格がフィードに表示される場合は、通常価格とともに表示されます。
  • 通常価格 - セール価格がフィードに表示される場合、比較しやすいように、通常価格がセール価格とともに表示され、多くの場合、通常価格に取り消し線が付きます。

2. バインディングを追加する

[ダイナミック] パネルで、次のデータスキーマ オブジェクトに価格要素のテキスト コンテンツに対するダイナミック バインディングを追加します。

  • デフォルトの価格 - [小売 0] > [最低価格] にバインドします。
  • セール価格 - [小売 0] > [セール価格] にバインドします。
  • 通常価格 - [小売 0] > [通常価格] にバインドします。

小売以外のデータスキーマの場合は、デフォルトの価格と通常価格を同じデータスキーマ オブジェクトにバインドする必要があります。

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
検索
検索をクリア
検索を終了
メインメニュー
4480925342636823456
true
ヘルプセンターを検索
true
true
true
true
true
5050422
false
false