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

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

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

• ปลั๊กอิน Google Mobile Ads Flutter เวอร์ชัน 0.13.6 ขึ้นไป

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

ขนาดคงที่

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

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