แสดงราคาในโฆษณาแบบไดนามิกของ Google Ads

ฟีด Google Ads อาจมีราคามากกว่า 1 รายการสำหรับสินค้า 1 อย่าง เช่น ราคาปกติและราคาลด โดยคุณสามารถเพิ่มฟังก์ชันให้กับโฆษณาแบบไดนามิกของ Google Ads ใน Google Web Designer เพื่อกําหนดราคาที่ควรแสดงสำหรับรายการฟีดแต่ละรายการ

ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างโฆษณาแบบไดนามิกสำหรับ Google Ads ใน Google Web Designer

แสดงราคาเดียวสำหรับแต่ละรายการ

หากฟีดมีเพียงราคาเดียวสำหรับสินค้าแต่ละรายการ ให้เชื่อมโยงเนื้อหาข้อความขององค์ประกอบราคากับแอตทริบิวต์ราคาที่ต้องการแสดง เช่น ค้าปลีก 0 > ราคาปกติ

แสดงราคาลดคู่กับราคาปกติ

คุณใช้โค้ดเพื่อกําหนดวิธีแสดงราคาได้ โดยขึ้นอยู่กับว่าสินค้าดังกล่าวมีราคาลดและราคาลดนั้นแตกต่างจากราคาปกติหรือไม่ ในตัวอย่างด้านล่าง สินค้าที่ลดราคานั้นมีราคาลดแสดงอยู่ใต้ราคาปกติซึ่งแสดงแบบมีขีดทับ

ต่อไปนี้คือเทมเพลตที่ปรับเปลี่ยนตามอุปกรณ์สำหรับ Google Ads ซึ่งมีฟังก์ชันนี้อยู่แล้ว

• Dynamic Remarketing Single Page with Panels and Individual CTA Buttons (รีมาร์เก็ตติ้งแบบไดนามิกหน้าเดียวที่มีแผงและปุ่ม CTA แต่ละปุ่ม)
• Dynamic Remarketing with Aligned Panels and Individual CTA Buttons (รีมาร์เก็ตติ้งแบบไดนามิกที่มีแผงแบบจัดแล้วและปุ่ม CTA แต่ละปุ่ม)
• Dynamic Remarketing with Headline and Individual CTA Buttons (รีมาร์เก็ตติ้งแบบไดนามิกที่มีบรรทัดแรกและปุ่ม CTA แต่ละปุ่ม)
• Dynamic Remarketing with Headline and Single CTA Button (รีมาร์เก็ตติ้งแบบไดนามิกที่มีบรรทัดแรกและปุ่ม CTA 1 ปุ่ม)
• Dynamic Remarketing with Pagination and Single CTA (รีมาร์เก็ตติ้งแบบไดนามิกที่มีการใส่เลขหน้าและ CTA 1 รายการ)
• Dynamic Remarketing with Single CTA II (รีมาร์เก็ตติ้งแบบไดนามิกที่มี CTA 1 รายการ II)

หรือถ้าหากคุ้นเคยกับการใช้ Google Web Designer ในมุมมองโค้ด คุณก็สามารถเพิ่มโค้ดที่จําเป็นได้โดยทําตามขั้นตอนด้านล่าง ซึ่งกระบวนการนี้ใช้ได้กับสคีมาค้าปลีกแบบไดนามิก แต่คุณสามารถนำไปปรับใช้กับฟีดประเภทอื่นๆ ได้โดยใช้การเชื่อมโยงอื่น

1. สร้างองค์ประกอบของข้อความสำหรับราคา

สร้างองค์ประกอบของข้อความ 3 รายการในครีเอทีฟโฆษณาสำหรับประเภทราคาต่อไปนี้

• ราคาเริ่มต้น - ราคานี้จะแสดงขึ้นเองหากไม่มีราคาลด
• ราคาลด - หากระบุไว้ในฟีด ราคานี้จะแสดงพร้อมราคาปกติ
• ราคาปกติ - หากระบุราคาลดไว้ในฟีด ราคานี้จะแสดงพร้อมกับราคาลด ซึ่งมักจะเป็นแบบขีดทับเพื่อให้ผู้ชมเปรียบเทียบทั้ง 2 ราคาได้

2. เพิ่มการเชื่อมโยง

ในแผงไดนามิก ให้เพิ่มการเชื่อมโยงแบบไดนามิกสำหรับเนื้อหาข้อความขององค์ประกอบราคาในออบเจ็กต์สคีมาข้อมูลต่อไปนี้

• ราคาเริ่มต้น - เชื่อมโยงกับค้าปลีก 0 > ราคาต่ำสุด
• ราคาลด - เชื่อมโยงกับค้าปลีก 0 > ราคาลด
• ราคาปกติ - เชื่อมโยงกับค้าปลีก 0 > ราคาปกติ

สำหรับสคีมาข้อมูลที่ไม่ใช่ค้าปลีก คุณอาจต้องเชื่อมโยงราคาเริ่มต้นและราคาปกติกับออบเจ็กต์สคีมาข้อมูลเดียวกัน

3. เพิ่มคลาส

ในมุมมองโค้ด ให้เพิ่มคลาสต่อไปนี้

• องค์ประกอบระดับบนที่มีราคา - เพิ่มคลาส js-item ลงในองค์ประกอบระดับบน หากราคาของคุณเป็นส่วนหนึ่งของกลุ่มแกลเลอรีแบบปัดดู ให้เพิ่มคลาสนี้ลงในอินสแตนซ์กลุ่ม
• ราคาเริ่มต้น - เพิ่มคลาส js-item-price ลงในองค์ประกอบของข้อความ
• ราคาลด - เพิ่มคลาส js-item-saleprice ลงในองค์ประกอบของข้อความ
• ราคาปกติ - เพิ่มคลาส js-item-regularprice ลงในองค์ประกอบของข้อความ

4. เพิ่มฟังก์ชัน

ในมุมมองโค้ด ให้คัดลอกและวางโค้ดที่เหมาะสมจากด้านล่างลงในเอกสารภายในแท็ก โดยขึ้นอยู่กับว่าสินค้าของคุณแสดงอยู่ในแกลเลอรีแบบปัดดูหรือไม่

ฟังก์ชันต่างๆ ในกรณีที่มีแกลเลอรีแบบปัดดู

โค้ดนี้จะถือว่าแกลเลอรีแบบปัดดูมีรหัส swipegallery-items หากไม่เป็นเช่นนั้น ให้เปลี่ยนข้อความที่ไฮไลต์เป็นรหัสที่ถูกต้อง

<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. เพิ่มเหตุการณ์

ในมุมมองการออกแบบ ให้ไปที่แผงเหตุการณ์แล้วเพิ่มเหตุการณ์ใหม่เพื่อทริกเกอร์โค้ดจากขั้นตอนก่อนหน้า จากนั้นให้กําหนดค่าเหตุการณ์ตามตารางด้านล่าง โดยขึ้นอยู่กับว่าคุณมีแกลเลอรีแบบปัดดูหรือไม่

เหตุการณ์ในกรณีที่มีแกลเลอรีแบบปัดดู

หากจําเป็น ให้เปลี่ยนรหัสของแกลเลอรีแบบปัดดูในโค้ดที่กําหนดเอง

เป้าหมาย	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); }