สไตล์โฆษณาเนทีฟ

การตั้งค่าสไตล์โฆษณาเนทีฟ ช่วยให้ Google Ad Manager จัดการการแสดงผลโฆษณาเนทีฟตามสไตล์โฆษณาเนทีฟ ที่คุณระบุไว้ในผลิตภัณฑ์ได้ ก่อนอื่น ให้ระบุขนาดและการกำหนดเป้าหมาย จากนั้นเพิ่ม HTML, CSS และ JavaScript เพื่อกำหนดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณา และแสดงผลคุณภาพในทุกหน้าจอ คุณไม่จำเป็นต้องทำการแสดงผลใดๆ เนื่องจาก Ad Manager จะใช้สไตล์โฆษณาเนทีฟที่เหมาะสมกับปลายทางโดยอัตโนมัติ การติดตั้งใช้งานสไตล์โฆษณาเนทีฟจะเหมือนกับโฆษณาแบนเนอร์ โดยใช้ AdManagerAdView ใช้กับขนาดโฆษณาคงที่ที่กำหนดไว้ล่วงหน้า หรือขนาดโฆษณาแบบไหลที่กำหนดในรันไทม์ได้

ข้อกำหนดเบื้องต้น

• ปลั๊กอิน Flutter สำหรับโฆษณาในอุปกรณ์เคลื่อนที่ของ Google เวอร์ชัน 0.13.6 ขึ้นไป

คู่มือนี้ถือว่าคุณมีความรู้พื้นฐานเกี่ยวกับ Google Mobile Ads SDK หากยังไม่ได้ดำเนินการ โปรดดูคำแนะนำในคู่มือเริ่มต้นใช้งาน

ขนาดคงที่

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

1. สร้างรายการโฆษณาใน UI ของ Ad Manager แล้วเลือกขนาดที่กำหนดไว้ล่วงหน้าจากเมนูแบบเลื่อนลงของช่อง Size

2. โหลด AdManagerBannerAd ที่มีขนาดเดียวกับที่คุณตั้งค่าไว้ในขั้นตอนที่ 1 ดูเอกสารประกอบโฆษณาแบนเนอร์ เกี่ยวกับวิธีสร้างอินสแตนซ์และโหลดโฆษณา คุณดูรายการขนาดและAdSizeค่าคงที่ ที่เกี่ยวข้องได้ในส่วนขนาดแบนเนอร์

ต่อไปนี้คือตัวอย่างวิธีระบุขนาดคงที่ เช่น ขนาดโฆษณา MEDIUM_RECTANGLE (300x250)

AdManagerBannerAd ad = AdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  sizes: <AdSize>[AdSize.mediumRectangle],
  request: AdManagerAdRequest(),
);

ขนาดแบบไหล

ในบางกรณี การกำหนดขนาดคงที่อาจไม่เหมาะสม เช่น คุณอาจต้องการให้ความกว้างของโฆษณาสอดคล้องกับเนื้อหาของแอป แต่ต้องการให้ความสูงปรับเปลี่ยนแบบไดนามิกเพื่อให้พอดีกับเนื้อหาของโฆษณา หากต้องการจัดการกรณีนี้ คุณสามารถระบุ Fluid เป็นขนาดโฆษณาใน UI ของ Ad Manager ซึ่ง จะกำหนดว่าขนาดของโฆษณาจะกำหนดที่รันไทม์ในแอป SDK มีค่าคงที่ AdSize พิเศษ FLUID เพื่อจัดการกรณีนี้ ความสูงของขนาดโฆษณาแบบไหลจะกำหนดแบบไดนามิกตามความกว้างที่ผู้เผยแพร่โฆษณากำหนด ซึ่งจะช่วยให้มุมมองโฆษณาของแพลตฟอร์มปรับความสูงให้ตรงกับความสูงของครีเอทีฟโฆษณาได้

คำขอแบบยืดหยุ่น

ใช้ FluidAdManagerBannerAd เพื่อขอโฆษณาแบบยืดหยุ่น

final fluidAd = FluidAdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  request: AdManagerAdRequest(),
  listener: AdManagerBannerAdListener(
    onAdLoaded: (Ad ad) {
      print('$_fluidAd loaded.');
    },
    onAdFailedToLoad: (Ad ad, LoadAdError error) {
      print('$_fluidAd failedToLoad: $error');
      ad.dispose();
    },
  ),

การแสดงโฆษณาแบบไหล

หลังจากโหลดโฆษณาแล้ว ให้ใช้ FluidAdWidget เพื่อแสดงโฆษณาแบบยืดหยุ่น โดยจะ ปรับความสูงให้ตรงกับมุมมองโฆษณาของแพลตฟอร์มพื้นฐาน

FluidAdWidget(
  width: <your-width>,
  ad: fluidAd,
);

ดูตัวอย่างการใช้งานขนาดโฆษณาแบบไหลของ Ad Manager ในแอปตัวอย่าง ใน Github