ตั้งค่าโฆษณาแบนเนอร์

เลือกแพลตฟอร์ม: Android iOS Unity Flutter Android (เดิม)

โฆษณาแบนเนอร์ คือโฆษณารูปสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนใดส่วนหนึ่งของเลย์เอาต์ของแอป แบนเนอร์แบบปรับขนาดได้ชนิด Anchor จะแสดงบนหน้าจอเสมอ โดยตรึงไว้ที่ด้านบนหรือด้านล่างของหน้าจอ โดยมีความสูงสูงสุดที่ 20% ของขนาดหน้าจอ โดยมีความสูงสูงสุด 150 พิกเซล ใช้แบนเนอร์แบบปรับขนาดได้เพื่อเพิ่มประสิทธิภาพขนาดโฆษณาสําหรับอุปกรณ์แต่ละเครื่อง

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

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

ตั้งค่า Google Mobile Ads SDK ก่อนดำเนินการต่อ

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทน โฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าว อาจส่งผลให้บัญชีถูกระงับ

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับแบนเนอร์ iOS

ca-app-pub-3940256099942544/2435281174

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของGoogle Mobile Ads SDKโฆษณาทดสอบได้ที่โฆษณาทดสอบ

สร้าง GADBannerView

โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ GADBannerView ดังนั้นขั้นตอนแรกในการผสานรวมโฆษณาแบนเนอร์คือการรวม GADBannerView ไว้ในลำดับชั้นการแสดงผล โดยปกติแล้วจะดำเนินการผ่านโปรแกรมหรือ ผ่าน Interface Builder

โดยใช้โปรแกรม

นอกจากนี้ยังสร้างอินสแตนซ์ของ GADBannerView ได้โดยตรงด้วย ตัวอย่างต่อไปนี้จะสร้าง GADBannerView

Swift

// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

SwiftUI

หากต้องการใช้ BannerView ให้สร้าง UIViewRepresentable โดยทำดังนี้

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

เพิ่ม UIViewRepresentable ลงในลำดับชั้นการแสดงผล โดยระบุค่า height และ width ดังนี้

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;
BannerSnippets.m

Interface Builder

คุณเพิ่ม GADBannerView ลงในไฟล์ Storyboard หรือ XIB ได้ เมื่อใช้วิธีนี้ โปรดตรวจสอบว่าได้เพิ่มข้อจำกัดด้านตำแหน่งในแบนเนอร์เท่านั้น เช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่าง ของมุมมองแบนเนอร์ให้เท่ากับด้านบนของแนวทางการจัดวางด้านล่าง และตั้งค่า centerX ข้อจำกัดให้เท่ากับcenterXของ Superview

กำหนดขนาดโฆษณา

แบนเนอร์แบบปรับขนาดได้ขนาดใหญ่มีรูปแบบที่ใหญ่ขึ้นซึ่งออกแบบมาสำหรับเลย์เอาต์ที่ไม่เลื่อน เมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ตรึงไว้มาตรฐาน แบนเนอร์เหล่านี้ อนุญาตให้มีความสูงสูงสุดที่สูงขึ้น (สูงสุด 20% ของความสูงหน้าจอ ระหว่าง 50 ถึง 150 จุด) พื้นที่ที่เพิ่มขึ้นนี้ได้รับการเพิ่มประสิทธิภาพสำหรับเนื้อหาวิดีโอ

ตัวอย่างต่อไปนี้จะรับขนาดแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ขนาดใหญ่

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerSnippets.swift

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
BannerSnippets.m

โหลดโฆษณา

เมื่อGADBannerViewพร้อมใช้งานและมีการกำหนดค่าพร็อพเพอร์ตี้ เช่น adUnitID แล้ว ก็ถึงเวลาโหลดโฆษณา โดยทำได้ด้วยการเรียกใช้ loadRequest: ในออบเจ็กต์ GADRequest

Swift

func loadBannerAd(bannerView: BannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(Request())
}
BannerSnippets.swift

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

[self.bannerView loadRequest:[GADRequest request]];
BannerSnippets.m

GADRequest ออบเจ็กต์แสดงคำขอโฆษณาเดียว และมีพร็อพเพอร์ตี้ สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย

เคล็ดลับ: คุณสามารถใช้การเรียกจำนวนโฆษณาเพื่อสร้างแคชของโฆษณาที่โหลดล่วงหน้าก่อนที่คุณ ตั้งใจจะแสดง เพื่อให้โฆษณาสามารถแสดงโดยไม่มีเวลาในการตอบสนองเมื่อจำเป็น เนื่องจากโฆษณาจะหมดอายุหลังจากผ่านไป 1 ชั่วโมง คุณจึงควรล้างแคชนี้และโหลดซ้ำด้วยโฆษณาใหม่ทุกชั่วโมง

รีเฟรชโฆษณา

หากกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่น เมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK จะใช้อัตราการรีเฟรชที่คุณระบุใน UI ของ AdMob หากยังไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรช ได้ที่ ใช้การรีเฟรชอัตโนมัติสําหรับโฆษณาแบนเนอร์

หมายเหตุ: เมื่อตั้งค่าอัตราการรีเฟรชใน UI ของ AdMob การรีเฟรชอัตโนมัติจะเกิดขึ้นก็ต่อเมื่อแบนเนอร์ปรากฏบนหน้าจอเท่านั้น

จัดการการเปลี่ยนแปลงการวางแนว

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

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}
BannerSnippets.swift

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}
BannerSnippets.m

เหตุการณ์โฆษณา

การใช้ GADBannerViewDelegate ช่วยให้คุณฟังเหตุการณ์วงจรได้ เช่น เมื่อปิดโฆษณาหรือผู้ใช้ออกจากแอป

ลงทะเบียนเข้าร่วมกิจกรรมแบนเนอร์

หากต้องการลงทะเบียนสำหรับเหตุการณ์โฆษณาแบนเนอร์ ให้ตั้งค่าพร็อพเพอร์ตี้ delegate ใน GADBannerView เป็นออบเจ็กต์ที่ใช้โปรโตคอล GADBannerViewDelegate โดยทั่วไปแล้ว คลาสที่ใช้โฆษณาแบนเนอร์จะทำหน้าที่เป็นคลาสตัวแทนด้วย ในกรณีนี้ คุณจะตั้งค่าพร็อพเพอร์ตี้ delegate เป็น self ได้

Swift

bannerView.delegate = self
BannerSnippets.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

bannerView.delegate = self;
BannerSnippets.m

ติดตั้งใช้งานเหตุการณ์แบนเนอร์

แต่ละวิธีใน GADBannerViewDelegate จะทําเครื่องหมายเป็นไม่บังคับ คุณจึงต้องใช้เฉพาะวิธีที่ต้องการเท่านั้น ตัวอย่างนี้จะใช้แต่ละเมธอด และบันทึกข้อความลงในคอนโซล

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}
BannerSnippets.swift

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}
BannerSnippets.m

ดูตัวอย่างผู้รับมอบสิทธิ์โฆษณาเพื่อดูการติดตั้งใช้งานเมธอดผู้รับมอบสิทธิ์แบนเนอร์ในแอปเดโม API ของ iOS

Swift Objective-C

กรณีการใช้งาน

ตัวอย่างกรณีการใช้งานสำหรับเมธอดเหตุการณ์โฆษณาเหล่านี้มีดังนี้

เพิ่มแบนเนอร์ลงในลำดับชั้นการแสดงผลเมื่อได้รับโฆษณา

คุณอาจต้องการหน่วงเวลาการเพิ่ม GADBannerView ลงในลำดับชั้นการแสดงผลจนกว่าจะได้รับโฆษณา คุณทำได้โดยการฟัง เหตุการณ์ bannerViewDidReceiveAd: ดังนี้

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

สร้างภาพเคลื่อนไหวโฆษณาแบนเนอร์

นอกจากนี้ คุณยังใช้bannerViewDidReceiveAd: event เพื่อเคลื่อนไหวโฆษณาแบนเนอร์ได้ 1 ครั้ง เมื่อได้รับโฆษณาแล้ว ดังตัวอย่างต่อไปนี้

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

หยุดแอปชั่วคราวและกลับมาใช้งานอีกครั้ง

GADBannerViewDelegateโปรโตคอลมีวิธีการแจ้งเตือนเหตุการณ์ต่างๆ เช่น เมื่อการคลิกทําให้มีการแสดงหรือปิดวางซ้อน หากต้องการติดตามว่าเหตุการณ์เหล่านี้เกิดจากโฆษณาหรือไม่ ให้ลงทะเบียนเพื่อใช้GADBannerViewDelegateวิธีการเหล่านี้

หากต้องการตรวจจับการนำเสนอแบบซ้อนทับหรือการเรียกใช้เบราว์เซอร์ภายนอกทุกประเภท ไม่ใช่แค่ที่มาจากการคลิกโฆษณา แอปของคุณควรรับฟังวิธีการที่เทียบเท่าใน UIViewController หรือ UIApplication ตารางต่อไปนี้แสดงเมธอด iOS ที่เทียบเท่าซึ่งเรียกใช้พร้อมกับเมธอด GADBannerViewDelegate

เมธอด GADBannerViewDelegate	วิธีการใน iOS
bannerViewWillPresentScreen:	viewWillDisappear: ของ UIViewController
bannerViewWillDismissScreen:	viewWillAppear: ของ UIViewController
bannerViewDidDismissScreen:	viewDidAppear: ของ UIViewController

แหล่งข้อมูลเพิ่มเติม

ตัวอย่างใน GitHub

• ตัวอย่างโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ Swift | SwiftUI | Objective-C

• การสาธิตฟีเจอร์ขั้นสูง: Swift | Objective-C

ขั้นตอนถัดไป

แบนเนอร์แบบยุบได้

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

แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด

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

ดูหัวข้ออื่นๆ

• ความเป็นส่วนตัวของผู้ใช้