ระบุสไตล์โฆษณาเนทีฟ

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

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

• Google Mobile Ads SDK เวอร์ชัน 7.14.0 ขึ้นไป

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

ขนาดคงที่

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

หากต้องการกำหนดขนาดคงที่ ให้ทำตามขั้นตอนต่อไปนี้

กำหนดขนาดโฆษณาให้เล็กกว่าหรือเท่ากับขนาดหน้าจอของอุปกรณ์ หากต้องการกำหนดขนาดหน้าจอสูงสุดใน iOS 26 ขึ้นไป ให้ใช้พร็อพเพอร์ตี้ UIWindowScene.effectiveGeometry.coordinateSpace ใน iOS 18 และเวอร์ชันก่อนหน้า ให้ใช้พร็อพเพอร์ตี้ UIWindowScene.coordinateSpace ดูรายละเอียดเกี่ยวกับข้อจำกัดด้านขนาดได้ที่แก้ปัญหาการแสดงผลที่ไม่ได้รับโฆษณาใน Ad Manager

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

2. ใน Interface Builder ให้ตั้งค่าความกว้างและความสูงของ GAMBannerView ให้ตรงกับขนาดที่กำหนดไว้ล่วงหน้าซึ่งคุณเลือกในขั้นตอนที่ 1 คุณดูรายการขนาดและค่าคงที่ GADAdSize ที่เกี่ยวข้องได้ในส่วนขนาดแบนเนอร์

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

ขนาดแบบไหล

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

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

ขนาดโฆษณา kGADAdSizeFluid ไม่มีความกว้างที่กำหนดไว้ล่วงหน้าซึ่งต่างจากรูปแบบโฆษณาอื่นๆ ดังนั้นโปรดตรวจสอบว่าได้ตั้งค่าความกว้างของเฟรมแบนเนอร์อย่างชัดเจนในโค้ดหรือใน Interface Builder หากไม่ได้ระบุความกว้าง โดยค่าเริ่มต้น SDK จะกำหนดความสูงของแบนเนอร์ตามความกว้างเต็มของอุปกรณ์

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

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

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

การใช้งานแบบเต็มรูปแบบในโค้ดจะมีลักษณะดังนี้

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

หากต้องการดูตัวอย่างการติดตั้งใช้งานขนาดโฆษณาแบบยืดหยุ่นของ Ad Manager ให้ดาวน์โหลดแอป iOS API Demo ใน Swift หรือ Objective-C

ดาวน์โหลด API สาธิต

โปรโตคอล GADAdSizeDelegate

คุณอาจต้องการทราบความสูงของแบนเนอร์ก่อนที่ขนาดโฆษณาจะเปลี่ยนไป Callback adView:willChangeAdSizeTo: จะแจ้งผู้รับมอบสิทธิ์ก่อนที่มุมมองแบนเนอร์จะเปลี่ยนเป็น GADAdSize ใหม่ หากต้องการรับการแจ้งเตือนก่อนที่มุมมองแบนเนอร์จะเปลี่ยนเป็นขนาดโฆษณาใหม่ คลาสของคุณต้องเป็นไปตามโปรโตคอล GADAdSizeDelegate

ต่อไปนี้เป็นตัวอย่างการใช้งาน Callback adView:willChangeAdSizeTo: ที่แสดงวิธีรับความกว้างและความสูงใหม่ของแบนเนอร์

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}