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

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

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

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

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

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

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

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

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

ca-app-pub-3940256099942544/2435281174

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

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

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

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

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

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

ดูตัวอย่างผู้รับมอบสิทธิ์โฆษณาสำหรับการใช้งานเมธอดผู้รับมอบสิทธิ์แบนเนอร์ในแอปเดโม 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

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

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

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

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

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

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

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