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

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

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

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

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

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

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

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

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

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

ca-app-pub-3940256099942544/2435281174

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

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

สร้าง GADBannerView

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

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

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

Swift

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

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 = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// 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 ลงในสตอรี่บอร์ดหรือไฟล์ xib ได้ เมื่อใช้วิธีนี้ โปรดเพิ่มข้อจำกัดตําแหน่งในแบนเนอร์เท่านั้น เช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่างของมุมมองแบนเนอร์เท่ากับด้านบนของคู่มือเลย์เอาต์ด้านล่าง และตั้งค่าข้อจำกัด centerX เท่ากับ centerX ของมุมมองหลัก

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

Swift

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

Objective-C

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

โหลดโฆษณา

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

Swift

bannerView.load(Request())
ViewController.swift

SwiftUI

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

Objective-C

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

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

รีเฟรชโฆษณา

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

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

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

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

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

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

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

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

Swift

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

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

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

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: เพื่อแสดงภาพเคลื่อนไหวของโฆษณาแบนเนอร์ได้เมื่อโฆษณาแสดงผลแล้ว ดังที่แสดงในตัวอย่างต่อไปนี้

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

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

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

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

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

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

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