การตั้งค่าสไตล์โฆษณาเนทีฟ
ช่วยให้ Google Ad Manager จัดการการแสดงผลโฆษณาเนทีฟตามสไตล์โฆษณาเนทีฟที่คุณระบุไว้ในผลิตภัณฑ์ได้
โดยให้ระบุขนาดและการกำหนดเป้าหมายก่อน
จากนั้นเพิ่ม HTML, CSS และ JavaScript เพื่อกำหนดโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์และแสดงผลคุณภาพสูงในทุกหน้าจอ คุณไม่จำเป็นต้องทำการแสดงผลใดๆ เนื่องจาก Ad Manager จะใช้สไตล์โฆษณาเนทีฟที่เหมาะสมกับปลายทางโดยอัตโนมัติ สไตล์โฆษณาเนทีฟจะใช้งานได้เหมือนกับโฆษณาแบนเนอร์โดยใช้ AdManagerAdView โดยสามารถใช้กับขนาดโฆษณาคงที่ที่กำหนดไว้ล่วงหน้า หรือขนาดโฆษณาแบบยืดหยุ่นที่กำหนดในรันไทม์
ข้อกำหนดเบื้องต้น
- Google Mobile Ads Flutter Plugin เวอร์ชัน 0.13.6 ขึ้นไป
คู่มือนี้จะถือว่าคุณมีความรู้ความเข้าใจในการใช้งาน Google Mobile Ads Flutter Plugin หากยังไม่ได้ดำเนินการ โปรดอ่านคู่มือ เริ่มต้นใช้งาน
ขนาดคงที่
สไตล์โฆษณาเนทีฟที่มีขนาดคงที่ช่วยให้คุณควบคุมความกว้างและความสูงของโฆษณาเนทีฟได้ หากต้องการกำหนดขนาดคงที่ ให้ทำตามขั้นตอนต่อไปนี้
สร้างรายการโฆษณาใน UI ของ Ad Manager แล้วเลือกขนาดที่กำหนดไว้ล่วงหน้าจากเมนูแบบเลื่อนลงของช่อง
Sizeโหลด
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