แบนเนอร์โฆษณา

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

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

แบนเนอร์แบบปรับขนาดได้แบบยึดพื้น

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

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

• ทำตามคู่มือเริ่มต้นใช้งาน

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

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

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

ca-app-pub-3940256099942544/2435281174

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

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

สร้าง GADBannerView

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

แบบเป็นโปรแกรม

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

// Initialize the BannerView.
bannerView = BannerView()

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

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

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

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.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
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

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

ระบบจะยังคงกำหนดขนาดโฆษณาของแบนเนอร์โดยอัตโนมัติ

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

โหลดโฆษณา

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

bannerView.load(Request())
ViewController.swift

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

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

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

รีเฟรชโฆษณา

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

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

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

ลงทะเบียนสำหรับเหตุการณ์แบนเนอร์

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

bannerView.delegate = self
ViewController.swift

banner.delegate = context.coordinator
BannerContentView.swift

self.bannerView.delegate = self;
ViewController.m

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

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

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

- (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");
}
ViewController.m

ดูตัวอย่าง Ad Delegate เพื่อดูการใช้งานเมธอด Banner Delegate ใน แอป iOS API Demo

Swift Objective-C

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

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

เพิ่มแบนเนอร์ลงในลําดับชั้นของมุมมองเมื่อได้รับโฆษณา

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่างใน GitHub

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

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

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

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

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

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

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

สำรวจหัวข้ออื่นๆ

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