Google Ads 동적 광고에 가격 표시하기

한 항목에 대해 정상가와 할인가 등 두 개 이상의 가격이 Google Ads 피드에 있을 수 있습니다. Google Web Designer의 Google Ads 동적 광고에 기능을 추가하여 각 피드 항목에 표시할 가격을 결정할 수 있습니다.

Google Web Designer에서 Google Ads 동적 광고를 생성하는 방법을 자세히 알아보세요.

각 항목의 단일가 표시

피드에 각 항목의 단일가만 있는 경우 소매업 0 >정상가와 같이 가격 요소의 텍스트 콘텐츠를 표시하려는 가격 속성에 결합합니다.

할인가를 정상가와 함께 표시

코드를 사용하여 항목에 할인가가 있는지, 할인가가 정상가와 다른지에 따라 가격 표시 방법을 결정할 수 있습니다. 아래 예시에서와 같이 할인 중인 항목의 할인가는 정상가 아래에 표시되며 정상가는 취소선이 그어진 상태로 표시됩니다.

다음 기능은 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. 가격의 텍스트 요소 만들기

다음 가격 유형과 관련하여 광고 소재에서 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
검색
검색어 지우기
검색 닫기
기본 메뉴
8386777690798005691
true
도움말 센터 검색
true
true
true
true
true
5050422
false
false