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

เลือกแพลตฟอร์ม: Android ใหม่ Android iOS Flutter

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

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

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

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

ขนาดคงที่

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

  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 เพื่อระบุขนาดโฆษณาที่ใช้ได้สำหรับคำขอโฆษณา

Swift

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

Objective-C

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

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

Swift

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())
}

Objective-C

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 ให้ดาวน์โหลดแอปเดโม API ของ iOS ใน Swift หรือ Objective-C

ดาวน์โหลดเดโม API

โปรโตคอล GADAdSizeDelegate

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

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

Swift

// 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
}

Objective-C

// 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;
}